2.routing.md

title	description
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.

::alert{type="info"}

It's especially important to set this option when using SEO features, in which case it's required that generated SEO tags use fully-qualified URLs.

::

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) - The ISO code used for SEO features and for matching browser locales when using detectBrowserLanguage functionality. Should be in one of those formats:
  • ISO 639-1 code (e.g. 'en')
  • ISO 639-1 and ISO 3166-1 alpha-2 codes, separated by hyphen (e.g. 'en-US')
• file - the name of the file. 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)
• ... - 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.

sortRoutes

::alert{type="warning"}

// TODO: 🚧 This feature is not implemented yet.

::

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

parsePages

• type: boolean
• default: true

Whether custom paths are extracted from page files

::alert{type="warning"}

parsePages option will be deprecated in the v8 official release.

::

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.

onBeforeLanguageSwitch

• type: function
• default: (oldLocale, newLocale, isInitialSetup, context) => {}

A listener called before the app's locale is changed. Can override the locale that is about to be set.

See callbacks

onLanguageSwitched

• type: function
• default: (oldLocale, newLocale) => {}

A listener called after app's locale has changed.

See callbacks

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 or string
• 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>
definPageMeta({
  // ...
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
  // ...
})
</script>

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

If you specify a string value, you can change from nuxtI18n field name:

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

  i18n: {
    // ...
    dynamicRouteParams: 'localize',
    // ...
  },

  // ...
})

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

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

See more information in Dynamic route parameters