JSPM

Package Exports

nuxt-i18n
nuxt-i18n/src/helpers/utils

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nuxt-i18n) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

nuxt-i18n logo

i18n for your Nuxt project

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
Storing current locale and messages with Vuex

Setup

yarn add nuxt-i18n # yarn
npm i nuxt-i18n # npm

Basic usage

Firstly, you need to add nuxt-i18n to your Nuxt config.

// nuxt.config.js

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

Then you can start using nuxt-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 nuxt-i18n, check out the docs!

Issues, questions & requests

If you have any questions or issues, check out Discord server.

nuxt-i18n