localePath not generating route, it's empty

[grzegorztomasiak]

Environment

• Operating System: Windows_NT
• Node Version: v22.5.1
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.8.2
• Builder: -
• User Config: compatibilityDate, devtools, modules, i18n
• Runtime Modules: @nuxtjs/i18n@8.3.1
• Build Modules: -

Reproduction

no reproduction given.

Describe the bug

I can't find anything on the web regarding the issue I have, I followed the docs many times and still no luck.

When I use <NuxtLink :to="localePath('index', 'fr')">Homepage in FR</NuxtLink> the localePath does not generate any url, in fact it's null in the console and null and <a> tag does not contain href property.

and i18n configuration

export default defineI18nConfig(() => ({
  legacy: false,
  locales: ['en', 'fr'],
  defaultLocale: 'en',
  messages: {
    en: {
      welcome: 'Welcome'
    },
    fr: {
      welcome: 'Bienvenue'
    }
  }
}))

Anyone has idea why?

Additional context

No response

Logs

No response

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: 👉 [Reproduction starter (v8 and higher)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/v8) 👉 [Reproduction starter (edge)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/edge) A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

[BobbieGoede]

The defineI18nConfig is meant for vue-i18n specific options, have you configured locales in the i18n option in nuxt.config.ts? These will be applied to vue-i18n options as well.

[grzegorztomasiak]

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'fr'],
    vueI18n: './i18n.config.ts'
  }
})

holy cow, now it works. I will leave the locales in nuxt.config.js only. Thank you!

[BobbieGoede]

Any shared options you only need to configure in nuxt.config, these will be applied to vue-i18n as well. The vueI18n config file simply accepts all vue-i18n configurations including those we handle as well.

We're considering merging these options in the next major version so this can configured in one place if possible 😄 (difficulties are serialization of certain properties)