In this short post we will look into adding Internationalization to a Vue.js project. This will allow us to support multiple languages for all our text elements

to start we will create a simple Vue project using the Vue cli as follows

we can test the application by going to the directory created and starting the project

Now lets add internationalization to this project

vue-i18n Plugin

We will be using the vue-i18n plugin to support language translations

to install the plugin via npm run the following command line

next we will create a folder called ‘plugins’ under the ‘src’ folder and create a new file called i18n.js with the following content

we need to create the folder and file for our constants. Lets create a folder called constants and a file called translations.js

in addition we create a folder called ‘lang’ to keep our translation data

in the lang folder create a file called en.json as follows

 

then create two more files just like it called es.json and de.json

now lets tell Vue to use the plugin. Add the following line to your main.js file

and then add it to your Vue instance

running the project should again produce the same sample program without any errors

Now lets add some translations

edit the helloworld.vue file and change the content of the H1 tag to

running the app now will show the text helloMessage but will also show the following warnings in the console

now lets provide a translation in the main language which is english in our file en.json

after saving the title of our app should instantly change to the text provided in the translation and the warnings will go away as well.

to test our translations we will need to add a feature to switch languages. Lets add the following 3 buttons to our helloWorld.vue component

we need to import the plugin

and then add the following methods

now if we run the app it will show the 3 buttons at the top. When clicking one of the other languages we get the following warnings and the text will not change

of course we didnt supply any translation for our message. Lets modify the es.json and de.json files as follows

these are automated translations but for our test this will be good enough

Now lets run the app again and test the different languages

we can make the language switching even nicer. There is a vue package with flag icons called vue-flag-icon that contains all flags in an SVG collection.

we can install that package using the following command line

Once installed we have to important and use them

lets add a constant for our supported languages to translations.js in our constants folder

in the helloworld component we import the constants

then then add a data element for them

this will give us an array of supported languages that we can use to create our buttons

lets remove the 3 buttons we created earlier and add the following

then remove the 3 methods and add the following

and to make the buttons look nicer lets add the following style

Now when running the app we should get 3 buttons with flags and the name of the language

Michael Salzlechner is the CEO of StarZen Technologies, Inc.

He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies. StarZen Technologies provides consulting services as well as custom Application development and third party products