In this section, we'll learn how to install and use Language.

Installation

Once you've followed the process of Granting access to the dependencies you're able to install the Language by running the npm command:

IMPORTANT! Latest stable version: 1.1.3

npm i @masiv/addon-language

# or upgrade to the latest version

npm update @masiv/addon-language

After that, we'll need to define our dictionary structure creating a language folder in your project src folder.

|-src
	|-language

ℹ️ Please refer to Using Language to learn how to define and use language keys.

1️⃣ Inside the language folder, create 3 subfolders to store each language data.

|-src
	|-language
		|-en
		|-es
		|-pt
		|-index.js

2️⃣ **Also create an index.js file to import the language files:

import es from './es';
import en from './en';
import pt from './pt';

export default { es, en, pt };

Now, go ahead import, and install the library in the main.js file of your project /src folder as follows:

import MasivLang, { MasivLangHelpers } from '@masiv/addon-language';
import lang from './language';

Vue.use(MasivLang,
	{
		language: lang,
		scope: 'appName',
	});

In the Vue instance, go ahead and add the i18n property for us to be able to automatically generate the Language.

// in SPA
const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    **i18n: global.i18n**,
    render(h) {
      ...
    },
    router,
    store,
  },
});

// or Vue App
new Vue({
  **i18n: global.i18n**,
  store,
  render: (h) => h(App),
}).$mount('#app');

Using Language

In the en, es, **and pt files you'll need to define your app dictionary, composed by a lang key and its meaning as in the following example:

// en.js
export default {
	breadcrumb: {
		campaign: 'Campaigns'
	}
  geoInfo: 'Geographic information',
  attachments: 'Attached files',
  conversationsStarted: 'Total conversations started',
};

In order to use those lang keys you'll just need to add in the following where you need the word:

<p>{{ $t('<scope>.<key1>.<message_key>') }}</p>

<!-- Example -->
<p>{{ $t('appName.geoInfo') }}</p>

<!-- Will print when user language is English -->
Geographic information

Coding standards and best practices

This section states the best practices for using the Language within your application.

JSON structure