Internationalization

Nuxt-typo3 supports multilangugage pages. All you have to do is define what languages are available for your website and which is the default/fallback one.

edit nuxt.config.js:

{
  ...
  typo3: {
    i18n: {
      locales: ['en', 'pl', 'de'],
      defaultLocale: 'en'
    }
  }
  ...
}

Be aware

All pages with default language are handled directly by slash e.g. /home - however this page in Polish language will be available on /pl/home

i18n support for layouts

If you need to support some static labels on your frontend - we provided some simple API to get and set the current language you can use to interact with your third-party plugin for translation.

$typo3.i18n

This object provides you all needed data/methods to interact with languages. You have direct access from your components.

$typo3.i18n.locale

Display current language

$typo3.i18n.setLocale(localeCode, updateInitialData)

Switch language by localeCode

React to locale change

You can use $nuxt.$typo3.hook() to detect locale change.

app.$typo3.hook('localeChange', (newLocale, oldLocale) => {})

app.$typo3.hook('beforeLocaleChange', (newLocale, oldLocale) => {})

Third-party i18n plugin example

This example shows how to connect third-party i18n plugin to your application. For example we use standard nuxt-i18n (opens new window) plugin which use vue-i18n (opens new window).

Installation

Add nuxt-i18n to your dependencies using Yarn:

yarn add nuxt-i18n

Or NPM:

npm i nuxt-i18n

Then add the module to nuxt.config.js:

import pl from './locale/pl'
import en from './locale/en'

{
  ...
  modules: [
    ...
    'nuxt-i18n'
  ],

  i18n: {
    locales: ['en', 'de', 'pl'],
    defaultLocale: 'en',
    strategy: 'no_prefix', // because route strategy is handled on nuxt-typo3 side
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en,
        pl
      }
    }
  }
  ...
}

If using typescript or running typescript language server to check the code (for example through Vetur), add types to types array in your tsconfig.json:

{
  "compilerOptions": {
    "types": [
      "@nuxtjs/i18n"
    ]
}

Locale files

create locale/en.json

{
  "hello": "hello"
}

create locale/pl.json

{
  "hello": "cześć"
}

Integration with nuxt-typo3

Create plugins/i18n.js

export default ({ app }) => {
  app.i18n.locale = app.$typo3.i18n.locale
  
  app.$typo3.hook('localeChange', (newLocale, oldLocale) => {
    app.i18n.locale = newLocale
  })
}

Edit nuxt.config.js:

{
  ...
  plugins: [
    ['~/plugins/i18n']
  ]
  ...
}

Display translations

In your components:

{
  {
    $t('hello')
  }
}