fix: Nuxt App created only when story vue app rendered first time,

examples/showcase/components/MyI18n.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import MyComponent from './MyI18n.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+
+const meta = {
+  title: 'Modules/I18n',
+  component: MyComponent,
+  argTypes: {
+    lang: { control: 'select', options: ['en', 'fr', 'ar'] },
+  },
+
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof MyComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+
+export const FrenchStory: Story = {
+  args: { lang: 'fr' },
+}
+
+export const EnglishStory: Story = {
+  args: { lang: 'en' },
+}
+
+export const ArabicStory: Story = {
+  args: { lang: 'ar' },
+}

examples/showcase/components/MyI18n.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import '../assets/button.css'
+
+const props = defineProps<{
+  lang: string
+  message?: string
+}>()
+const { t, locale } = useI18n()
+const rtl = computed(() => props.lang === 'ar')
+locale.value = props.lang
+watch(
+  () => props.lang,
+  (lang: unknown) => {
+    locale.value = lang
+  },
+)
+</script>
+
+<template>
+  <div class="storybook lang-selector">
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'en'"
+    >
+      en
+    </button>
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'fr'"
+    >
+      fr
+    </button>
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'ar'"
+    >
+      ar
+    </button>
+  </div>
+  <div class="storybook welcome" :style="{ direction: rtl ? 'rtl' : 'ltr' }">
+    <div>{{ t('welcome', { name: 'Storybook' }) }}</div>
+    <div>{{ t('welcome', { name: 'Nuxt' }) }}</div>
+    <div>{{ t('welcome', { name: 'I18n' }) }}</div>
+  </div>
+
+  <p>language : {{ lang }}</p>
+</template>

examples/showcase/components/MyNuxtWelcome.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import MyNuxtWelcome from './MyWelcome.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+
+const meta = {
+  title: 'Example/NuxtWelcome',
+  component: MyNuxtWelcome,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof MyNuxtWelcome>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const NuxtWelcomeStory: Story = {
+  args: {},
+}

examples/showcase/components/MyWelcome.vue

@@ -0,0 +1,40 @@
+<template>
+  <h1>Welcome Nuxt to Storybook</h1>
+  <NuxtWelcome />
+</template>
+
+<style>
+.readmore {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e0e0e0;
+  --tw-ring-inset: var(--tw-empty,);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(14, 165, 233, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  font-family:
+    'Nunito Sans',
+    -apple-system,
+    '.SFNSText-Regular',
+    'San Francisco',
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Helvetica Neue',
+    Helvetica,
+    Arial,
+    sans-serif;
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  line-height: 24px;
+  color: #029cfd;
+  text-decoration: none;
+  font-size: 14px;
+}
+</style>

examples/showcase/i18n.config.ts

@@ -0,0 +1,16 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  defaultLocale: 'en',
+  messages: {
+    en: {
+      welcome: 'Welcome to Storybook  ❤️  {name} ',
+    },
+    fr: {
+      welcome: 'Bienvenue a Storybook ❤️  {name} ',
+    },
+    ar: {
+      welcome: '   ناكست  ❤️  {name}   ❤️  مرحبا بكم في ستوري بوك   ',
+    },
+  },
+}))

examples/showcase/nuxt.config.ts

@@ -1,12 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/storybook', '@nuxt/image', '@pinia/nuxt'],
+  modules: ['@nuxtjs/storybook', '@nuxt/image', '@pinia/nuxt', '@nuxtjs/i18n'],
 
   pinia: {
     autoImports: ['defineStore', 'acceptHMRUpdate'],
   },
 
+  i18n: {
+    locales: ['en', 'fr', 'ar'],
+    defaultLocale: 'en',
+  },
+
   imports: {
     dirs: ['./stores'],
   },

examples/showcase/package.json

@@ -16,7 +16,8 @@
     "nuxt": "3.14.1592",
     "pinia": "2.3.0",
     "vue": "3.5.13",
-    "vue-router": "4.5.0"
+    "vue-router": "4.5.0",
+    "@nuxtjs/i18n": "8.3.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.3",

package.json

@@ -15,7 +15,7 @@
     "playground:storybook:dev": "pnpm run --filter=./playground/** storybook",
     "playground:storybook:build": "cd playground && pnpm run build-storybook",
     "playground:storybook:publish": "chromatic --exit-zero-on-changes --build-script-name playground:storybook:build --project-token=chpt_d7cf5e98426e11e",
