Vue.js i18n Language Switcher

what's up guys Andre here and today I'd like to implement internationalization or i18n with the view I 18 and plugin will also implement this language which are in the process which you can see here and you can switch between languages and it's already similar to the drop down we've built right here in previous videos so let's go ahead and get started okay so here's the app without anything implemented I did add view router just so we have extra pages here which we can translate as well so I have three pages I have the home page which you've we've been working with the about page and the contact page and in terms of structure not much typical view router app I just switched up it still has the navigation here but I just added an analysis came with what when you do view add router you just have to add a router view so other components or other pages can get injected into here okay so let's add view i18n so here I am in the docks and for installation we can just npm install it but ill but if we have view CLI 3 you can just do this and this will add some configuration for us so we'll do this way since we are using a view CLI 3 project but if you're not you can just do it in using NPM install but I'll do it this way and it asks some questions here there's stood the default for English here fallback english directory is locale that's fine and there's an option to have look out messages in single file components but we'll just stick with the default of no you can change that if you want later on and here's everything that changed so as you can see it added a config here it added locales for English it added some stuff in the view config and this is just some other stuff Oh added routers file to a Roth file or not added just edited it okay so let's take a look at what's going on here so let's look at the config first so it would be right here and here's where exports the view I 18 n instance and in my experience the environment variable which was modified as well you go to in V there's a section for the locale and the fallback locale if you want to change that by environment but for some reason that wasn't working on my computer so I'm just gonna remove it I think it's okay to just hard-coded and without environment variables so I'm gonna remove that and I think it also changed our main J s where we have to import it so there it is and it's using it in here yeah we do that use okay so this method loads all of the JSON files needed for translations right now we only have English and it makes it available in this messages key so if you add another one it will automatically be available here which is great and if you want you can split it up into several files but for our purposes since it's just an example I'll just leave it as Ian JSON and you can have multiple objects in here if you want like if you want to split it up into like a nav the footer and stuff like that you can just have a nested object within here okay so I'm gonna add one more locale here just so you can see the different languages and how to switch locales so I'm gonna add French so the code is fr and trying to copy this I should have just duplicated it and message is gonna be Bonjour and you have to make sure that for each locale the structure is the same if it's not then it's just going to spit out the key okay so let's see how to use this in a wrap if you go to Docs if you go to message syntax and if you scroll down here here's what I was talking about just a second ago you can have nested objects if you want but if you want to just output the specific locale wrong we'd have to do this so we have a message or we have to do let's just put a paragraph in here let's go to the home page so our home pages in home that view and I'm just gonna put a paragraph tag split it above this first thing you just have to do this so T I'm not sure what T stands for but that's the method could be translation but which have to put the key in here so our key is message and this our default is English so it should render out the English message and there it is now if you want to switch to the other locales I'll do it programmatically for now if we go into our config we can just change this fr and now it's French awesome and let me add a nested object just so you can see that so I am going to go to here and it's I had a new one called nav and this will be nested object and we can put all the nav related keys in here so I'm gonna put say for example for our enough we have these and we want to be able to translate these as well so we'll have one for features and this is English so it's just features and I think our CSS is upper casing this so it does matter how you spell it so I'm gonna grab this and do it for French as well let me say that first French put in here and change this to I'm talking about fr for French because I don't know the translation now if we use that so again go to home to grab this just go to our I think it's an app app is where our menu is or sorry our nav should be in a nav component but I didn't put it in a half component but that's ok so actually it's in our search component not search it's in our mega menu because that's where the the text is right here so this should work as well let's see so it was nabbed up features does that work it spelled it wrong there you go if our features to change your back to english 18n then it should the render of features okay so there you go that's the basics of how i18n works for view or for this plugin and this is basically how it works for everything you just have multiple JSON files and it switches between them and you just have to define a bunch of keys and you can imagine how much how many keys there will be if you have a real app you just have to set the key for every section in your website which can be quite large so that's when splitting up splitting it up into separate files might be a good idea okay but obviously you want to be able to switch between languages using the route or the router so for English we want Ian and for French we want fr so let's go ahead and do that so obviously our routes are going to change now for example for about it's no longer going to be about it's gonna be a and about or F are about so we have to change our router let's go ahead and do that let's go to a router Jason utter chaos sorry so let's nest all of these current routes so a be these three in a parent route or a route program so let's just do that and it's put it on its own line okay just reading at this let's go up to the indentation just for this one and it's set up a path here so B path and we'll name it the Lang for language and it's gonna be a wrapper am so we'll put a call in and now all of these routes will be children so children it's gonna be an array and it will end here after this one I don't know why I highlighted it but should be like that and at that and now this should work let's see okay but if I go to anything say he and contact that doesn't seem to work I think if I remove this last year that should work okay so to make it work you have to add one more key here for the component and it's just rendering out the router view so this is just neat googling stuff and trying to figure it out and here's what I came across and now again don't forget we remove the slashes I'm not exactly sure why we have to remove it now this should render out there it is cool and the same should work for the other pages as well okay so right now this route paramah doesn't matter what this is actually it will still render but we have to get the country code and change the locale from here so to do that we have to use Route guards which is similar to middleware so let's go back to our code and you can put it in the router but I'm gonna put it in my yes right after here so here is a route car it's gonna paste it in just save some time and this is just the standard definition for it and here the language is taken from the URL parameter or in this case it's FR and if there's not in the defaults to english and here is where it sets the locale so you grab i18n you change the locale to whatever is in the URL parameter it to continue so now if we go back to our main page many pages in our en so right now it's English but now if I change it to French this should be the French translation there we go cool okay you probably want to redirect here if there's nothing right now it's not responding to anything so we can change that back to our router so in our routes here actually this one above here let's just define a new object and this one will respond to the just the default slash and it will redirect to slash Ian and they should be taken from the config but let's just see if it works and then we'll make a dynamic of it does but this should be the config so let's do that let's make it a template string and this will be I 18 and dot locale and this usually is a global variable but it's not defined yet when it goes into the router so we have to import it so import my eight team and from 18 and okay and this should still work let's try let me refresh just in case so just to drill this into your head let's add some translations for the about and contact page actually before we do that you saw how there's no longer responds to routes because we need these locale in here so let's change that first so my Nana is an app that view like I said it should be in a and I have a component but whatever so for our two pages here we just have to add the locale so these two so we start to make it dynamic so we'll do this we'll add a template string and then we'll add a 18 and so B slash let me need a variable / about and why 18 and there is a global variable with I 18 and dollar sign I 18 and it looks a bit weird with the other dollar sign there that's okay look how and we grab this and put it for contact as well hopefully I did that right change it to contact and for the homepage up here up here where is it right here we want the same thing but we want it to go just to slash so just like that okay and see if this works so that doesn't seem right okay so now it is cool so Ian about in contact and if I go here should go back to the home page it does but if I change it to French it maintains the French okay cool so like I said let's add some translations for these pages just to be clear about how to do translations so let's add another nested object and this time is gonna be called about let's just do it for one for about so everything in here will be within this about key so we can name it about title and it will just be about and then about content just duplicate this and that would just be content yeah just have some lorem text in here okay lorem ipsum doesn't work in there let's grab this let's remove that let's grab this whole about and change the change of for French as well just add it here after the nerve and it's just a deaf are here okay so now refresh I'm sorry I have to add it in the about page so here would be dollars on T about the title and then here would be about text content right that's why I named it right yes now this should work so there it is for French and for English that should still be the same awesome okay so one thing you noticed is I had a link in here before so what you can do but you have to be careful is you can still maintain that it is just basic HTML elements like maybe a strong tag to make stuff bold or maybe a link here and there so I'm gonna put a link around this I don't think I am it's gonna work does it yet that was cool so so think around this one but if we render it out oh man so Jason is gonna complain because that's not proper formatting so it just changes to single quotes okay but it's not gonna work because we're using the double curlies and that escapes everything so you can change this and here not use this double curly syntax but he use the V HTML directive but you have to be careful when you're doing that because if if you're rendering out user-generated content and that puts you at risk to cross-site scripting attacks but if it's just coming from your own code base in this case it is because it's just translations then it should be okay and we have tits called dangerously set HTML which i think is a better name because it puts you on high alert but that's okay I'm gonna stop close this P tag and now it is a link you just can't see it it's a to add some classes or you can set it in a Bay styluses to class equals text I think was 500 there it is cool and if you look at the docks there are more clever ways to template everything so you don't have to add a bunch of keys okay now let's build this language switcher so it's basically just like our drop down over here actually let me fix this first where's this drop down yeah I think it's just the avatar yeah it's plus last year should be fine okay so let's quickly do this I'm gonna duplicate the drop down menu because it's basically the same thing and you could probably reuse this and use something like scope slots but I'm just gonna do it this way so let's call it language switcher top view and we can leave all this stuff let's just use it in our app that view so I'm gonna put it right before the drop down so where's the drop down here use that say the language switcher and she's down here language switcher and here language switcher okay now there should be two cool let's change it to just use a text-based so where is it it's in language switcher instead of the Avatar so this is the SVG for the Chevron down we'll leave that just put spend yen in here see how that looks okay I'm also put a flag there and I already have the flag SVG is in here as you can see I put it in public and he's an image tag to make it easier for myself you can inline it if you want I'm going to flag and steps / en SVG like have to be / okay and that is covering everything so let's just make it smaller w 8 h8 cool and let me just bump it over a bit split margin left on this okay cool and I should put a margin right on the entire thing as well so backed up where's it here I'll clean this up after just to start okay actually it's 8 so let's keep it consistent okay so that looks pretty good it's still the same as this so if you look in the dogs there's actually a section here for a language with your locale changing right here the example here and they are using a just a normal select which you can use but it's not as flexible as making our own so let's just see what that looks like so I'll go back into our language switcher just put in here see if it renders out where we can see okay so this is the one okay so let's just copy everything in there we need this stuff actually we just need the data and that's it so let's add that to our state so let's just put it right here I copy the whole data I did I just need this cool and I'm gonna put it right here and we just need the languages hey right now they have Japanese in English and for our case we have English and French let's change that and now see if this renders it does sorry there you go and it actually switches the locale it doesn't update the URL which we'll do in ours but if I click this then this should change to English and that's cool so one thing I want to show you if you want to make this dynamic you don't need this there is a property on the I 18 instance that lets you select all the available locales so instead of length we can just do by 18 and not available locales like this and this should still work but now it's dynamic in that if you add another JSON file here this will automatically be updated and you don't have to update to this all right here and you can totally use that but I'm not going to in our case okay so instead of these rendering we want there are languages so let's go ahead and start doing that so we have this ul here and this is the first case and since there's only two we want to keep the first one and the last one again if this were a real app I would use that available locales but students already have it implemented this way so I'm commenting this one out because this is in the middle and the stuff for our keyboard accessibility is it varies depending on if it's the first item a middle item or the last item and since we only have two languages I just want the first one and the last one so where's the last one here so that's the last one delete all these and now we should only have two okay so the first one instead of the SVG I'm gonna put a flag in here and this is gonna be English split the image in here so flag the end is VG say flag or English flag and that should now be a large flag just give it h 8 w 8 okay cool this is a bit large but I'll just leave it i might tweak it in the final code and we can do the same for the last one so we can remove this and we can add French this one will be fr okay cool so now we have our two languages and we just have to set the locale so we need an event listener so on both of them so let's do click that prevent equals let's call a set locale method and we need to pass in the current locale so in or for the current item so in this case it French and for English it is en up here the end and let's define that method in our methods let's put down here set locale of cow okay so we just have to set the locale or we can grab the global I 18 object and assign it to the variable that's being passed in okay so now these two should work exactly the same this should be English oh sorry there should be no cow my bad tries again okay so right now it's French click English it's English wit French its French awesome so we obviously want the router to change as we click that so we can do that as well so add some code here so this router push and if you want to push for the programs this one changed the Langham so lang is now look out and that should switch the router so right now it's French and you see it change they're cool and I want this to hide too so I believe there's a hide yeah high drop down method they start hide drop that cool so right now it's French English French awesome and we want this to be dynamic as well so I'll change that so here so let me get rid of this don't need us now and we have to make this dynamic and it's changes to a template string and we just need to make sure that we have the image corresponding to the flag so make sure you have these defined or actual SVG's in the public folder it should be good so again it's 18 in that locale SVG cool and this is now I'm gonna be Oh 18 and that locale that to uppercase and that should not be dynamic so we have French English cool so there you have it guys we managed to take a look at the I 18 and view plug-in to have multiple languages on your view site as you can see it's not too difficult just a few changes on the router and you just have to define all your keys in the languages you have if you're using NOx there's also a MUX to I 18 and plug-in which is built upon this plug-in and actually think it's easier to use because you don't have to mess with all the routing it just works out of the box just like how it next routing works please like comment and subscribe if you haven't read them so thanks for watching guys see you in the next one okay thanks bye [Music] you

Channel: Andre Madarang

Views: 42,893

Rating: 4.9066148 out of 5

Keywords: vue i18n, vue internationalization, vue multi language, vue language, vue language switcher, vue.js i18n, vue.js internationalization, vue.js multi language, andre madarang, drehimself, vue js tutorial, vue tutorial, vue lang, vue-i18n, vue-i18n tutorial

Id: CFGjn3yKMNc

Length: 32min 35sec (1955 seconds)

Published: Wed Jul 03 2019