Unlock the Power of Localization in Your Vue.js App

Getting Started with Vue I18n

To begin, let’s create a new Vue application using the CLI, selecting vue-router and vuex as our dependencies. Next, we’ll install the vue-i18n package, which will automatically set up our project for localization.

vue create my-app
cd my-app
vue add vue-router
vue add vuex
vue add vue-i18n

Directory Structure and Translation Files

Our project will have a dedicated locales folder, containing separate JSON files for each language we want to support. We’ll create a default language file, en.json, and a French translation file, fr.json. This structure allows us to easily manage and update our translations.

// locales/en.json
{
  "hello": "Hello",
  "welcome": "Welcome to our app"
}

// locales/fr.json
{
  "hello": "Bonjour",
  "welcome": "Bienvenue sur notre application"
}

Using Translations in Components

To use our translations in a component, we’ll import the necessary files and update our code to reflect the changes. We’ll also move our i18n.js file to the plugins directory for better organization.

// plugins/i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: require('@/locales/en.json'),
    fr: require('@/locales/fr.json')
  }
});

export default i18n;

The Power of Browser Language Detection

Imagine being able to automatically detect a user’s browser language and adjust your application’s language accordingly. We can achieve this by using the navigator.language property and updating our i18n.js file to accommodate region-specific modifications.

// plugins/i18n.js
const language = navigator.language || navigator.userLanguage;
i18n.locale = language.substring(0, 2);

Persisting Language Preferences

But what happens when a user closes their browser or refreshes the page? We need to store their language preference and retrieve it when they return. We’ll use Vuex and the vuex-persistedstate plugin to achieve this.

// store/index.js
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    language: 'en'
  },
  mutations: {
    setLanguage(state, language) {
      state.language = language;
    }
  },
  plugins: [createPersistedState()]
});

Date and Time Localization

Different regions have unique date and time formats, as well as language-specific names for days and months. We’ll pass the dateTimeFormats parameter when initializing vue-i18n to accommodate these variations.

// plugins/i18n.js
const i18n = new VueI18n({
  //...
  dateTimeFormats: {
    en: {
      short: {
        year: 'numeric',
        month: 'hort',
        day: 'numeric'
      }
    },
    fr: {
      short: {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      }
    }
  }
});

Reusing Translations and Organizing JSON Files

As our application grows, so do our localization files. To maintain readability, we’ll nest translations based on categories or components, and reuse common words and phrases using links.

// locales/en.json
{
  "common": {
    "hello": "Hello",
    "welcome": "Welcome to our app"
  },
  "home": {
    "title": "Home Page"
  }
}

// locales/fr.json
{
  "common": {
    "hello": "Bonjour",
    "welcome": "Bienvenue sur notre application"
  },
  "home": {
    "title": "Page d'accueil"
  }
}

Integrating with Vue-Router

We’ll update our router to reflect the user’s chosen language in the URL, allowing them to easily share links and access specific language versions of our application.

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/:lang',
      component: () => import('@/views/Home.vue'),
      props: route => ({ lang: route.params.lang })
    }
  ]
});

export default router;