Use @nuxtjs/i18n

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


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 install @nuxtjs/i18n@next --save-dev
yarn add --dev @nuxtjs/i18n@next
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:


Nuxt configuration:

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

Vue I18n configuration:

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


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

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.


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

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