Nuxt3中@sidebase/nuxt-auth与Histoire Vue上下文冲突求助

问题场景 #

基于Nuxt3和Vue3的项目，集成@sidebase/nuxt-auth模块后，运行yarn story:dev时出现上下文冲突错误，移除该模块后Histoire可正常运行。

解决思路与方案 #

1. 在Histoire中排除@sidebase/nuxt-auth模块 #

Histoire的HstNuxt插件默认会加载所有Nuxt模块，但@sidebase/nuxt-auth是偏向服务端/运行时的模块，在Histoire的组件预览环境中不需要加载。可以直接在Histoire配置中指定要加载的Nuxt模块，排除auth模块：

修改histoire.config.ts：

import { defineConfig } from 'histoire';
import { HstNuxt } from '@histoire/plugin-nuxt';
import { HstVue } from '@histoire/plugin-vue';

export default defineConfig({
  plugins: [
    HstVue(),
    HstNuxt({
      nuxtConfig: {
        modules: [
          '@nuxtjs/tailwindcss',
          'nuxt-icon',
          '@pinia/nuxt',
          '@nuxtjs/robots',
          'nuxt-viewport',
          // 不包含@sidebase/nuxt-auth
        ],
      },
    }),
  ],
});

2. 条件加载@sidebase/nuxt-auth模块 #

在Nuxt配置中，通过环境变量判断是否为Histoire运行环境，只在非Histoire环境加载auth模块：

首先修改nuxt.config.ts：

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-icon',
    '@pinia/nuxt',
    '@nuxtjs/robots',
    'nuxt-viewport',
    // 仅在非Histoire环境加载auth模块
    ...(process.env.NODE_ENV !== 'storybook' ? ['@sidebase/nuxt-auth'] : []),
  ],
  // 其他原有配置保持不变
});

然后修改package.json中的脚本，添加环境变量：

"scripts": {
  "story:dev": "NODE_ENV=storybook histoire dev"
}

3. 版本兼容性检查 #

确认@sidebase/nuxt-auth的版本与当前Nuxt3、Histoire的版本是否兼容。可以查看该模块的官方文档或GitHub仓库的README，尝试升级到最新稳定版，或降级到已知兼容的版本：

# 升级到最新版
yarn add @sidebase/nuxt-auth@latest

# 或降级到指定版本，比如v0.6.0
yarn add @sidebase/nuxt-auth@0.6.0

4. 模拟Auth上下文（针对依赖Auth的组件） #

如果你的组件依赖@sidebase/nuxt-auth提供的上下文（比如useAuth组合式函数），可以在Histoire中添加模拟插件，避免因找不到上下文报错：

创建histoire/plugins/auth-mock.ts文件：

import { definePlugin } from '@histoire/plugin-vue';

export default definePlugin({
  setup(ctx) {
    // 模拟useAuth返回的对象
    ctx.app.provide('auth', {
      useAuth: () => ({
        user: null,
        isAuthenticated: false,
        login: () => Promise.resolve(),
        logout: () => Promise.resolve(),
        // 根据组件需求添加其他属性/方法
      }),
    });
  },
});

然后在histoire.config.ts中引入该插件：

import { defineConfig } from 'histoire';
import { HstNuxt } from '@histoire/plugin-nuxt';
import { HstVue } from '@histoire/plugin-vue';
import authMock from './histoire/plugins/auth-mock';

export default defineConfig({
  plugins: [HstVue(), HstNuxt(), authMock],
});

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