Case: I want to set the language on my web application to be the same language the user uses on his/her operating system if the language is available. If the user would like another language after the page has loaded he/she could change it in the application and it would be saved (locally) to next time.

Photo by Artem Bali from Pexels

Disclaimer:

You won’t actually need all the components I’ve added to this project. This is a tutorial aimed for setting up i18n in a project where you already are using Vuex, Vue-Router and have several pages and components.

Set up your vue project and include the following npm packages:

- Vue-router

- Vuex

- Vue-i18n

- Vue-localstorage

First we are going to set up the structure for i18n. Create a plugins and a translations folder like shown in the picture. Translations have subfolder with locales. The locales folder contains the language files. We are then going to import the i18n plugin to main.js in order to use language keys in our components.

In locales we will have two language files. “nb.js” for Norwegian and “en.js” for English. English is going to be the default and fallback language.

As for the locales they will look like this:

translations/locales

translations/index.js :

Now we’ll need to import the language files to the application in order to use the language keys.

When the i18n plugin is imported we can reference the language keys with this.$t(‘some_key’) throughout the application. Shown below I’ve used the greeting key and passing it through the prop msg to the HelloWorld component.

The next steps are to add the Vue-router and the Vuex.

We will create a router folder and the files index.js and routes.js inside of it.

Also we need to import the router in main.js.

The reason for bringing in Vuex is that we are going to make it possible to change the language if the user would like another language than the one originally set. Make a folder named store with an index.js and a subfolder named modules. Inside the modules folder we’re going to make a module named language.

We’re also going to add Vue Local Storage to language.js so the user’s language of choice would be remembered. I’m going to explain what’s going on the setLanguage action in a bit.

Add the store like we have added i18n and router in main.js.

For the final step we’re going to check the user’s operating system language and if it’s available in the application it’s going to be set. If the user decides to change the language afterwards this will override the OS language and the default language.

We fetch the OS languages by using navigator.languages. By console logging it I get this result:

navigator.languages = ["en-US", "en", "nb"]

As we can see the first language is “en-US”. Since we don’t have different language files for UK and US I’ve added functionality in setLanguage for finding the first language in navigator.languages to match the supported languages. The regex will catch that “en-US” and “en-UK” match with “en”.

We add Router.beforeEach to trigger the setting of language before the router takes the user to the desired page. We check if the user has a language stored in the store. If none of the OS languages match the supported languages the language is set to English since that’s what we have set as default.

router/index.js now looks like this:

This is the final result:

See full demo project here