Nuxt i18n: The Ultimate Guide to Building Multilingual Websites with Nuxt 3

in today's globalized world it's important for a website to cater to user from all corner of the world this is where internationalization or i-18n in short comes in i-89 is the process of Designing website to support multiple languages and locals if you are using next to build your website adding internationalization is easy and straightforward in this video we'll go through all the steps required to add internationalization or i89 in short to your website before you get started make sure you have subscribed the channel and also join our Discord server it's exclusive community of like-minded people who are helping each other to grow in their coding Journey so let's get into the coding [Music] and inside the terminal we will go to our project folder then I will create a new project so npx naxi in it and then the project name so in this case I would be writing naxi I 18 n so press enter y and now let's CD into it naxi iatn sorry it should be next but anyway I have since I have already created the folder name so there is no point of changing it now so let's open it in our code editor so to do that I'll write code dot so it will basically open my project inside vs code so yeah so this is in my another screen so probably I should drag it here okay so I'll close the terminal now because I'm going to use the integrated terminal so control so I'll open my integrated terminal and I will run yarn so this will start up our development server okay so our project is running so let's go to our browser and run try to access localhost 3000 it will show our application as usual 2 000 years later with the help of video editing I have already added a few pages so it's nothing uh some rocket science so I'll just show you what I have done I've just added to page one is about and another is index page so in index page I have added a link that link will take you to the about page and I have done the same thing for the about page but the link will take you to the home page so this is what I have done and I have also added some styles for the page so that it looks a little bit uh good so yep so on the project you can see I have a home page it will take you to the about about will take you to the home now how do we add internationalization in our project so basically we are going to use this package next i-18n as in internationalization before starting this I would like to tell you more about this package so basically this is a wrapper of the view i18n package which is very famous and popular the next package wraps it and gives you more options such as automatic routes generation and custom paths then search engine optimization of course is the next package so you'll it will give you the search engine optimization page lazy loading redirect based on auto detected language different domain names although we are not going to cover this one because this will take a a different video on its own so I'll just keep it for later but we will see all the techniques required to add the next internationalization into your next website right so let's get started first we'll start off by adding the package itself so I'll just copy it and I will a stop my next server I'll paste it and I will remove the npm because I'm not using npm in case you are using npm then this is the this is the command for you since I'm using yarn so I'll just write yarn add and that's that's pretty much it I'll just click enter and yeah I have made a mistake so it would be yarn not yarn so it'll start installing the installation is done so what I will do we will run the project and I'll click on get started in the documentation and you can see we have to add the modules so let's just copy this from here and we will put it in our next config file so in next config file this will add it and then save the project again and if I refresh I refresh the page and try to click on about it still takes me to the about page so now the main part we'll see how we can add the internationalization we have already added the modules now we have to put some module options we will go through all the options but I'll just give you a basic options settings that you need to enable the languages so in my case although you can write all your translation inside this uh object itself but I always recommend uh to use the lazy option so inside lazy loading you'll have your translation into a different file and different directory and for each translation file you will have each individual files so that is a better way to manage it so what I'll do inside my root directory I would create another directory name locals okay this directory will contain the translation file and how the translation file would look it would look something like this for example I'm writing the locals for English and US English then I'll write en US this format has it has a name so this is called ISO format so you can have a Json file right so if you if you are creating uh translation for some other country or some other locals then you have to find their ISO code so if I write on Google US English ISO code then it will give me uh the en US for United States for New Zealand you see uh it is different although the language is same but the local would be different because uh they use some different version of English which is uh which code is uh en dash NZ for South Africa it's different for India it could be different so you can create locals for almost all the countries and languages so basically you know that's how you should um rename your translation file so I would create another locals so it would be es Dash yes this is for Spanish and I create another locals for in dash hn this would be for Indian Hindi language but I don't know if this local exists so I'll probably check for Hindi ISO code um okay so um so let's check here language code sortable hmm let's search for Hindi yeah so it's h i not h n so it would be something like r h i okay so it would be I N Dash h i not agent so whenever you are uh what I mean to say whenever you create a new locals or translation file always make sure that it follows proper ISO guidelines so yeah so our translation files are okay and you can probably start writing the translation so that's what I'm going to do now since we have only two piece of text in our um page so it would be really easy for us to you know write the translations for example I'll just say uh the title and the title for the English home title home title for English would be just home and for a home button BTN would be our like home or maybe go to home right and for about about title would be about and about button would be about go to about so this is our translation file and this is what we are going to use basically we will replace all our static strings in our file and it will be changing based on my selected locals so we have to configure it first so I'll go to next config and I'll show you the basic configuration first thing we have to give is the language directory since we are going to use the um use the lazy loading so first we'll tell lazy and we'll set it to true then would give the langda directory so the language directory and it would be locals not Lang so my chat GPT or sorry my co-pilot is stupid you can see it is suggesting me Lang but I have some different names so yeah they are stupid machines what else you can expect so locals would be my language directory so after that I I have to give a strategy and I'll tell you uh the different strategy that you can use as you can see it is suggesting me prefix except default what that means I'll show you so basically what this strategy strategy mean is basically uh so whenever you change the a locals from other than the default one it would take something like this the iso code for example if I am going to Spanish page then it will uh something like this and then my page route path so so we want on this kind of path for all other locals except the default one so we have to yet to define the default location sorry the default locals and then it would work but but you can see we are already getting some uh error that is correct because we have not set the list of locals in our configuration file so we just explained one strategy then there are multiple strategy I will walk you through that as well so after that let's uh give Let's uh Define our locals so first one would be English of course so I'm going to give same as the name and then that would be the name would be English us and then the file would be English US dot Json okay and just like that I would create two more and I'll just copy this one and I will create two more from this so another one would be ES dot ES chat GPT command give me and it would be yes dot dash es dot Json and for Hindi of course we will have iron h i um it would be Hindi and it would be i n h i dot Json once that is done we'll close our array and we'll save it again so as you can see we are getting error and I'll let I'll tell you why because we have set the strategy as a prefix except the default but we haven't set the default uh locals yet so we have to set the default locals so let's do that so uh right after this we'll write default default Locale and it would be en US I'll save it and you can see we have our home page back isn't it awesome so if I change now it's a great time to show some different strategy as well so probably I will add no prefix so we have no prefix as well so if I add no prefix you'll see there wouldn't be any problem right you see uh all is working perfectly so there is no prefix at all so let me take you to the strategies so what we have we have no prefix route owned have a local local prefix then we have also seen what prefix accept default means basically local prefix added for every local except the default so for uh Spanish it would be something like ES yes and then the route so let's see the others then we have prefix and default so basically it will take the prefix and a local prefix added for every Locale and the default as well so let's try to set that and let's see what happens then so I'll copy I will paste it here and let's see what happens so as you can see we are getting the home page even after changing the locals to Spanish although we don't have this page in our pages but still we are having it because uh the the i18n package is adding the locals after every component and pages so let's remove it and try let's see what happens so as you can see so let's change it back to our prefix except the default version and I would also like to define a fallback language if the translation is not there for any language then what it should take so for that I would uh use the view i89 option and inside that I would write fallback Locale and I would set it to English so English should be my fallback local because this is the my default language of our application so we are pretty much set with the uh with the plugin options module options we don't have to do anything in the next config anymore so let's go back and let's try to add some um a translation for the Spanish and Hindi as well so what I'll do I'll open uh the chat GPT and I will tell it to translate it okay so our Hindi translation is also generated now just uh take it from here and I'll paste it in my Hindi uh translation page now what I'll do I'll save everything I'll close my chat GPT and I will go back to my pages so first uh let's just translate this home page so instead of the string what we would like would like to access the dot T provided by the next so T would be you know the function to get the translated text so you use T and side T you have to give the keys the keys for your string so for home we have a key called home Dash title so I'll just write home Dash title and you can see we have we still have the home that means that translation is present and you can see it already if I change it to something else maybe translate Dash X and then you cannot see the translated file because this is missing in our translation file so let's just remove it and yeah so now I'll write uh dollar T and it would be for about button so go to about you can see it has changed to go to about page now if I click on go to about it will take me to the about page so let's do the same for the about page as well so I would like to take help of copilot let's see if it can give me the text so yeah it is but it is giving me some wrong text as well so never mind so let's do the same for the link as well so home button so let's save it and you can see go to home so now how do we go to the uh how do we change to the different language so we have to create a plugin not plugin we have to create a component but let's do that but first let's check if it is working if I just write the uh I ISO code of that local so yes yes if I go and you can see we have the a Spanish translated page if I try to go to in dash hi so you can see we have the Hindi language isn't it awesome it's just a couple of lines of configuration a couple of lines of your translation files and Bam isn't it a good idea to add it in every next project that you have maybe later on you want to add the language so I would highly suggest you if you are creating a new next project it's a good idea to start the translation file beforehand so yeah so that is working now so let's try to create our language changer component so inside our root directory I would create a components directory so it would be named as components and inside that I would name a file Lang switcher Dot View so in this component we will make it a reusable component so that we can use it in all other projects and you can also add it to your different projects as well so it start with script then setup then we'll set the language as TS as always then inside the templates we'll just write switch language so that you can see the this thing in our app.view so just right after the next page we'll add that so probably we should write Lang Switcher and you can see we have the lung switcher right here so what we'll do we'll give it some style since we are not using telwyn we have to do it the old-fashioned way so let's start working on it so how do we get the list of locals so for that we have to use a composable given by The View internationalization package for that I will use const and then I will use i18n and this composable will give me a bunch of things that I need to create the ah the component so first of all I would get access to locals so if I now try to print the locals the list of locals I can get that as well so you can see we have these many locals right now then we will get another one called uh Locale the singular one this is what we are using right now this is a reference to whatever we are using right now so if I set it you can see we are using uh en US okay so that is working so what we need to do we need to change the value of this um of this reference to our desired local code so how to do that so let's first try to create a drop down or something so basically what I'll do I will take select and then inside select I would take a bunch of options and those options would be uh none other than all our locals so I'll run a loop loop through the options and I'll try to show it in our page so let's give a key so key would be item and you'll see some errors but we'll fix that once we are done then we'll give the value and value would be item dot code and we'll have the name as well so let's just give item.name and if I save and if I refresh you can see I have all my locals inside this list which is awesome but now we need to check for the change event of this input field and we have to change the locals of our website so but first let's just try to fix this error and let's just find out why we are getting this error so this is of course a typescript error as you can see and why is that because our item can be a string or a local object since key accept our strings numbers symbol and undefined it can't assign it to local objects so we'll check the type of item if there is string will assign the item itself if not then we will assign the code so let's do that so I'll just uh break it to the new line and then I'll try to do that so I'll check for type of item that is string object then what we'll do we'll just take the item.code or else we would just take the item itself that means this would be a string you can see and if that is object that means we will have the code property as well I'll do the same for this value as well and I'll do the same for this but then we have to change the code to name okay and as you can see all our typescript error are gone and we are backed to normal but there is some padding issue so I'll just quickly fix it from my app.view so I have given a margin bottom 50 pixels and it is showing some differentiation between this section and this so uh this is showing the language now we have to set the language if someone changes it so how will we do that will you do that using a spatial property given by the computed a method of view so how will you do that so we'll basically bind it with v model so this is a this will be a two-way binding and then we would write language and then I will create a computer property which will get the value from the Locale and and also set the value to the Locale so how to do that so we'll just take a const language and then we would assign it to a computed property and then inside computed what we will do we will get take I I hope you have not used computed this way but this is another way you can also make use of the two-way nature of computer property and you can make two-way binding using the computed property itself so forget forget we will uh it it requires a function and that function would be just the Locale of the value and for set so the passed on value should be set to the locals so this this composable gives us another function named set Locale so we'll call that set Locale and we have to pass on the value so you can see the two-way binding of V we are using it will give the uh it will give the value of a selected a local and that value would be passed on to this set method and inside that set method we are calling the set local function from The View internationalization package so I'll just give it a save and I'll refresh the page and then I'll try to change it and you can see I can now change the page to English Spanish and Hindi all at the same time so now let me show you a problem we have a big problem here so let's say I have changed the language to Spanish and now if I click on this button to go to a different page and you can see we are back to English again why is that so let me take you to the index page and you can see this is just a string this is taking us to the about page the router doesn't know whether to take you to the Spanish version of the about page or to the Hindi version of the about page it's just taking you to the about page which is by default our normal about page the English about page so we have to tell our new router to take us to uh to the correct uh local page so this is a big issue for us now to overcome this issue we have to use something called local path so let's use that so const local path would be would be given us by use local path so basically this is it and it is not a destructured object it's just the path as it is so let's just wrap this we have to bind it to our router so local path and this function will take the parameter and we are good to go so let's do the same for our about page as well let's save it let's give it a try so as you can see I'm in the home page now I'm going to change the language to Spanish and if I click on this page and if I go to home about page I will be redirected to the Spanish version of the home page so let's click on it and you can see I'm already inside the Spanish version now if I change it to Hindi and if I go to the home page you can see I am redirecting to I'm getting redirected to the home page of uh sorry we don't have home it's just the root so if I click on here you can see I'm inside the home so let's check test that one more time Spanish I'll go to about now if I go click on go to home it will take me to the home page so this is how you add internationalization to your next three website so we are at the end of this video so let's uh summarize the video and let's see what we have done first inside our app.view we have added some Styles and we have our language switcher component which you can use in any other projects I haven't styled it properly because this is uh internationalization project not a styling course so this is the reason so after that we have added the package uh i18n we have configured it properly we have explained each and everything including the strategy including how to set up lazy loading how to set up the language directory and the list of locals we have also seen how to set set up the fallback Locale if some local doesn't exist so in that case we have used the English Locale and how to also set the default Locale we have seen all of this this is basically the configuration for that module and right after that uh what we have done we have created a bunch of translation file so when you are creating the translation file always make sure you are using the correct ISO codes so this is our translation file pretty neat and clean and then we have added the translation using the function t so our T are basically uh you can use this T dollar T to add the translation for any string and then inside that you have to give the keys of your um of your string so inside index we have done that inside about also we have added the translation and for local route navigation we have wrapped our normal string of the router with local path so it will this will basically take the route location and it will convert it to the localized route location and it will redirect your user to a correct local version of the page so we are getting that from the use local path use local path composable given by the next internationalization module then we have created this pretty neat and clean language switcher which you can see so let me take you to that component so inside this component you can see we have used view i18n package you might be confused via this view 18 i18 package comes in so I guess you have missed it so if you go to the documentation it says it has wrapped next i18 has wrapped the official view i18 package and on top of that they have added a lot of SSR functionalities so we can obviously make use of the use i18n which is which comes from The View and from there we are taking locals property we are taking local property and set local to set and change the local for this we have used the computed property inside that we have getter and Setters as a getter we are getting the local value of from the reference Global reference and for Setters we are taking the two-way binding value from our select input and we are setting it via set local uh function so that is pretty much it I hope this video helped you to add internationalization to your next website if you have any question or you have any feedback for me about my video please comment it down if you want to get more involved in our coding Community then please do join our Discord server I'll meet you in the next video till then stay blessed stay happy bye

Channel: Jahid Anowar

Views: 13,464

Keywords: nuxt 3 tutorial, nuxt 3, vue js, i18n react, nuxt i18n example, nuxt i18n localepath, nuxt 3 i18n, nuxt 3 internationalization, nuxt 3 tutorial for beginners, nuxt 3 tutorial hindi, web development

Id: 33NTCaUU8DI

Length: 35min 35sec (2135 seconds)

Published: Sat Mar 18 2023