![Vue i18n Tutorial Example](https://www.positronx.io/wp-content/uploads/2020/05/vue-i18n-9778-01.gif)
Adding internationalization support in the web application is helpful for the audience that visits our site from the various part of the world.
Since the people in the world use different types of languages, so, it becomes necessary for us to serve our site content in the same language they speak.
Luckily, we can take benefit of i18n support to add multiple language support in our vue application; this way, we can easily engage a large number of audience.
We will create a pretty basic MultiLingual vue app from scratch using vue cli and vue-i18n plugin. We will learn to add support for English, Belarusian, Danish and Croatian.
Vue Js 2 i18n Multi Language Web Site Example
Setup Vue App
Install Vue CLI to get started with Vue app development.
npm install -g @vue/cli
Create a new vue project and get inside the project folder:
vue create vue-i18-app && cd vue-i18-app
Next, create the eslintrc.js file at the root of your Vue project, now add the code to the file as given below.
module.exports = {
rules: {
"vue/multi-word-component-names": [
"error",
{
ignores: [],
},
]
},
};
Node.js Gatsby error – “digital envelope routines::unsupported …”
Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
To remove above error for invoking the app, make sure to update the "scripts": []
array in package.json file.
"scripts": {
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
"lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},
Add Vue-i18n Plugin in Vue
We have set up the vue project, and now we have to install the vue-i18n plugin using either of the command based on the package manger we prefer:
npm install vue-i18n@8
Vue I18n is quite popular internationalization plugin for Vue.js, and It quickly integrates localization features to your Vue.js application.
It is created by kazuya kawaguchi, and you can check the official documentation of this plugin here.
Now, we have to add the vue-i18n plugin in our vue.js app, so import the VueI18n package in in the main.js file.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
new Vue({
router,
render: h => h(App),
}).$mount('#app')
Create Multi-Language Component
Create components/MultiLingual.vue file and add the following code in it.
<template>
<div>
{{ $t('message.value', { value: 'This is an example of content translation' }) }}
</div>
</template>
<script>
export default {
name: 'MultiLingual'
}
</script>
We define the default English message value in the $t instance. We can initiate the $t
instance. This allows us to use mustash syntax {{}}
in the vue template. The $t is executed whenever re-render occurs, so it does have translation costs.
Define Translations in Vue
First, install the vue router in vue project:
npm add vue-router@^3.1.6 --legacy-peer-deps
We can easily format the strings with the help of vue-18n module with bracket syntax.
We defined the messages object with four international languages; this object translates the vue app based on selected locale.
We also have to initialize the VueI18n instance by adding the values that we defined in the messages object.
Add the following code in the main.js file.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const messages = {
en: {
message: {
value: 'This is an example of content translation.'
}
},
be: {
message: {
value: 'Гэта прыклад перакладу змесціва.'
}
},
da: {
message: {
value: 'Dette er et eksempel på oversættelse af indhold.'
}
},
hr: {
message: {
value: 'Ovo je primjer prevođenja sadržaja.'
}
}
};
const i18n = new VueI18n({
locale: 'en',
messages
});
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
i18n
}).$mount('#app')
Create Language Switcher in Vue
Create components/SwitchLanguage.vue file here we define the following code.
We have to add a language switcher, and we can add it by creating a simple select dropdown.
This switcher allows us to change the language in our vue app, and we take the help of i18n instance via $i18n.locale
.
The above code will create a dropdown with the following values, ‘en’, ‘be’, ‘da’, ‘hr’.
<template>
<div>
<select v-model="$i18n.locale">
<option
v-for="(lang, i) in langs"
:key="`lang-${i}`"
:value="lang">
{{ lang }}
</option>
</select>
</div>
</template>
<script>
export default {
name: 'SwitchLocale',
data() {
return { langs: ['en', 'be', 'da', 'hr'] }
}
}
</script>
<style>
select {
width: 150px;
line-height: 49px;
height: 38px;
font-size: 22px;
outline: 0;
margin-bottom: 15px;
}
</style>
To call the components in the home page just create the views/ folder in src/ directory, next create the views/HomeComp.vue file.
Next, add the following code in the src/views/HomeComp.vue app.
<template>
<div>
<SwitchLanguage />
<MultiLingual />
</div>
</template>
<script>
import MultiLingual from '../components/MultiLingual.vue'
import SwitchLanguage from '../components/SwitchLanguage.vue'
export default {
name: 'HomeComp',
components: {
SwitchLanguage,
MultiLingual
}
}
</script>
Run the vue app.
npm run serve
Summary
Finally, we have completed the Vue internationalization tutorial; In this tutorial, we learned how to create a multi lingual vue app with the help of the vue-i18n plugin.
You can download the full code of this tutorial from GitHub.