I18n

Check the next branch for Nuxt 3 support

@nuxtjs/i18n logo

i18n for your Nuxt project

Looking for Nuxt 3 compatible version?

👷 Work-in-progress on the v8 version in the next branch
📘 Documentation

Features

Integration with vue-i18n
Automatic routes generation and custom paths
Search Engine Optimization
Lazy-loading of translation messages
Redirection based on auto-detected language
Different domain names for different languages

Setup

yarn add @nuxtjs/i18n # yarn
npm i @nuxtjs/i18n # npm

Basic usage

Firstly, you need to add @nuxtjs/i18n to your Nuxt config.

// nuxt.config.js

{
  modules: [
    [
      '@nuxtjs/i18n',
      {
        locales: ['en', 'es'],
        defaultLocale: 'en',
        vueI18n: {
          fallbackLocale: 'en',
          messages: {
            en: {
              greeting: 'Hello world!'
            },
            es: {
              greeting: '¡Hola mundo!'
            }
          }
        }
      }
    ]
  ]
}

Then you can start using @nuxtjs/i18n in your Vue components!

<template>
  <main>
    <h1>{{ $t('greeting') }}</h1>

    <nuxt-link
      v-if="$i18n.locale !== 'en'"
      :to="switchLocalePath('en')"
    >
      English
    </nuxt-link>

    <nuxt-link
      v-if="$i18n.locale !== 'es'"
      :to="switchLocalePath('es')"
    >
      Español
    </nuxt-link>
  </main>
</template>