Follow this guide to upgrade from one major version to the other.
The key of route set in the pages
option has been changed to be file-based relative to the pages/
directory in Nuxt, and excluding the leading /
.
The reason is that it is more intuitive to match Nuxt file-based routing.
Nuxt2:
pages/
├── about.vue
├── users/
├──── _id/
├────── profile.vue
├── index.vue
i18n: {
parsePages: false,
pages: {
about: {
fr: '/a-propos',
},
'users/_id/profile': {
fr: '/u/:id/profil',
}
}
}
Nuxt3:
pages/
├── about.vue
├── users/
├──── [id]/
├────── profile.vue
├── index.vue
i18n: {
customRoutes: 'config',
pages: {
about: {
fr: '/a-propos',
},
'users/[id]/profile': {
fr: '/u/[id]/profil',
}
}
}
Use localeRoute
instead for Options API style. The reason for deprecation is due to I/F changes around route resolving in Vue Router.
The Reason is same localeLocation()
Option API.
Use localeHead()
instead for Options API style.
Use defineI18nRoute()
compiler macro. because it can be optimized with bundler.
Nuxt2:
<script>
import Vue from 'vue'
export default Vue.extend({
nuxtI18n: {
paths: {
pl: '/polish'
}
}
})
</script>
Nuxt3:
<script setup>
defineI18nRoute({
paths: {
pl: '/polish'
}
})
</script>
Use customRoutes
option. because the option name parsePages
is not intuitive.
export default defineNuxtConfig({
modules: [
'@nuxtjs/i18n'
],
i18n: {
// ...
- parsePages: false,
+ customRoutes: 'config',
// ...
}
})
Use dynamicRouteParams
option. because, vuex no longer requires in Nuxt3.
export default defineNuxtConfig({
modules: [
'@nuxtjs/i18n'
],
i18n: {
// ...
- vuex: true,
+ dynamicRouteParams: true,
// ...
}
})
About details, See also Lang Switcher.
This option is no longer necessary, because i18n custom block is supported by unplugin-vue-i18n as default.
These functions can now be triggered using Nuxt runtime hooks. Please refer to runtime hooks to see how to use these.
The following API will be changed to $
:
i18n
->$i18n
getRouteBaseName()
->$getRouteBaseName()
localePath()
->$localePath()
localeRoute()
->$localeRoute()
switchLocalePath()
->$switchLocalePath()
Vuex extension APIs were removed, because Vuex no longer requires in Nuxt3.
The following APIs are no longer available:
$i18n
getRouteBaseName()
localePath()
localeRoute()
localeLocation()
switchLocalePath()