There are a few ways of installing the Vue Internationalization plugin, including installing with npm and yarn or using a direct download from the CDN. If you are installing with npm or yarn, you will need to not only install it, but also add the plugin to your main JS file. However, in this course, I will show you how to install using the Vue UI. If you are not familiar with this tool, it has a great graphical user interface and is a great way of getting started with Vue and specifically translations.
Once you have the Vue CLI installed, then any time you want to launch the UI, you just type Vue UI. This will launch the GUI in your browser. If you already have a project created, even if it was created without the GUI, you can still import it and work on it in the GUI. Just find where your project is and click the Import button.
If you don't already have a project, you can create one by clicking the Create button. As we don't need a router for this project, we will choose the manual option and select ESLint and Prettier with the feature of run the linter on save and lint and fix on comment. We can save this preset in case we want to use it again in the future but for now we can just continue without saving. It will take a few seconds to install all the dependencies needed for your project and once it does you will be taken to the project dashboard.
We can go to the tasks option from the menu and server project so we can see what we have created and to make sure it works as it should. We can now add our plugin from the Plugins tab, just search for View I18N and click on the Install button. We can now choose from a list of presets, which makes setting up a project easier. The local we want is EN for English, and we can also leave the fallback local of EN2.
The directory is where we will store our translations, so let's leave that as Locals, but feel free to change it if you like. We then have an option to enable local messages in single file components. Let's select this too, so that we can investigate how it works. Once it has finished installing, you can commit your changes.
However, you can skip this if you prefer. You will now see in the menu on the left, a new option called localizations. And if you click on it, you will see we have a path of messages and a message of hello I18N. Let's take a look at where this is coming from.
We can click on the Home tab and choose the Open in Editor button and it will open up our code base. env file which has the locale and the fallback locale set to EN. json with our key of message and the value of hello I18N. js file which imports the plugin and exports the locale and fallback locale from the env file.
Or if this is not set, it uses EN and the messages are set to the function loadLocaleMessages, which basically just requires all the JSON files from the locales directory and returns the messages for each locale. You will also see in the components folder, we now have a new component called hello i18n. In the template tag, we have a P with $t and hello inside the brackets. And we have an i18n tag with the lang en and the key of hello.
But what is $t? Although $t might look strange, it is actually a valid function coming from the i18n library. We're not doing anything fancy here, we're just printing the result of the $t function to our paragraph tag. view.
We can remove the hello world component, and import the Hello I18n component instead. We can now go back to our GUI and launch our app in the browser. To do this, we need to go to the Tasks option and click on Open App. This will launch the app in our browser and you will see we now have the Vue logo and the word Hello.
But that isn't really what we wanted. If we look at our file Hello is the key and the value is Hello I18n in SFC, this happens because we have just added a new plugin but we have not relaunched our application. to show the new changes. So to fix this, we just need to stop our task and then run our task again.
And now if we refresh the page, we will see our message, hello i18n in SFC. You may have noticed that we are getting the value from our single file component, but not from our locales folder. json, the key is message. So we need to add that to our component.
We can copy the hello translation and rename hello to message. In Vue, the template route requires exactly one element, and we now have two, so we need to wrap them in a div. Now if we check our app in our browser, you will see both hello messages. Just refresh the page if you don't see the messages straight away.
We now have a hello message from our single file component, and a hello message from our JSON file inside our locals folder. Pretty cool, right? In the next lesson, we will look into how to translate these into other languages. There are a few ways of installing the Vue Internationalization plugin, including installing with npm and yarn or using a direct download from the CDN.
If you are installing with npm or yarn, you will need to not only install it, but also add the plugin to your main JS file. However, in this course, I will show you how to install using the Vue UI. If you are not familiar with this tool, it has a great graphical user interface and is a great way of getting started with Vue and specifically translations. Once you have the Vue CLI installed, then any time you want to launch the UI, you just type Vue UI.
This will launch the GUI in your browser. If you already have a project created, even if it was created without the GUI, you can still import it and work on it in the GUI. Just find where your project is and click the Import button. If you don't already have a project, you can create one by clicking the Create button.
As we don't need a router for this project, we will choose the manual option and select ESLint and Prettier with the feature of run the linter on save and lint and fix on comment. We can save this preset in case we want to use it again in the future but for now we can just continue without saving. It will take a few seconds to install all the dependencies needed for your project and once it does you will be taken to the project dashboard. We can go to the tasks option from the menu and server project so we can see what we have created and to make sure it works as it should.
We can now add our plugin from the Plugins tab, just search for View I18N and click on the Install button. We can now choose from a list of presets, which makes setting up a project easier. The local we want is EN for English, and we can also leave the fallback local of EN2. The directory is where we will store our translations, so let's leave that as Locals, but feel free to change it if you like.
We then have an option to enable local messages in single file components. Let's select this too, so that we can investigate how it works. Once it has finished installing, you can commit your changes. However, you can skip this if you prefer.
You will now see in the menu on the left, a new option called localizations. And if you click on it, you will see we have a path of messages and a message of hello I18N. Let's take a look at where this is coming from. We can click on the Home tab and choose the Open in Editor button and it will open up our code base.
env file which has the locale and the fallback locale set to EN. json with our key of message and the value of hello I18N. js file which imports the plugin and exports the locale and fallback locale from the env file. Or if this is not set, it uses EN and the messages are set to the function loadLocaleMessages, which basically just requires all the JSON files from the locales directory and returns the messages for each locale.
You will also see in the components folder, we now have a new component called hello i18n. In the template tag, we have a P with $t and hello inside the brackets. And we have an i18n tag with the lang en and the key of hello. But what is $t?
Although $t might look strange, it is actually a valid function coming from the i18n library. We're not doing anything fancy here, we're just printing the result of the $t function to our paragraph tag. view. We can remove the hello world component, and import the Hello I18n component instead.
We can now go back to our GUI and launch our app in the browser. To do this, we need to go to the Tasks option and click on Open App. This will launch the app in our browser and you will see we now have the Vue logo and the word Hello. But that isn't really what we wanted.
If we look at our file Hello is the key and the value is Hello I18n in SFC, this happens because we have just added a new plugin but we have not relaunched our application. to show the new changes. So to fix this, we just need to stop our task and then run our task again. And now if we refresh the page, we will see our message, hello i18n in SFC.
You may have noticed that we are getting the value from our single file component, but not from our locales folder. json, the key is message. So we need to add that to our component. We can copy the hello translation and rename hello to message.
In Vue, the template route requires exactly one element, and we now have two, so we need to wrap them in a div. Now if we check our app in our browser, you will see both hello messages. Just refresh the page if you don't see the messages straight away. We now have a hello message from our single file component, and a hello message from our JSON file inside our locals folder.
Pretty cool, right? In the next lesson, we will look into how to translate these into other languages.