baseUrl
- type:
string
orfunction
- 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.
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 localeiso
(required when using SEO features) - The ISO code used for SEO features and for matching browser locales when usingdetectBrowserLanguage
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'
)
- ISO 639-1 code (e.g.
file
- the name of the file. Will be resolved relative tolangDir
path when loading locale messages from filedir
- The dir property specifies the direction of the elements and content, value could be'rtl'
,'ltr'
or'auto'
.domain
(required when usingdifferentDomains
) - 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
ornull
- 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
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
pages
- type:
object
- default:
{}
If parsePages
option is disabled, 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
orobject
ornull
- 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
orstring
- 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