In this course I'm going to show you how to set up your application so that you can easily translate it into different languages. We will be using Vue Internationalization and investigating its many cool features that allow us to add not just translations but also pluralization, number and date format and a lot more. But first, do you know why it's called Internationalization and written as I18N? 18 represents the 18 characters between I and N in internationalization.
And if you didn't know, same is true for accessibility A11Y. Okay, before we start working with the Vue internationalization, let's see a bit of internationalization in action by creating our own DIY internationalization. We can use a code sandbox for this example. Code sandbox is a very quick and easy way to get a Vue application up and running and is great for sharing code and building quick examples.
Let's start by creating the text we want translated. We would normally create a JSON for each language and store it in a folder called Locals. But for this example, I am just going to put the translations in the data of the component. I'm going to use English and Spanish and the words Hello and Goodbye, but feel free to use any language and text you like.
We will also need an active Local so we know which language to show, and we can set this to EN. In order for the active local to change we will need to create a button for each language which will have a click event that will update the active local value from EN to the local required every time it is clicked. And now we need to create the function that will return the translated message. We will call this localized and give it the params of key.
Remember the active local is in our data so we use this to refer to it and the value of the active local will change depending on which button we have pressed. We then parse in the key so we know which word to refer to. And finally, we need to show our DIY translated text on the page. We call the method and parse in the key we want to translate.
In our case, we want the key of hello and the key of goodbye. And as you can see, clicking the button changes the text to the right language. So creating our own DIY is very cool indeed. but it's a lot of work, especially if we have a lot of text to translate.
Luckily, there is another way, and that is with the Vue Internationalization plugin, which we will use in the next lesson. In this course I'm going to show you how to set up your application so that you can easily translate it into different languages. We will be using Vue Internationalization and investigating its many cool features that allow us to add not just translations but also pluralization, number and date format and a lot more. But first, do you know why it's called Internationalization and written as I18N?
18 represents the 18 characters between I and N in internationalization. And if you didn't know, same is true for accessibility A11Y. Okay, before we start working with the Vue internationalization, let's see a bit of internationalization in action by creating our own DIY internationalization. We can use a code sandbox for this example.
Code sandbox is a very quick and easy way to get a Vue application up and running and is great for sharing code and building quick examples. Let's start by creating the text we want translated. We would normally create a JSON for each language and store it in a folder called Locals. But for this example, I am just going to put the translations in the data of the component.
I'm going to use English and Spanish and the words Hello and Goodbye, but feel free to use any language and text you like. We will also need an active Local so we know which language to show, and we can set this to EN. In order for the active local to change we will need to create a button for each language which will have a click event that will update the active local value from EN to the local required every time it is clicked. And now we need to create the function that will return the translated message.
We will call this localized and give it the params of key. Remember the active local is in our data so we use this to refer to it and the value of the active local will change depending on which button we have pressed. We then parse in the key so we know which word to refer to. And finally, we need to show our DIY translated text on the page.
We call the method and parse in the key we want to translate. In our case, we want the key of hello and the key of goodbye. And as you can see, clicking the button changes the text to the right language. So creating our own DIY is very cool indeed.
but it's a lot of work, especially if we have a lot of text to translate. Luckily, there is another way, and that is with the Vue Internationalization plugin, which we will use in the next lesson.