Skip to content

zsavajji/i18n-module

 
 

Repository files navigation

Check the next branch for Nuxt 3 support


@nuxtjs/i18n logo

i18n for your Nuxt project

Looking for Nuxt 3 compatible version?

Links

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

Packages

No packages published

Languages

  • JavaScript 94.4%
  • Vue 4.8%
  • TypeScript 0.8%