tahul / nuxt-i18n Goto Github PK

i18n for your Nuxt project

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

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

• 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

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

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!

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

MIT License - Copyright (c) Nuxt Community