Routing

Routing and Strategies options.

baseUrl

• type: string or function
• default: ''

The fallback base URL to use as a prefix for alternate URLs in hreflang tags. By default VueRouter's base URL will be used and only if that is not available, fallback URL will be used.

Can also be a function (will be passed a Nuxt Context as a parameter) that returns a string. Useful to make base URL dynamic based on request headers.

This property can also be set using runtimeConfig.

locales

• type: array
• default: []

List of locales supported by your app. Can either be an array of codes (['en', 'fr', 'es']) or an array of objects for more complex configurations:

[
  { code: 'en', iso: 'en-US', file: 'en.js', dir: 'ltr' },
  { code: 'ar', iso: 'ar-EG', file: 'ar.js', dir: 'rtl' },
  { code: 'fr', iso: 'fr-FR', file: 'fr.js' }
]

When using an object form, the properties can be:

• code (required) - unique identifier of the locale
• iso (required when using SEO features) - A language-range used for SEO features and for matching browser locales when using detectBrowserLanguage functionality. Should use the language tag syntax as defined by the IETF's BCP47, for example:
  • 'en' (language subtag for English)
  • 'fr-CA' (language+region subtags for French as used in Canada)
  • 'zh-Hans' (language+script subtags for Chinese written with Simplified script)
• file - The name of the file. Will be resolved relative to langDir path when loading locale messages from file.
• files - The name of the file in which multiple locale messages are defined. Will be resolved relative to langDir path when loading locale messages from file.
• dir - The dir property specifies the direction of the elements and content, value could be 'rtl', 'ltr' or 'auto'.
• domain (required when using differentDomains) - the domain name you'd like to use for that locale (including the port if used). This property can also be set using runtimeConfig.
• ... - any custom property set on the object will be exposed at runtime. This can be used, for example, to define the language name for the purpose of using it in a language selector on the page.

You can access all the properties of the current locale through the localeProperties property. When using an array of codes, it will only include the code property.

defaultDirection

• type: string
• default: ltr

The app's default direction. Will only be used when dir is not specified.

defaultLocale

• type: string or null
• default: null

The app's default locale. Should match code of one of defined locales.

When using prefix_except_default strategy, URLs for locale specified here won't have a prefix. It's recommended to set this to some locale regardless of chosen strategy, as it will be used as a fallback locale when navigating to a non-existent route.

strategy

• type: string
• default: 'prefix_except_default'

Routes generation strategy. Can be set to one of the following:

• 'no_prefix': routes won't have a locale prefix
• 'prefix_except_default': locale prefix added for every locale except default
• 'prefix': locale prefix added for every locale
• 'prefix_and_default': locale prefix added for every locale and default

customRoutes

• type: string (page or config) | undefined
• default: page

Whether custom paths are extracted from page files

pages

• type: object
• default: {}

If customRoutes option is disabled with config, the module will look for custom routes in the pages option. Refer to the Routing for usage.

skipSettingLocaleOnNavigate

• type: boolean
• default: false

If true, the locale will not be set when navigating to a new locale. This is useful if you want to wait for the page transition to end before setting the locale yourself using finalizePendingLocaleChange. See more information in Wait for page transition.

defaultLocaleRouteNameSuffix

• type: string
• default: 'default'

Internal suffix added to generated route names for default locale, if strategy is prefix_and_default. You shouldn't need to change this.

routesNameSeparator

• type: string
• default: '___'

Internal separator used for generated route names for each locale. You shouldn't need to change this.

rootRedirect

• type: string or object or null
• default: null

Set to a path to which you want to redirect users accessing the root URL (/). Accepts either a string or an object with statusCode and path properties. E.g

{
  statusCode: 301,
  path: 'about-us'
}

dynamicRouteParams

• type: boolean
• default: false

Whether to localize dynamic route parameters.

If true, you can set the dynamic route parameter to nuxtI18n field of definePageMeta for each locale:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n'
  ],

  i18n: {
    // ...
    dynamicRouteParams: true,
    // ...
  },

  // ...
})

<script setup>
definePageMeta({
  // ...
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
  // ...
})
</script>

<template>
  <!-- pages/post/[id].vue -->
</template>

See more information in Dynamic route parameters