Routing

@nuxtjs/i18n overrides Nuxt default routes to add locale prefixes to every URL (except in no_prefix strategy). Say your app supports two languages: French and English as the default language, and you have the following pages in your project:

└── pages
    ├── about
    │   └── index.vue
    └── index.vue

This would result in the following routes being generated

[  {    path: "/",    name: "index___en",    ...  },  {    path: "/fr/",    name: "index___fr",    ...  },  {    path: "/about",    name: "about___en",    ...  },  {    path: "/fr/about",    name: "about___fr",    ...  }]

Note that routes for the English version do not have any prefix because it is the default language, see routing strategies next secyion for more details.

Strategies

There are 4 supported strategies that affect how app's routes are generated:

no_prefix

With this strategy, your routes won't have a locale prefix added. The locale will be detected & changed without changing the URL. This implies that you have to rely on browser & cookie detection, and implement locale switches by calling the i18n API.

prefix_except_default

Using this strategy, all of your routes will have a locale prefix added except for the default language.

prefix

With this strategy, all routes will have a locale prefix.

prefix_and_default

This strategy combines both previous strategies behaviours, meaning that you will get URLs with prefixes for every language, but URLs for the default language will also have a non-prefixed version (though the prefixed version will be preferred when detectBrowserLanguage is enabled.

Configuration

To configure the strategy, use the strategy option. Make sure that you have a defaultLocale defined, especially if using prefix_except_default, prefix_and_default or no_prefix strategy. For other strategies it's also recommended to set it as it's gonna be used as a fallback when attempting to redirect from 404 page.

export default defineNuxtConfig({  // ...  i18n: {    strategy: 'prefix_except_default',    defaultLocale: 'en'  },  // ...})