nuxt-i18n-easy

Automatic multilingual translator for nuxt-i18n

Introduction

The I18n is great.

But what about translating an existing project with hundreds of buttons, prompts and tips in multiple languages?

Looks intimidating?

No need to be afraid, nuxt-i18n-easy will save us.

Features

Based on nuxt-i18n lazy-load translations
Uses existing strings as object properties
Recursively scans the source code directories in the project
Finds the strings that need translation
Translates found strings using Google translate API
Checks that the found strings and properties of the i18n config match
Writes found values to i18n configuration files
Adds syntactic sugar
In general, makes life much easier

short demo

Setup

1. Add `nuxt-i18n-easy` module to your project

npm install nuxt-i18n-easy # or yarn add nuxt-i18n-easy

2. Add `nuxt-i18n` & `nuxt-i18n-easy` to the `modules` section of `nuxt.config.js`

  modules: [
    'nuxt-i18n',
    'nuxt-i18n-easy',
  ]

3. Add `i18n` & `i18nEasy` to the `root` of `nuxt.config.js`

export default {
  i18n: {
    locales: [
      {
        code: 'en',
        name: 'English',
        file: 'en.js'
      },
      {
        code: 'ru',
        name: 'Русский',
        file: 'ru.js'
      }
    ],
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en'
  },
  i18nEasy: {
    directories: [                         // default directories for search
      './layouts',
      './pages',
      './components'
    ],
    files: ['*.vue', '*.js'],              // default files
    sourceLanguage: 'en',                  // default source language
  },
...

4. Create a directory `i18n.langDir` and configuration files

mkdir lang
touch lang/en.js
touch lang/ru.js

5. Buy me a coffee

Usage

1. Strings to be translated may be designated as follows:

classic:

$t('Welcome')

with String.prototype extension:

'Inspire'.tr()

or with directive v-rt

<p v-tr> I will be translated </p>

Remember syntactic sugar, right?

2. Then run the `translate` script

```shell script
npx translate # or yarn run translate

By default script will process all `i18n.locales` defined in` nuxt.config.js`
To select a specific locale, send its code as the first parameter
```shell script
npx translate ru # or yarn run translate ru

3. As a result, we will get ready-to-use localization files in the `i18n.langDir` directory

cat lang/ru.js
export default {
  Welcome: 'Добро пожаловать'
  Inspire: 'Вдохновлять',
  'I will be translated': 'Я буду переведен',
}

Something needs to be fixed here, but in general this is what we need to start

Give it to content managers, and go to rest

4. If for some reason the `code` parameter is not suitable for specifying the target language, use `translationCode` instead

  i18n: {
    locales: [
      {
        code: 'ua',
        name: 'Українська',
        file: 'ua.js',
        translationCode: uk
      },

A complete list of supported codes is here

5. Build you project

npm run dev # or yarn run dev

6. Launch your favorite browser, follow the link given by NUXT + one of specified `locale.code`. For example

http://localhost:3000/ru

For more details refer to nuxt-i18n module documentation

7. Buy me coffee with doughnut

Q&A

Q. And what we see in the original localization file?

cat lang/en.js
export default {
  Welcome: 'Welcome'
  Inspire: 'Inspire',
  'I will be translated': 'I will be translated',
}

Looks like some kind of Bhagavad Gita… I am that I am… Hoommm… Stop! We need to go on

A. It should be so. This is because we are not using slug variables.

Q. What about the inevitable changes in the source files?

sed -i 's/I will be translated/I will be translated again/' pages/index.vue
npx translate
cat lang/en.js
export default {
  Welcome: 'Welcome',
  Inspire: 'Inspire',
  'I will be translated': 'I will be translated', // unused
  'I will be translated again': 'I will be translated again'
}

A. As we can see, the key-value pair is in the same place, just marked as unused in the comment

Q. What about data loss in the event of a terrible crash?

ls lang/
en.js  en.js.2020-09-10-15-49  ru.js  ru.js.2020-09-10-15-49

A. Dont worry, everything is as it should be here too. Before changing the configuration files, a backup is made.

Dont forget to clean there at least sometimes

Q. Why are you drinking so much coffee?

A. I drink not only coffee. Also, you can buy me a beer

Google Translation API

By default, the app uses Google translation API V1.
It’s free, but undocumented and has traffic restrictions.
To switch to the official V2 version of the API,
you need to specify your project identifier googleProjectId in i18nEasy section

Development

Setup this repository

git clone https://github.com/sergey-demidov/nuxt-i18n-easy.git
cd nuxt-i18n-easy
npm install # or yarn

Link it to your amazing nuxt project

npm link
cd ../amazing-nuxt-project
npm link nuxt-i18n-easy

Enjoy

Known Issues

The v-tr directive does not support nested tags
Google translate API v1 has a limit on the number of requests.

If you see something like this

 ERROR Request failed with status code 429

just try again later

If you really read up to here

There, under the hood is one more feature. You may use String.lp() as shortcut to nuxt-i18n‘s localePath()

For example

<nuxt-link :to="'/app/profile'.lp()">Profile</nuxt-link>
// equal to
<nuxt-link :to="localePath('/app/profile')">Profile</nuxt-link>

License

MIT License