-    "example:starter:dev": "pnpm run --filter=./examples/starter/** examples/starter dev",
+    "example:starter:dev": "pnpm run --filter=./examples/starter/** dev",
     "example:starter:build": "pnpm run --filter=./examples/starter/** build",
     "example:starter:storybook:build": "pnpm run --filter=./examples/starter/** build-storybook",
     "example:starter:storybook:publish": "chromatic --exit-zero-on-changes --build-script-name example:starter:storybook:build --project-token=chpt_dc04103f8a32bfa",

packages/storybook-addon/src/preview.ts

@@ -30,18 +30,17 @@ setup(async (vueApp, storyContext) => {
   // This is not totally correct, since the storybook vue renderer actually uses the canvas element
   // Also this doesn't allow to "forceRemount"
   // TODO: Improve this (needs PR to storybook to pass the necessary infos to this function)
-  const key = storyContext?.id
+
+  // use storyContext.canvasElement.id as key as it's unique for each rendered story
+  // storyContext.id is same for 2 stories in Docs mode, Primary story and the first story in stories are the same story and have the same id
+  const key = storyContext?.canvasElement.id
   if (!key) {
     throw new Error('StoryContext is not provided')
   }
 
   // Create a new nuxt app for each story
   const storyNuxtAppId = `nuxt-app-${key}`
   const storyNuxtCtx = getContext(storyNuxtAppId)
-  if (storyNuxtCtx.tryUse()) {
-    // Nothing to do, the Nuxt app is already created
-    return
-  }
 
   // Provide the config of the Nuxt app
   // @ts-expect-error internal Nuxt property

playground/i18n.config.ts

@@ -0,0 +1,16 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  defaultLocale: 'en',
+  messages: {
+    en: {
+      welcome: 'Welcome to Storybook  ❤️  {name} ',
+    },
+    fr: {
+      welcome: 'Bienvenue a Storybook ❤️  {name} ',
+    },
+    ar: {
+      welcome: '   ناكست  ❤️  {name}   ❤️  مرحبا بكم في ستوري بوك   ',
+    },
+  },
+}))

playground/nuxt.config.ts

@@ -1,12 +1,21 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['../packages/nuxt-module/src/module', '@nuxt/test-utils/module'],
+  modules: [
+    '../packages/nuxt-module/src/module',
+    '@nuxt/test-utils/module',
+    '@nuxtjs/i18n',
+  ],
 
   storybook: {
     // Very verbose logs for debugging
     logLevel: Number.POSITIVE_INFINITY,
   },
 
+  i18n: {
+    locales: ['en', 'fr', 'ar'],
+    defaultLocale: 'en',
+  },
+
   compatibilityDate: '2024-08-03',
 })

playground/package.json

@@ -19,6 +19,7 @@
     "nuxt": "3.14.1592",
     "vue": "3.5.13",
     "storybook": "8.4.7",
-    "vite-plugin-inspect": "0.10.3"
+    "vite-plugin-inspect": "0.10.3",
+    "@nuxtjs/i18n": "^8.3.1"
   }
 }

playground/stories/MyI18n.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import MyComponent from './MyI18n.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+
+const meta = {
+  title: 'Plugins/I18n',
+  component: MyComponent,
+  argTypes: {
+    lang: { control: 'select', options: ['en', 'fr', 'ar'] },
+  },
+
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof MyComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+
+export const FrenchStory: Story = {
+  args: { lang: 'fr' },
+}
+
+export const EnglishStory: Story = {
+  args: { lang: 'en' },
+}
+
+export const ArabicStory: Story = {
+  args: { lang: 'ar' },
+}

playground/stories/MyI18n.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import './button.css'
+
+const props = defineProps<{
+  lang: string
+  message?: string
+}>()
+const { t, locale } = useI18n()
+const rtl = computed(() => props.lang === 'ar')
+locale.value = props.lang
+watch(
+  () => props.lang,
+  (lang: unknown) => {
+    locale.value = lang
+  },
+)
+</script>
+
+<template>
+  <div class="storybook lang-selector">
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'en'"
+    >
+      en
+    </button>
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'fr'"
+    >
+      fr
+    </button>
+    <button
+      class="storybook-button storybook-button--small"
+      @click="locale = 'ar'"
+    >
+      ar
+    </button>
+  </div>
+  <div class="storybook welcome" :style="{ direction: rtl ? 'rtl' : 'ltr' }">
+    <div>{{ t('welcome', { name: 'Storybook' }) }}</div>
+    <div>{{ t('welcome', { name: 'Nuxt' }) }}</div>
+    <div>{{ t('welcome', { name: 'I18n' }) }}</div>
+  </div>
+
+  <p>language : {{ lang }}</p>
+</template>