# 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 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 in the platform, in the Templates section of the site. We can declare it in Views —> 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 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

Catalog Widgets have by default 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 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.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;
}
Last Updated: 9/30/2022,