When you start using vue-i18n, you have to make a choice whether you want to store your translations:
<i18n>
section inside your Single File Components (SCF)For simple demo components and example, it's indeed an option to use one of the first 2 options:
Code or the <i18n>
section - simply because it does not really matter. And after all, it's easier
to explain everything in a single file.
In the SFC file, your translations are exactly where the developer uses them: in the code. And this does not seem to be much of a difference compared to storing your CSS and template sections in the same .vue file:
<script>
export default {
name: 'App'
}
</script>
<template>
<p>message: {{ $t('hello') }}</p>
</template>
<style scoped>
p {
color: red;
}
<style>
<i18n>
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界!"
}
}
</i18n>
<i18n>
section?How many of your developers speak all languages you want to use in your application with perfection? Not all of them?
You'll end up giving the translation job to somebody who is most likely not a developer. This poor person has to wade through code to update the translation messages trying to avoid breaking the code...
Instead of passing a single .json file which is completely isolated from the rest of the application, you have to pass your whole source code to the translators.
Assume you are using dialogs in your application with the usual choices like "Yes", "No", "Cancel" or common texts like "Really delete {item}?" and so on. The same text strings would be part of several components, requiring a new translation for each of them - which increases the cost of translation. It also makes it hard to keep the wording in your application consistent.
If you are sharing your components and somebody wants to change the texts or add new languages, they'll have to edit the code of the component.
To add a language, you have to change the source code - which in the final consequence also requires making a new software for that component - even if nothing else is changed.
The startup time of your application is slower because all languages are compiled into your code. Adding another language increases the download size even more.
BabelEdit 3 can help you with some issues. It makes it much easier to edit the translations without the need to edit the source code directly. But it still requires you to share the code with the translators and update the component for each language change.
The better choice is to keep the translations isolated in separate files. Vue I18n also supports this in the form of JSON files.
What are the advantages?
Let's assume you have your application in English and want to translate it to French. You give your translator the en.json file and tell him to create the fr.json file based on that file. That's it. Almost every translation software supports JSON files.
Adding a new language is done by adding the JSON file and adjusting the loader code to support the new language.
Load only the languages the user of your application wants to use. You can determine this by checking the language setting of the browser - or by adding some preferences or language switch to your application.
<i18n>
sections in my file. What should I do now?No problem. You can use BabelEdit to copy your translations to JSON files.
Adjust your vue.js application to load the JSON file and get rid of the <i18n>
sections - that's all.
I've created a tutorial for this: How to convert vue-i18n from single file components to JSON.