Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-xfql3e (Open reproduction)

I can confirm this and tracked it down to this change:
nuxt-modules/i18n#2828

Not sure what to do about it though. Any idea? I'd be happy to contribute.

Same problem. Fresh install of Nuxt + I18n + Histoire

 "dependencies": {
    "@nuxtjs/i18n": "^8.3.0",
    "nuxt": "^3.11.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@histoire/plugin-nuxt": "^0.17.15",
    "@histoire/plugin-vue": "^0.17.15",
    "histoire": "^0.17.15"
  }

Same problem here. Has someone manage to implement some kind of workaround?

+1

please take care of this i dont want to fork @letoast repo xD and i want to deploy our component documentation :)

please take care of this i dont want to fork @letoast repo xD and i want to deploy our component documentation :)

TBH I'm going to try out nuxt storybook and see if everything works there.

Having the same issue. As mentioned #703 (comment) - downgrading @nuxtjs/i18n to the version below 8.0.2 removed the error for me.

Would be nice to get some followup on this though.

+1

Found a solution/workaround for our project:

Versions used (not tested with other versions):

• nuxt: 3.12.2
• @nuxtjs/i18n: 8.3.1
• @nuxtjs/[email protected] (not sure if needed at all)
• histoire: 0.17.17
• @histoire/plugin-vue: 0.17.17
• @histoire/plugin-nuxt: 0.17.17

Code adaptions

histoire.config.ts

process.env.IS_HISTOIRE = 'true'; // we need to know if we're running histoire or not

export default defineConfig({
  //...
});

nuxt.config.ts

export default defineNuxtConfig({
  //...
  modules: [
    //...
    process.env.IS_HISTOIRE === 'true' ? false : '@nuxtjs/i18n', // only use i18n outside histoire
  ],
});

histoire.setup.ts

export const setupVue3 = defineSetupVue3(({ app }) => {
  const pinia = createPinia();
  
  app.use(pinia); // no i18n here!

  window.useI18n = () => ({ // mock the useI18n function to not run into an error
    locale: 'xx',
  });
});

Notes

• We're not using $t in our project.
  Histoire documentation suggests to use app.config.globalProperties.$t, but adding to the window object might work as well or better.
• For useNuxtApp().$i18n only solution we found was to add a check if it exists, which is sufficient for our needs for now

Edit:
In case someone else searches for it:
For @nuxt/test-utils/module (needed for vitest) we're using the same strategy to temporarily disable it inside the nuxt.config; thereby enabling the common use of vitest and histoire.

+1