In this tutorial, we will be using the easy, powerful, and competent-oriented Vue I18n Internalization plugin for Vue.js.

At the end of this tutorial, you will;

• Know what internationalization is

• know how to use the internationalization plugin for vuejs

• know the importance of internationalization

Note: To follow through with this tutorial, you need to have node installed on your machine

Are you ready to create a website in different languages? Let's get right into it!

What is Internationalization?

The key word here is 'international'. Internationalization (sometimes shortened to "I18N, meaning "I - eighteen letters -N") is the practice of designing products and services that cater to an international market. This means its operations facilitate expansion into international markets.

In the context of software engineering, accessibility, and user experience comes to play when it comes to satisfying users of a product. Building for an international market is a great way to improve accessibility and user experience.

Enough talk, let's code :)

Create a Vue app

To create a Vue app, type in the following command on your terminal ( or command prompt for windows)

npm init vue@latest

Go ahead to type in your preferred project name, for the sake of this tutorial I'll name this app international-web-app, accept another prompt by navigating with the keyboard arrow keys and accepting your choice.

After doing the above, you should see some commands that tell you what to do to run your project.

cd international-web-app - changes your current directory to the project directory

npm install - installs all packages from the package.json file

npm run dev - run your project on the dev environment available on your local machine

After this, you should see a localhost location on your terminal, type it in your browser URL input box, you will see a template welcome screen.

Remove the default template code

In your App.vue file replace the code in there with the following;

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

In your HomeView.vue file replace the code in there with the following;

<script setup lang="ts">
</script>

<template>
  <main>
  </main>
</template>

With the above, you should have a blank home page.

Install Vue I18n for internationalization

On your terminal, run the following command to install VueI18n

npm install vue-i18n@9

That's it, you have VueI18n installed in your application.

Add Vue I18n to your configurations

Now that we have VueI18n installed, we need to use it. In your main.ts (or main.js if you didn't choose Typescript in your application creation process), replace the code in it with the following;

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

import App from './App.vue'
import router from './router'

import './assets/main.css'
const i18n = createI18n({
    // something vue-i18n options here ...
})

const app = createApp(App)

app.use(router)
app.use(i18n)
app.mount('#app')

Here, we are importing the createI18n module from vue-i18n to make it available for use in the application by instantiating it with const i18n = createI18n({ }) and using it app.use(i18n).

Implementing Internationalization

Let's see an example of internationalization in play.

Replace the code in your main.ts file with the following;

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createI18n } from 'vue-i18n'

import App from './App.vue'
import router from './router'

import './assets/main.css'

const messages = {
    en: {
        message: {
            hello: 'Hello, welcome to the world of internationalization'
        }
    },
    pt: {
        message: {
            hello: 'Olá, bem-vindo ao mundo da internacionalização'
        }
    },
    ja: {
        message: {
            hello: 'こんにちは、国際化の世界へようこそ'
        }
    }

}

const i18n = createI18n({
    locale: 'pt', // set locale
    fallbackLocale: 'en', // set fallback locale
    globalInjection: true,
    messages
})

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(i18n)
app.mount('#app')

In the above, we declared a messages object that contains a welcome message in three different languages (you can add more language as you may need). We went ahead to add the messages in the createI18n function.
Also, we set globalInjection to let the messages object be accessible everywhere in our application.

In your HomeView.vue, replace with the following;

<script setup lang="ts">
</script>

<template>
  <main>
    <h1>{{ $t("message.hello") }}</h1>
  </main>
</template>

$t is a Vue I18n keyword to allow Vue I18n to change the locale without rewriting the template, and also to be able to support the global application.

Now, you may be wondering how your user gets to switch the language. We will create a LanguageSwitcher component to handle this.

<script lang="ts">
  export default {
    name: "LanguageSwitcher",
    data() {
      return { locales: ["pt", "en", "ja"] };
    }
  };
</script>
<template>
    <select v-model="$i18n.locale">
      <option v-for="(locale, i) in locales" :key="`locale-${i}`" :value="locale">
        {{ locale }}
      </option>
    </select>
</template>

With the introduction of this let's introduce a Navbar component to house our LanguageSwitcher component. Create a file called Navbar.vue in your components folder and put in the following code;

<script setup lang="ts">
import LanguageSwitcher from './LanguageSwitcher.vue';
</script>

<template>
    <nav>
        <div class="logo">Internationalization</div>
        <LanguageSwitcher />
    </nav>
</template>

<style>
nav {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
}
</style>

Let's update the App.vue file to add a little style to the application.

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import NavbarVue from './components/Navbar.vue';
</script>

<template>
  <div class="app">
    <header>
      <NavbarVue />
    </header>
    <RouterView />
  </div>
</template>

<style>
.app {
  display: flex;
  flex-direction: column;
}
</style>

That is it! You now have a vue app running with vuei18n for internationalization.

Conclusion

When a business or product puts internationalization in place, it shows that they are putting their customers first and shows how important all demographic of their customers are to them.

There are tons of other features offered by VueI18n which can't be covered in this tutorial, you can check them out here.

Though VueI18n is still in the works with features being added and some errors being reported and fixed. You can follow through with their roadmap here.

If you want to retrieve the complete code and execute it, everything is available on my GitHub page.

I hope you liked this step-by-step guide! Follow me on LinkedIn to be notified when new content is available!