Breaking Changes in v9

Upgrade to Vue I18n v10

Vue I18n has been upgraded from v9 to v10. Vue I18n v10 has no major feature additions, but there are some disruptive changes, such as dropping some features that were deprecated in v9 and integrating the API $tc into $t, which can be used in the Legacy API style

Check the documentation here for more information.

Drop jit option

JIT compilation is now the default in Vue I18n v10.

https://vue-i18n.intlify.dev/guide/migration/breaking10.html#default-enable-for-jit-compilation

Accordingly, the jit option in Nuxt I18n v8 is no longer needed, so this option has been removed.

Directory restructure and langDir default value

We now use a default directory structure that is consistent with directory structure changes in Nuxt 4.

What changed

• langDir now defaults to locales.
• All i18n files are resolved relative to <rootDir>/i18n, this can be configured with the restructureDir option.

Here is an example of a project structure after this change:

app/
server/
i18n/
  locales/
    en.json
    ja.json
  i18n.config.ts
  localeDetector.ts
nuxt.config.ts

Reasons for change

1. Context - i18n files are used both server-side and client-side, using a dedicated i18n/ folder in the root directory outside app/ and server/ makes more sense.
2. Clean - less clutter/fragmentation of i18n files, and should make resolving and loading files easier for us.

Locale iso renamed to language

The iso property on a locale object has been renamed to language to be consistent with the usage of Language Tags on the web (e.g. navigator.language and Accept-Language). The original iso property name referred to ISO standards which describe valid Language Tags, see the related issue for more details.

Runtime config properties

Some properties have changed or swapped names to better fit their functionality, the runtime config properties configured by this module are mostly used for internal purposes and should not be relied upon but it's worth noting these changes.

SEO - useLocaleHead

The options parameter for useLocaleHead and $localeHead as changed in shape, having less verbose property names, as well as enabling the options by default.

This table compares the option properties of useLocaleHead and `$localeHead for v8 and v9:

We have added a lang property to the options parameter of useLocaleHead and $localeHead, originally this was not configurable on its own, see useLocaleHead for details on its usage.

Nuxt context functions

In v8 both the types and name of the injected context functions (such as $localePath, $switchLocalePath and more) did not work as intended. You may have found that these functions worked when using them without prefix ($) even when not assigning these functions from a composable.

The types and names have been fixed in v9, if you have been using the unprefixed functions globally (without composable) in your project you will have to prefix these functions as they were originally intended.

• getRouteBaseName -> $getRouteBaseName
• resolveRoute -> $resolveRoute
• localePath -> $localePath
• localeRoute -> $localeRoute
• localeLocation -> $localeLocation
• switchLocalePath -> $switchLocalePath
• localeHead -> $localeHead

Removal of deprecated dynamicRouteParams option and legacy dynamic route parameters implementation

Setting dynamic route parameters by setting the nuxtI18n property with definePageMeta has been fully removed in favor of the useSetI18nParams composable, this feature is enabled by default which means the dynamicRouteParams option is no longer necessary.

The composable usage is similar to that of the deprecated implementation, see the migration example below:

<script>
definePageMeta({
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
})
</script>
<template>
  <!-- pages/post/[id].vue -->
</template>

Should be changed to:

<script>
const setI18nParams = useSetI18nParams();
setI18nParams({
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
})
</script>
<template>
  <!-- pages/post/[id].vue -->
</template>

Check out the Lang Switcher guide for more details.