I'm currently working on a Nuxt 3 project with Vue 3 and have integrated the @sidebase/nuxt-auth module along with Histoire Vue. However, when running yarn story:dev, I encounter the following error:
Historie conflict error message
Configuration Files:
Here are the relevant parts of my nuxt.config.ts:
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss',
'nuxt-icon', // Integration with Icon Module
'@pinia/nuxt', // Integration with Pinia
'@sidebase/nuxt-auth', // Integration with Auth Module
'@nuxtjs/robots',
'nuxt-viewport',
],
css: ['@/assets/css/main.css', '@/assets/css/roboto.css', '@/assets/css/ubuntu.css'],
runtimeConfig: {
public: {
API_BASE_URL: process.env.API_BASE_URL,
STAGING_MODE: process.env.STAGING_MODE,
GOOGLE_PLACES_API_KEY: process.env.GOOGLE_PLACES_API_KEY,
GETITFRONTEND_URL:
process.env.STAGING_MODE === 'true'
? 'https://staging.get.it'
: process.env.NODE_ENV === 'production'
? 'https://www.get.it'
: 'http://localhost:3000',
},
},
// App configuration
app: {
// Head configuration
head: {
// HTML attributes
htmlAttrs: {
lang: 'en', // Set the default language to English
},
title: '@ Get.It',
},
},
});
And my 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()],
});
This issue seems to be related to the @sidebase/nuxt-auth module. Interestingly, removing this module resolves the conflict, allowing Histoire Vue to work as expected. I've scoured online resources but couldn't find a similar case, prompting me to seek assistance here.
Has anyone faced a similar context conflict when using @sidebase/nuxt-auth and Histoire Vue in a Nuxt 3 project? Any insights or suggestions on resolving this issue would be highly appreciated.
Thank you for your assistance!