# Internationalization (I18N)

The Widgets in this catalog come with i18n by default in 2 languages, Spanish and English, and with the ability 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 vue-cli-plugin-i18n (opens new window) plugin, you can check its documentation here (opens new window). After installation with the plugin, a folder is created for languages called locales as well as a configuration file called i18n.js.



 

 
 
 

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

Note

To know more about internationalization and vue-i18n we recommend reviewing this free course Internationalization with vue-i18n (opens new window) from VueSchool (opens new window)

# Configuration

In the configuration file we will get the language of the site we have on the platform




 






 




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 on the platform, in the Templates section of the site. We can declare it in Views —s> Custom —> Javascript —> theme

window.liquid = {
 lang: '{{@site.language}}' === 'en' ? 'en-US' : 'es-CL'
};

# 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 we want to add.




 


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

The structure of the language file is ajson object:

{
  "key1": "this is message1", // basic
  "nested": { // nested
    "message1": "this is nested message1"
  },
  "errors": [ // array
    "this is 0 error code message",
    {  // object in array
      "internal1": "this is internal 1 error message"
    },
    [  // array in array
      "this is nested array error 1"
    ]
  ]
},

# I18n and form validation

Catalog Widgets have by default a form validator called VeeValide (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 configuration file.

  1. We import error messages in the languages we need
  2. In the LoadLocaleMessages function we add validator messages in the appropriate language
  3. We return the modified messages object
// 1
import esCL from 'vee-validate/dist/locale/es.json';
import enUS from 'vee-validate/dist/locale/en.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
  return messages;
}