# Internationalization (I18N)

Set up and add new languages to your widgets.

The Widgets in this catalog come with i18n by default in 2 languages, Spanish and English, with the feature to add the languages you need easily and quickly.

To handle internationalization in Widgets we use the Vue i18n (opens new window) package installed using the plugin vue-cli-plugin-i18n (opens new window), you can review its documentation here (opens new window). When you install the plugin, you create a folder for the languages called locales and a configuration file named i18n.js.



 

 
 
 

├── src/
│   ├── App.vue
│   ├── i18n.js
│   ├── main.js
│   ├── locales/
│   │   ├── en-US.json
│   │   └── es-CL.json

Tip

To learn more about internationalization and vue-i18n, see Internationalization with vue-i18n (opens new window) by VueSchool (opens new window)

# Configuration

In the configuration file we will get the language of the site that we have on the platform. First, the LANG constant is initialized in the i18n.js file.




 






 




import Vue from 'vue';
import VueI18n from 'vue-i18n';

const LANG = window.liquid ? window.liquid.lang : 'es-CL';

Vue.use(VueI18n);

//... more code

export default new VueI18n({
  locale: LANG,
  fallbackLocale: 'es-CL',
  messages: loadLocaleMessages(),
});

We have to create the variable liquid.lang in Modyo Platform. To create this variable, follow these steps:

  1. In your browser, log in to Modyo Platform.
  2. Expand Channels, and click Sites.
  3. Click Templates.
  4. Open the theme View in the Views -> Javascript -> theme section.
  5. Paste the following code:
window.liquid = {
 lang: '{{@site.language}}' === 'en' ? 'en-US' : 'es-CL'
};

This code assigns the language to the liquid.lang variable, depending on the value of @site.language using Liquid.

# Add a language

To add a new language to the site, we simply create a JSON file in the locales folder where its name is the code of the language to be added. For example, if we want to add Brazilian Portuguese, add PT-BR.JSON:




 


├── src/
│   ├── locales/
│   │   ├── en-US.json
│   │   ├── pt-BR.json <-- nuevo idioma
│   │   └── es-CL.json

Warning

The structure of the language file must be a json object:

# I18n and form validation

By default, the catalog widgets have a form validator called veeValidate (opens new window) and in order to locate the error messages that the validator shows us, we have to make a small modification to the i18n.js configuration file.

  1. We import error messages into the languages we need.
  2. In the LoadLocaleMessages function, we add the validator messages in the corresponding language.
  3. Return the modified messages object.
// 1
import esCL from 'vee-validate/dist/locale/es-CL.json';
import enUS from 'vee-validate/dist/locale/en-US.json';
import ptBR from 'vee-validate/dist/locale/pt-BR.json';
function loadLocaleMessages() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {...});
  // 2
  messages['es-CL'] = {
    ...messages['es-CL'],
    validations: esCL.messages,
  };
  // 2
  messages['en-US'] = {
    ...messages['en-US'],
    validations: enUS.messages,
  };
  // 3
  messages['pt-BR'] = {
    ...messages['pt-BR'],
    validations: ptBR.messages,
  };
  // 4
  return messages;
}
Last Updated: 10/11/2022,