Vue.js i18n Language Switcher

We take a look at adding multiple languages / internationalization to our Vue application using the vue-i18n plugin. We also build a language switcher that lets us toggle between the different languages in our app.

# LINKS

[inquiz]

I am currently working on my first project. Since I was hard pressed into doing it, I had to learn everything from scratch in under a month, starting with html and ending right here. Long story short, localization was my nemesis. I couldn't get it to work no matter how hard I tried. And you, you absolute beautiful beast of a human, just made my life for at least a few years. You are amazing.

[noureibo]

very few people teaching like you
thank you so much I get what I want

[thelonewolf]

Am making a trilingual GUI in 2022. Still really relevant & usefull! Thank you my good sir!

[BrunoDeAngelis]

We need this for Gridsome so badly!! Thanks for the tutorial Andre.

[agunst]

Mana many thanks to you Andre. I was looking for Localization for my Laravel Vuejs Site but I could not find any easy tutorial like yours. it wonderful Andre. God bless you.

[AmarjargalB]

Thank you so much super helpful to understand and implementing i18n with router

[CodeMonkeyG]

Helped me meet a deadline. Excellent execution.

[mtzrmzia]

You're the best man, thanks a lot... i've learned so much about Vue.. thanks to you, greetings from mexico

[MrMarcoAlvarado]

Hi, that doesn't work with component: {
render(c) {
return c("router-view");
}, ... c takes "router-view" as an argument, but where does it come from?

[sheriffcrandy]

In router.js I am getting a 'TypeError: c is not a function' for
path: '/:lang',
component: {
render (c) { return c('router-view') }
},

Ha! my instructor from laracast! grrreat!

[RHmoon]

Thanks for the tutorial. Is seems too useful. 😊

[MehmetDemir-jlny]

Andre, thanks for this plugin, video, documentation. Best regards. 👏😊🇹🇷

[won]

Andre, that what i waiting for. Thanks 👏

[iomelyuhin]

Thanks for your tutorial!! it works!!!
I want to ask how to change the path in the url to the standard locale? The task is to make sure that on the English version of the site in the url is displayed not site.com/en but site.com/
is it possible??

[jniyaz]

Thanks Andrew for your great stuffs. Very helpful.

[SusanthCom]

Thank You Dear ❣️ really amazing explanation 👍👍

[nu]

very helpful, thanks, you make it easy to understand

[ForgotMyStupidName]

Just a heads up, if it's not a requirement to have the language parameter set from the URL, it can be done much easier: just switch i18n.locale to your desired language upon a button click, no need to hassle about with routes and route params and route guards. For a one page application that'll suffice since the page never gets reloaded and the locale param persists until the user changes it again.

Still a nice tutorial though!

[nanchitacr]

Without installing it with the vue-cli I don't have any of the files you show in your project? What am I supposed to do then?