Vue Localization with Vue I18n

Initial Setup

Vue I18n is a popular internationalization plugin for Vue, and will help integrate localization functionalities inside the app. Even though we are using Vue I18n for Vue localization in this guide, you can use any other package or to implement your own localization solution.

To begin, let’s initialize our Vue.js project.

npm init vue@latest

Prompts for a number of optional features will appear and you can fill them in like we did or for the purpose of this tutorial:

✔ Project name: … translized-with-vue
✔ Add TypeScript? … No
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes

Once done, you can install all dependencies with:

npm install

Now we just need one more and that is Vue I18n:

npm install vue-i18n@9

And that’s it. You are ready to start your project:

npm run dev

On port 3000 your should now see the following:

Cool! We now have our project ready, and we can start its integration with a localization platform, in our case, Translized.

Initialize Project on Translized

If you still don’t have account on Translized, you can go to app and Sign up in just couple of seconds.

Once you’re inside Translized, start by creating a project.

Create Project

On the app dashboard, we have the “Add new project” card.

Name your project and set the primary language.

Add terms

Once you’ve added the project, it’s time to add project terms.

There are two ways to add terms within Translized.

1. Manually (one by one)

2. Importing a file (in 12+ file formats supported by Translized)

In this tutorial, we’ll add just two terms to keep it simple, but feel free to add more terms if needed, or to import a bigger file with your translations.

To add term manually, navigate to:

Project > Terms > Add term

The first term we will add is:

• Term key (Term key is term “name”, reference to that term):

  • HOME_PAGE.HEADING

• Term context (Term context is an optional description you can add about a specific term. For example, where it will be used inside your projects, how it should be translated and more):

  • Home page main heading.

The second term will be:

• Term key:

  • HOME_PAGE.DESCRIPTION

• Term context:

  • Home page description about our application.

Add languages

Our next step is to translate the two terms we’ve just created so we can make our app multilingual.

Let’s add two new languages beside our primary one, Spanish and German (feel free to add different languages if you are more familiar with them).

To add new languages, navigate to:

Project > Languages > Add language

Select the language you want and click “add”.

Now that we have our new languages, let’s start translating.

Translate terms

Last but not least, let’s translate our terms. Inside the languages page, click on each language and add a proper language translation for each term.

Our translations look like this:

English

• HOME_PAGE.HEADING

  • Welcome to Translized

• HOME_PAGE.DESCRIPTION

  • Grasp automation and deliver faster with simple, easy to use and developer friendly localization platform.

Spanish

• HOME_PAGE.HEADING

  • Bienvenido a Translized

• HOME_PAGE.DESCRIPTION

  • Aproveche la automatización y entregue más rápido con una plataforma de localización simple, fácil de usar y amigable para el desarrollador.

German

• HOME_PAGE.HEADING

  • Willkommen bei Translized

• HOME_PAGE.DESCRIPTION

  • Erfassen Sie die Automatisierung und liefern Sie schneller mit einer einfachen, benutzerfreundlichen und entwicklerfreundlichen Lokalisierungsplattform.

That’s it. We now have our content on Translized and it’s fully ready to be shipped for English, Spanish and German audiences.

Connect Translized with Vue

We can now connect Vue.js localization with Translized. All we need is a few commands to integrate with Translized’s CLI.

If you don’t have our CLI installed yet, please refer to our CLI documentation page where you can see our step-by-step installation instructions.

Once it’s installed, go inside your terminal, in your project directory and run:

translized init

You will need to add your:

• API key (you can find it inside the API Access page from user menu)

• Project ID (you can find it inside your project settings page)

• File format. Format you are using inside your code for translation files (we are using JSON)

• Download file path. Relative path where you are keeping your localization files

• Upload file path. Path to a single file which you, as a developer are using while developing stuff (usually it is your default language)

• Language code of upload file.

If you take a look at your files now, you’ll see that .translized.yml file has been created.

And the final step:

translized download

Awesome, our language files are inside the project with all of their respective translations!

Localize Vue.js application

Now that we have Translized connected and our localization files in place, let’s add that multilingual content to our app.

Let’s start by modifying our main.js file so it looks like this:

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';
// Locales
import en from './locale/en.json';
import es from './locale/es.json';
import de from './locale/de.json';

// 1. Set locale translations object
const messages = {
  en,
  es,
  de,
};

// 2. Create i18n instance with options
const i18n = createI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en', // set fallback locale
  messages, // our translations
});

// 3. Create a vue root instance
const app = createApp(App);

// 4. Install i18n instance to make the whole app i18n-aware
app.use(i18n);

// 5. Mount
app.mount('#app');

We’ve now added the VueI18n package to our Vue app with translation files - downloaded from Translized.

Now, it’s time to change App.vue

<script setup>
  import LanguageSelect from './components/LanguageSelect.vue';
  import Heading from './components/Heading.vue';
  import Description from './components/Description.vue';
</script>

<template>
  <LanguageSelect />
  <Heading />
  <Description />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

You will probably get errors that we don’t have our components yet, so let’s create them now.

First letls create the LanguageSelect.vue component which will be responsible for changing our locale.

<template>
  <div>
    <label>Language</label>
    <select v-model="$i18n.locale">
      <option
        v-for="locale in $i18n.availableLocales"
        :key="`locale-${locale}`"
        :value="locale"
      >
        {{ locale }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'LanguageSelect',
};
</script>

<style scoped></style>

In this component we have a simple select input field where options are the messages we defined inside the main.js file for Vue I18n.

Add simple components Heading.vue and Description.vue so we can see our localization in action.

Starting with Heading.vue:

<template>
  <div>
    <h1>{{ $t('HOME_PAGE.HEADING') }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Heading',
};
</script>

<style scoped></style>

Here, we just want to make reference to our heading key, HOME_PAGE.HEADING. We will do that with Vue I18n API and $t method which is now available to us inside our components.

Let’s do the same thing for Description.vue

<template>
  <div>
    <p>{{ $t('HOME_PAGE.DESCRIPTION') }}</p>
  </div>
</template>

<script>
export default {
  name: 'Description',
};
</script>

<style scoped></style>

When that is done and everything saved, we are ready to run our dev server again

npm run dev

You can now switch between other locales and see how translations are changing.

It’s just that simple!

Full code for this tutorial is available on codesandbox

Final words

Software localization may seem complicated at first, but with proper setup and the right tools, it doesn’t have to be. With Vue I18n and software localization platforms, such as Translized, our code can be better organized and a lot more maintainable. The best thing about this is, that as developers, we don’t have to focus on textual changes but rather on the features, meaning we can ship to our users faster.