Create Small Vue 2 Multi-Lingual App using Vue i18n

Vue JS internationalization and localization tutorial; throughout this extensive guide, you will ascertain how to create a multilingual Vue js application using the profound and vue-i18n library from the absolute beginning.

Nowadays, when it comes to the internet, the world doesn’t have boundaries. Anyone from anywhere can access your site; sometimes, you might lose site visitors due to the language; this needless issue can be solved by localizing your app.

This vue js internationalization tutorial will explain how to add internationalization in the vue app; we will create an elementary multilingual app where users can switch the site language using a language switcher.

How to Translate Vue JS App using i18n

  • Step 1: Set Up Vue CLI
  • Step 2: Create Vue Project
  • Step 3: Install Vue-i18n in Vue
  • Step 4: Register i18n Package in Vue
  • Step 5: Create Vue Component
  • Step 6: Add Translations in Vue
  • Step 7: Implement Internationalization in Vue
  • Step 8: Change Language Dynamically
  • Step 9: Run Vue Application

Set Up Vue CLI

Ensure that you have configured the VUE CLI on your development system.

npm install -g @vue/cli

Create Vue Project

Next, open the command prompt, type; after that, execute the command to install a new vue app.

vue create vue-cosmic-app

Plus, get inside the project’r root using provided commands.

cd vue-cosmic-app

Vue Gatsby Error

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"
},

Fix Multi Word Error

In order to fix multi-word error, insert the given code in vue.config.js file.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

Install Vue-i18n in Vue

To translate your vue app, make sure to add the Vue-i18n package into the Vue app.

npm install vue-i18n

Register i18n Package in Vue

Furthermore, you must add the vue i18n package into the src/main.js file to make the i18n plugin globally available.

import Vue from 'vue'
import App from './App.vue'

// multi-lingual package
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

new Vue({
  render: h => h(App),
}).$mount('#app')

Create Vue Component

Further, create two files in the components folder, LanguageSwitcher.vue and Locale.vue, after that insert code in bot the files.

Update code in components/LanguageSwitcher.vue file.

<template>

</template>

<script>
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

Add code in components/Locale.vue file.

<template>

</template>

<script>
    export default {
        data() {
            return {
                
            }
        }
    }
</script>

Next, newly created components needs to be injected in main src/App.vue file.

<template>
  <div>
    <LanguageSwitcher />
    <Locale />
  </div>
</template>

<script>
import Locale from './components/Locale.vue';
import LanguageSwitcher from './components/LanguageSwitcher.vue';

export default {
  name: 'App',
  components: {
    Locale,
    LanguageSwitcher
  }
}
</script>

Add Translations in Vue

Next, create a locales array; in this array, define all the translated text. These languages will change as the user change the languages with the help of the language switcher.

Update code in src/main.js file.

import Vue from 'vue'
import App from './App.vue'

// multi-lingual pacakge
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

const messages = {
  en: {
    message: {
      value: 'Before you criticize someone, you should walk a mile in their shoes.'
    }
  },
  ar: {
    message: {
      value: 'قبل أن تنتقد شخصًا ما ، يجب أن تمشي ميلًا في مكانه.'
    }
  },
  hu: {
    message: {
      value: 'Mielőtt kritizálna valakit, érdemes egy mérföldet sétálnia a cipőben.'
    }
  },
  it: {
    message: {
      value: 'Prima di criticare qualcuno, dovresti metterti nei suoi panni.'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en',
  messages
});

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

Implement Internationalization in Vue

Step into the components/Locale.vue file, we can set the content that needs to be switched to another language when the user changes the language.

<template>
    <div>
        {{ $t('message.value', { value: 'Before you criticize someone, you should walk a mile in their shoes.' }) }}
    </div>
</template>

<script>
    export default {
      name: 'Locale'
    }
</script>

Change Languages Dynamically

In the last segment, we need to create a language switcher it will allow users to select the language from the select box options list and with languages dynamically.

Update code in components/LanguageSwitcher.vue file.

<template>
  <div>
    <select v-model="$i18n.locale">
      <option
        v-for="(language, index) in langsCollection"
        :key="`lang-${index}`"
        :value="language">
          {{ language }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'LanguageSwitcher',
  data() {
    return { 
        langsCollection: [
            'en', 
            'ar', 
            'hu', 
            'it'
           ] 
        }
  }
}
</script>

<style>
    select {
        width: 250px;
        line-height: 55px;
        height: 42px;
        font-size: 25px;
        margin: 20px 0;
        outline: 0;
    }
</style>

Run Vue Application

The last section of this guide tells you to start the vue app using the following command, then execute the url to view the app.

npm run serve
http://localhost:8080

Translate Vue App

Conclusion

With higher fidelity, we tried to persuade you how to add i18n in your vue app and manage translations of a Vue.js app, and we gave you a brief idea about localization in Vue js using the vue-i18n plugin. That’s it; this vue i18n example is over, have a good day.