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 # yarnnpm 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>