Use @nuxtjs/i18n

To integrate nuxt-typo3 with @nuxtjs/i18n, follow these steps.

Installation

Check the Nuxt documentation for more information on how to install and use modules in Nuxt.
The Nuxt i18n module uses Vue I18n v9. Please see the Vue i18n docs for information on how to use it.

Add the @nuxtjs/i18n dependency to your project:

NPM
npm install @nuxtjs/i18n@next --save-dev
Yarn
yarn add --dev @nuxtjs/i18n@next
pnpm
pnpm add @nuxtjs/i18n@next --save-dev

Next, add @nuxtjs/i18n to the modules section in your nuxt.config. You can specify the module options in one of the following ways:

Configuration

Nuxt configuration:

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    detectBrowserLanguage: false,
    locales: ['en', 'pl'],
    defaultLocale: 'en',
    vueI18n: './i18n.config.ts'
  }
})

Vue I18n configuration:

i18n.config.ts
export default defineI18nConfig(() => ({
  legacy: false,
  locale: "en",
  messages: {
    en: {
      welcome: "Welcome",
    },
    pl: {
      welcome: "Witamy",
    }
  }
}))

Integration

@nuxtjs/i18n needs to listen for nuxt-typo3 language changes, so we created the i18n.ts plugin.

plugins/i18n.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  const { $i18n } = useNuxtApp()  
  const { currentLocale } = useT3i18n()

  await $i18n.setLocale(currentLocale.value);

  nuxtApp.hook('t3:i18n', async (newLocale) => {    
    await $i18n.setLocale(newLocale)
  })
})

Here's what we do:

  1. Get the initial language from nuxt-typo3.
  2. Set the initial language for nuxtjs/i18n.
  3. Listen for every language change of nuxt-typo3 using hooks.
  4. Set up a new locale for nuxtjs/i18n.
Note that we don't use detectBrowserLanguage to avoid any misleading behavior with the implementation above. If you wish to use this feature, you'll need to adapt the plugin implementation.

Usage

After these steps, you can use your labels in your application:

<template>
  <p>{{ $t('welcome') }}</p>
</template>