Automatic multilingual translator for nuxt-i18n
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.
- 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 🛀💤
npm install nuxt-i18n-easy # or yarn add nuxt-i18n-easy
modules: [
'nuxt-i18n',
'nuxt-i18n-easy',
]
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
},
...
mkdir lang
touch lang/en.js
touch lang/ru.js
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?
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
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
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
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
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'
}
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
A. I drink not only coffee. Also, you can buy me a beer 🍺🍺
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
- Setup this repository
git clone https://github.com/sergey-demidov/nuxt-i18n-easy.git
cd nuxt-i18n-easy
npm install # or yarn
npm link
cd ../amazing-nuxt-project
npm link nuxt-i18n-easy
🔩🔨 Enjoy
- 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
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>
Copyright (c) Sergey Demidov sergey.k.demidov@gmail.com