如何在Storybook中为使用Nuxt.js插件的组件编写Story？

方法一：在Storybook预览配置里手动注入插件 #

Storybook不会自动加载Nuxt的插件，你可以在.storybook/preview.js里手动把插件挂载到Vue原型上，模拟Nuxt的注入逻辑：

import Vue from 'vue';
import externalLibrary from 'ext';

// 把插件挂载到Vue原型，让所有组件都能访问
Vue.prototype.$somePlugin = (content) => {
  return externalLibrary(content);
};

要是不想依赖真实的externalLibrary，直接写个mock实现就行：

import Vue from 'vue';

Vue.prototype.$somePlugin = (content) => {
  return `Mocked content: ${content}`; // 自定义返回值
};

方法二：通过@nuxtjs/storybook配置加载Nuxt插件 #

你可以让@nuxtjs/storybook自动加载你的Nuxt插件，有两种配置方式：

1. 在nuxt.config.js里配置 #

直接在Nuxt的主配置文件中指定要加载的插件：

export default {
  storybook: {
    plugins: ['~/plugins/你的插件文件名.js'] // 替换成实际插件路径
  },
  // 其他Nuxt配置...
}

2. 在.storybook/main.js里配置 #

如果用单独的Storybook配置文件，就修改.storybook/main.js：

module.exports = {
  stories: ['../components/**/*.stories.js'],
  addons: ['@nuxtjs/storybook'],
  webpackFinal: async (config) => {
    // 引入你的插件
    const plugin = require('../plugins/你的插件文件名.js').default;
    // 模拟Nuxt的context和inject方法
    const mockContext = {};
    const inject = (key, value) => {
      Vue.prototype[key] = value;
    };
    // 执行插件注入逻辑
    plugin(mockContext, inject);
    return config;
  }
};

方法三：仅在单个Story中注入插件 #

如果只需要在某个特定Story里用这个插件，可以用decorators注入：

import YourComponent from '~/components/YourComponent.vue';

export default {
  title: 'Components/YourComponent',
  component: YourComponent,
  decorators: [() => ({
    created() {
      // 给当前Vue实例挂载插件
      this.$somePlugin = (content) => {
        return externalLibrary(content); // 或者用mock实现
      };
    },
    template: '<story />'
  })]
};

export const Default = () => ({
  components: { YourComponent },
  template: '<YourComponent />'
});

额外提示 #

• 确保externalLibrary已经在项目中安装，或者在Storybook环境里正确mock，避免依赖问题
• 如果你用TypeScript，需要在shims-vue.d.ts里声明$somePlugin的类型，消除类型报错：

declare module 'vue/types/vue' {
  interface Vue {
    $somePlugin: (content: string) => string;
  }
}

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