nuxt-i18n

i18n for your Nuxt project

Links

• Documentation
• Release notes
• Community

Features

• Integration with vue-i18n
• Automatic routes generation and custom paths
• Search Engine Optimization
• Lazy-loading of translations 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!

Contributing

All contributions are welcome! If you would like to make some changes, follow these steps:

• Fork the project and clone it in your existing Nuxt project:

cd my-nuxt-project
mkdir modules
git clone [email protected]:<username>/nuxt-i18n.git modules/nuxt-i18n # ssh
git clone https://github.com/<username>/nuxt-i18n.git modules/nuxt-i18n # https

• Edit your Nuxt config to use the local module:

// nuxt.config.js

{
  modules: [
    ['./modules/nuxt-i18n', {
      // options...
    }]
  ]
}

• Install the module's dependencies:

cd modules/nuxt-i18n/
yarn # yarn
npm i # npm

• Create a new branch for your changes:

git checkout -b my-new-feature

• Code, code, code!
• Run ESLint and Jest

yarn lint && yarn test # yarn
npm run lint && npm test # npm

• Commit and push your changes
• Submit awesome PRs

Documentation

• Fork and clone the project:

git clone [email protected]:<username>/nuxt-i18n.git # ssh
git clone https://github.com/<username>/nuxt-i18n.git # https

• Install the dependencies:

cd nuxt-i18n
yarn # yarn
npm i # npm

• Create a new branch for your changes:

git checkout -b my-new-feature

• Start the docs server:

yarn docs:dev # yarn
npm run docs:dev # npm

• Write some doc by editing files in docs/ directory

If you're adding new pages, make sure you add them to the table of contents in docs/.vuepress/config

• Commit and push your changes
• Once you're done, submit that shiny PR!

Issues, questions & requests

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

License

MIT License - Copyright (c) Nuxt Community