如何在Storybook中正确Stub NuxtLink组件解决渲染报错？

你当前的代码存在两个核心问题，导致Stub NuxtLink失败：

1. 类型引用错误：meta里的typeof HeaderMobile应该改为typeof Header，类型不匹配会干扰Storybook对组件的解析逻辑。
2. Stub作用域覆盖不足：如果Header组件内是全局调用NuxtLink（而非局部导入），仅在render函数的components里注册Stub无法覆盖全局组件引用。

以下是几种可行的解决方案：

方案一：修正当前故事代码 #

先修复类型错误，确保Stub在当前故事的作用域内生效：

import type { Meta, StoryObj } from '@storybook/vue3'
import { Header } from './../src/components'
import { RouterLinkStub } from '@vue/test-utils'

// 修正类型引用
const meta: Meta<typeof Header> = {
  title: 'Header',
  component: Header,
  render: (args: any) => ({
    components: {
      Header,
      // 注册NuxtLink的Stub
      NuxtLink: RouterLinkStub
    },
    setup() {
      return { args }
    },
    template: '<Header v-bind="args" />'
  })
}

export default meta
type Story = StoryObj<typeof meta>

// 定义默认故事
export const Default: Story = {
  args: {}
}

方案二：全局注册Stub（推荐） #

如果多个组件都用到NuxtLink，可在Storybook全局配置中一次性完成Stub，避免重复操作：
在.storybook/preview.js中添加：

import { RouterLinkStub } from '@vue/test-utils'

export default {
  global: {
    components: {
      NuxtLink: RouterLinkStub
    }
  }
}

方案三：自定义极简Stub组件 #

如果RouterLinkStub和NuxtLink的API适配存在问题，可以自己实现一个极简Stub，适配基础用法：

import type { Meta, StoryObj } from '@storybook/vue3'
import { Header } from './../src/components'

// 自定义NuxtLink Stub，匹配核心属性
const NuxtLinkStub = {
  props: ['to', 'activeClass'],
  template: '<a :href="to" :class="{ [activeClass]: true }"><slot /></a>'
}

const meta: Meta<typeof Header> = {
  title: 'Header',
  component: Header,
  render: (args: any) => ({
    components: {
      Header,
      NuxtLink: NuxtLinkStub
    },
    setup() {
      return { args }
    },
    template: '<Header v-bind="args" />'
  })
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {}
}

内容的提问来源于stack exchange，提问作者Pimmesz