Issues when upgrading i18n Nuxt Module to 9.0

I recently made a big change. I updated all the public-facing websites to use two new technologies instead of Vanilla VueJS.

• Nuxt
• Docusaurus

The main reason for this is to improve our SEO. Vanilla VueJS doesn’t play well with SEO and requires a lot of effort to maintain SEO-related content.

Yesterday, during a routine update to the latest packages, we noticed that the i18n Nuxt module had been upgraded to version 9.0. This caused some of our multi-language modules to fail.

After reviewing the documentation https://i18n.nuxtjs.org/docs/guide/migrating, we realized that we need to do a few things. I’ve listed them below in case you encounter similar issues when upgrading Nuxt i18n from version 8.x to 9.0.

• To update the function, replace the ‘$’ symbol with a ‘.’. For instance, use $localePath instead of localePath().
• When using the locales property from the useI18n hook, you no longer need to specify the value. For instance,

const { locale, locales, t } = useI18n({
  useScope: 'local'
})

const availableLocales = computed(() => {
  return locales.filter(i => i.code !== locale.value)
})

Instead of

const { locale, locales, t } = useI18n({
  useScope: 'local'
})

const availableLocales = computed(() => {
  return locales.value.filter(i => i.code !== locale.value)
})

Well, at least these changes get the websites back up and running, and they can now switch languages too!