i18n for your Nuxt project

Links

• 📘 Documentation
• 🔖 Release notes
• 👥 Community (#i18n channel)

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>

If you would like to find out more about how to use @nuxtjs/i18n, check out the docs!

Issues, questions & requests

If you have any questions or issues, check out the #i18n channel on Discord server.

License

MIT License - Copyright (c) Nuxt Community