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?

:scream: Looks intimidating?

:angel: 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 :bath::zzz:

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 :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>

:sparkles: Remember syntactic sugar, right?

2. Then run the translate 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

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

:trollface: 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
      },

:u6709: 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

:blue_book: For more details refer to nuxt-i18n module documentation

7. Buy me coffee with doughnut :coffee::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',
}

:lotus_position: 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.

:broom: 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 :beer::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

:nut_and_bolt::hammer: 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

Copyright (c) Sergey Demidov [email protected]