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.
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.
I have the same problem in vue3 : path: "/:lang", component: { render(c) { return c("router-view"); }, }, with warnings : www.developpez.net/forums/attachments/p595040d1617739325/javascript/bibliotheques-frameworks/vuejs/i18n-integration-vue-router-vue3-vue-cli/c_erreur.jpg/
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!
@@SuperSarhanWebdev In the component where you want to have the buttons, add a method: switchLang(lang) { i18n.locale = lang; }, Add buttons to your html that call this method: Use a i18n lookup wherever you want your translated texts like instructed in the video: {{ $t('nav.nearbyAlerts') }}
Thank u that was helpful, i did sth like it, inside i18n.js I did Const locale = navigation.language And in main js document.documentElement = navigation.language
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??
if you are using vue.js with out the vue-cli you can add the vue-i18n cdn and create new component , by the way if you are creating a big App it will be better if you use the Vue-CLI
Hello, path:'/:lang', component: { render(h) {return h('router-view')},}, I have used this code in vue3.js. but not proper work. I have this facing this issue Uncaught (in promise) TypeError: h is not a function
I have the same problem in vue3 : path: "/:lang", component: { render(c) { return c("router-view"); }, }, with warnings : www.developpez.net/forums/attachments/p595040d1617739325/javascript/bibliotheques-frameworks/vuejs/i18n-integration-vue-router-vue3-vue-cli/c_erreur.jpg/
following the steps now with the installation makes it a bit different, a globalInjection parameter needs to be set to true for the reference $t to work! otherwise this video is super useful. thank you
This doesn't work, or am I missing something? If I output the strings from json file, the app breaks. Instead, I need to put then in tag inside the component, although the json file was created by default. WTH? :D
How we can use this in a dynamic website where data comes from database and user can switch language and the whole site content changes with the selected language by user. Instead of creating keys and setting a static content there ???
I'm needing to do a website with English and Chinese as well and came looking here... were you able to do Chinese? Is it just as easy as replacing the keys with chinese words?
thanks bro but i am not using the routing stuff but the local changing @kazupon.github.io am havieng difficulties in table headers pls help it is not translating it and if i reload the page it loads to fallback locale even if i have selected my choice in the drop down
You can build a vue component for the language switcher, but the i18n stuff has to be done using Laravel's available translation tools. Maybe I'll do a video on that too :)
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.
Am making a trilingual GUI in 2022. Still really relevant & usefull! Thank you my good sir!
We need this for Gridsome so badly!! Thanks for the tutorial Andre.
Agree 100%! Thanks for watching.
very few people teaching like you
thank you so much I get what I want
Language Switcher starts at 20:01
thanks!
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.
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?
I have the same problem in vue3 :
path: "/:lang", component: { render(c) { return c("router-view"); }, },
with warnings :
www.developpez.net/forums/attachments/p595040d1617739325/javascript/bibliotheques-frameworks/vuejs/i18n-integration-vue-router-vue3-vue-cli/c_erreur.jpg/
Thank you so much super helpful to understand and implementing i18n with router
Helped me meet a deadline. Excellent execution.
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!
please share some code snippets that would help me a lot with my project I just need one button to do it yes
@@SuperSarhanWebdev In the component where you want to have the buttons, add a method:
switchLang(lang) {
i18n.locale = lang;
},
Add buttons to your html that call this method:
Use a i18n lookup wherever you want your translated texts like instructed in the video:
{{ $t('nav.nearbyAlerts') }}
Thank u that was helpful, i did sth like it, inside i18n.js I did
Const locale = navigation.language
And in main js
document.documentElement = navigation.language
@@SuperSarhanWebdev where in i18n.js did you put Const locale = navigation.language and what does Const locale = navigation.language mean?
@@ForgotMyStupidName doesn't work
It would be great if you make a series on Quasar. There are not many tutorials to be found, yet it seems to be a beautiful framework
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??
Thank You Dear ❣️ really amazing explanation 👍👍
You're the best man, thanks a lot... i've learned so much about Vue.. thanks to you, greetings from mexico
Thanks for watching!
Ha! my instructor from laracast! grrreat!
Thanks for the tutorial. Is seems too useful. 😊
You are amaizing my guy..
Thanks Andrew for your great stuffs. Very helpful.
Thanks for watching!
Andre, thanks for this plugin, video, documentation. Best regards. 👏😊🇹🇷
very helpful, thanks, you make it easy to understand
Great tutorial ! 👍🏽 Curious to see your VSCode extensions 🤔
Andre, that what i waiting for. Thanks 👏
Thanks for watching!
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?
if you are using vue.js with out the vue-cli you can add the vue-i18n cdn and create new component , by the way if you are creating a big App it will be better if you use the Vue-CLI
Btw, I think we could work without manipulating with router. I would prefer just to change language parameter and that's it. What do you think?
Hello,
path:'/:lang',
component: { render(h) {return h('router-view')},},
I have used this code in vue3.js. but not proper work.
I have this facing this issue
Uncaught (in promise) TypeError: h is not a function
I have the same problem in vue3 :
path: "/:lang", component: { render(c) { return c("router-view"); }, },
with warnings :
www.developpez.net/forums/attachments/p595040d1617739325/javascript/bibliotheques-frameworks/vuejs/i18n-integration-vue-router-vue3-vue-cli/c_erreur.jpg/
Thanks for the tutorial!
following the steps now with the installation makes it a bit different, a globalInjection parameter needs to be set to true for the reference $t to work! otherwise this video is super useful. thank you
Thank you so much. You saved my day.
Oh my god thanks, i wasted hours on this... ;(
my fucking god , i love you
Awesome tutorial. Cheer!
Such a blessing.
Neat and very simple :) thanks man
This doesn't work, or am I missing something? If I output the strings from json file, the app breaks. Instead, I need to put then in tag inside the component, although the json file was created by default. WTH? :D
Awesome stuff as usual :)
Thanks for watching!
Kindly guide,
How to use this.router.push() inside any component? How to pass lang ?
1:50 use legacy option: yes
thanks for the tutorial. How do you solve the error when the user double clicks on the language?
Hmm how would I do this WITHOUT router? I see websites with no /en path or /:language pathing in the URL.
In router.js I am getting a 'TypeError: c is not a function' for
path: '/:lang',
component: {
render (c) { return c('router-view') }
},
Hello thanks for the beautiful tut but i have a q, how to i guard the /wrong-url and the wrong input of a language?
nice work bro
thanks man, very detailed
How to use multiple files per language in vue3 vue-i18n?
It`s cool stuff and cool lesson!
Thanks for watching!
If you choose the same flag ..
(in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/en/".
How we can use this in a dynamic website where data comes from database and user can switch language and the whole site content changes with the selected language by user. Instead of creating keys and setting a static content there ???
In case of having dynamic URL:
router :to="`/${$i18n.locale}${link.route}`"
Thanks for your tutorial!
PS. Can you include your starting code? ;)
There are some languages, such as Arabic RTL, is possible by injecting dir RTL into the HTML tag ?? !!
Thanks. Hope this still works
much needed, thanks
Thanks for watching!
just use the routes names in :to directive
Thank you very much
i understand the working process using keys, what if i want to translate in chinese or any other language which i dont know.. please help me
I'm needing to do a website with English and Chinese as well and came looking here... were you able to do Chinese? Is it just as easy as replacing the keys with chinese words?
vue js submit form in regional language ?
Very helpful. Tq
Thanks for watching!
wth man I do need exactly this thing with v-for and you said you not gonna use.
Awesome😍👌👌
Can you do the same with vue 3 ?
thanks bro but i am not using the routing stuff but the local changing @kazupon.github.io am havieng difficulties in table headers pls help it is not translating it and if i reload the page it loads to fallback locale even if i have selected my choice in the drop down
How to use multiple files per language in vue3 i18n
I want to ask if vue-i18n is used in nuxt, how do I make the settings?
There's a nuxt module wrapper for vue-i18n. It's called nuxt-i18n.
Hi thanks for the tutorial! Is it also possible to translate the URL itself?
no
does it work with laravel app ???
You can build a vue component for the language switcher, but the i18n stuff has to be done using Laravel's available translation tools. Maybe I'll do a video on that too :)
@@drehimself yes, a separate video to user laravel and i18n will be great idea ? :-)
Cool vid! Thank you a lot!
Like and sub, keep teach us
Salom 👍👍👍👍👍
💚
💙
Very unintuitive