Skip to content

Localization

The application uses the vue-i18n library to manage localization. Although the default and currently only available language is English, the setup allows for easy addition of other languages in the future.

Overview

Localization in this application is handled through the i18n instance, which is configured in the src/lang/index.js file. The language preference is determined by the user's browser settings or a cookie, with English (en) set as the default language.

How It Works

  1. Language Files:

    • The translations for each language are stored in separate files (en.js, es.js, etc.) under the src/lang directory.
    • Currently, only the en.js file is populated with English translations.

  2. Language Detection:

    • The application checks for a lang cookie to determine the user's preferred language.
    • If no cookie is found, it defaults to English (en).

  3. Dynamic Language Switching:

    • Although the application is currently limited to English, the i18n setup supports dynamic language switching by updating the locale property.

  4. Integration with Components:

    • The $t function is used in Vue components to fetch localized strings. For example: 
      <span>{{ $t('menu.configuration') }}</span>

Configuration

The i18n instance is configured in the src/lang/index.js file. Below is an overview of its setup:

import { createI18n } from 'vue-i18n';
import Cookies from 'js-cookie';
import enLocale from './en';

const messages = {
  en: {
    ...enLocale
  }
};

const i18n = createI18n({
  locale: Cookies.get('lang') || 'en', // Default to English
  messages
});

export default i18n;

Adding a New Language

To add a new language, follow these steps:

  1. Create a Language File:

    • Add a new file (e.g., es.js for Spanish) in the src/lang directory.
    • Populate it with translations in the desired language.

  2. Update the messages Object:

    • Import the new language file in src/lang/index.js.
    • Add it to the messages object: 
      import esLocale from './es';

const messages = {
en: { ...enLocale },
es: { ...esLocale }
};

  3. Set the Language:

    • Update the lang cookie or set the locale property of the i18n instance to the new language code.

Example Usage

Here is an example of how localization is used in a Vue component:

<template>
  <div>
    <h1>{{ $t('menu.configuration') }}</h1>
    <p>{{ $t('words.welcome') }}</p>
  </div>
</template>

In the en.js file, the translations might look like this:

export default {
  menu: {
    configuration: 'Configuration'
  },
  words: {
    welcome: 'Welcome'
  }
};

Notes

  • The current setup defaults to English but can be changed in the header but now only displays EN language.
  • Adding support for additional languages requires creating translation files and updating the messages object in src/lang/index.js.

References