One important thing related to the app config, especially for production. Inside your vite.config.js file, the path to the locales directory should be './src/i18n/locales/**' (or, well, any other path where your translation files are located). ALSO, if you named interpolation or pluralization is NOT WORKING in production, please set runtimeOnly to false in the same file. For example: export default defineConfig({ plugins: [ vue(), VueI18nPlugin({ runtimeOnly: false, include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'), }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })
@@Lokalise by the way! In middleware that we created to protect the route, is giving me infinite looping. How can I fix that ? WARNING ERROR: main.js?t=1697003805905:17 [Vue Router warn]: Detected a possibly infinite redirection in a navigation guard when going from "/" to "/en". Aborting to avoid a Stack Overflow. Are you always returning a new location within a navigation guard? That would lead to this error. Only return when redirecting or aborting, that should fix this. This might break in production if not fixed.
@@jose126636 Hmm not sure. I've just tried running that app once again with all the dependencies updated to the recent versions and I do not observe any warnings. Perhaps, you have some line of code missing?
my current issue is that the server returns "404 Not Found" when the user tries to access domain/lang - i guess it's because the server thinks that the /lang is a real directory and it doesn't find it... What would be the solution for this issue? Maybe configure the server so it always redirects to the index.html ?
Would you like to make the same thing but in TS and Composition API? I used your video to better understand and I make a huge turn around to solve my problem with i18n, basicly I have my translations o object (yes, it works with i18n, specific files didnt went well for me), a load it when mounting the app, than i use localstorage to keep the user language, using Pinia or reactive didnt works, and I had to do the uggly but necessary reload on screen, so, app starts in the fallback lang, and if the person switch the language, it changes the localhost and reaload. The reload is terrible, but it worked. Dont have much info about the error I went up with, and had to do what i had to do hashsahahhas. Thanks for the video, great content.
Just an honest tip: Your voice really contains a lot of low frequency, I would recommend editing and lowering the bass of your recording. It's almost unbearable to listen to from my Bose companion 2. A real bummer because your video looks interesting
@@suddha1 I hope you understand that people have different sound systems and if it works for you because you use headphones doesn't mean it works well for other people. Weird that I even have to explain this..
One important thing related to the app config, especially for production. Inside your vite.config.js file, the path to the locales directory should be './src/i18n/locales/**' (or, well, any other path where your translation files are located).
ALSO, if you named interpolation or pluralization is NOT WORKING in production, please set runtimeOnly to false in the same file.
For example:
export default defineConfig({
plugins: [
vue(),
VueI18nPlugin({
runtimeOnly: false,
include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'),
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
@@youssefelyahyaoui2228 😀
Thanks a lot for your complete video! That's really helpful. No such content as it on internet. Thank u, God Bless
Thank you so much!
@@Lokalise by the way! In middleware that we created to protect the route, is giving me infinite looping. How can I fix that ?
WARNING ERROR:
main.js?t=1697003805905:17 [Vue Router warn]: Detected a possibly infinite redirection in a navigation guard when going from "/" to "/en". Aborting to avoid a Stack Overflow.
Are you always returning a new location within a navigation guard? That would lead to this error. Only return when redirecting or aborting, that should fix this. This might break in production if not fixed.
@@jose126636 Hmm not sure. I've just tried running that app once again with all the dependencies updated to the recent versions and I do not observe any warnings. Perhaps, you have some line of code missing?
Great tutorial, it was very helpful
Great tutorial, but it doean't work properly when I try to make a "catchAll" or "matchPath" in my router for my custom NotFound page.
I'm using this with Ionic 7 & Vue but globally it doesn't work. I have to import it in each component. I get the error " $t is not defined"
This is very helpful! Any plans to to a similar video or blog post in Nuxt 3? Thank you!
Thanks @juliecook9101; nothing planned for now, but we will consider your input.
my current issue is that the server returns "404 Not Found" when the user tries to access domain/lang - i guess it's because the server thinks that the /lang is a real directory and it doesn't find it... What would be the solution for this issue? Maybe configure the server so it always redirects to the index.html ?
what was that you did in pluralization.js?
thank you
How to use multiple files per language in vue3 vue-i18n?
Would you like to make the same thing but in TS and Composition API? I used your video to better understand and I make a huge turn around to solve my problem with i18n, basicly I have my translations o object (yes, it works with i18n, specific files didnt went well for me), a load it when mounting the app, than i use localstorage to keep the user language, using Pinia or reactive didnt works, and I had to do the uggly but necessary reload on screen, so, app starts in the fallback lang, and if the person switch the language, it changes the localhost and reaload. The reload is terrible, but it worked. Dont have much info about the error I went up with, and had to do what i had to do hashsahahhas. Thanks for the video, great content.
I should think about it but all in all this video does cover Composition API so I'd imagine things shoud look more or less the same with TS
Just an honest tip: Your voice really contains a lot of low frequency, I would recommend editing and lowering the bass of your recording. It's almost unbearable to listen to from my Bose companion 2. A real bummer because your video looks interesting
dunno what you're on about as it was fine for me sounds like you need new headphones homie
@@suddha1 I hope you understand that people have different sound systems and if it works for you because you use headphones doesn't mean it works well for other people. Weird that I even have to explain this..
@@dj78productions i use headphones and the bass is too high hard to focus on the video when you feel physical discomfort from the audio.
Почему не на русском?)
Please refer to the following video if you're looking for a Russian version ua-cam.com/video/kHJwKurpEXc/v-deo.html