Vue 3 I18n | Creating a multilingual Vue 3 web app

In this tutorial you'll learn how to create a multilingual Vue 3 web app. We'll see how to perform translations with the vue-i18n plugin, add language switcher, persist the locale, read user's preferences, and lazy load translation files.

Timecodes:
00:00 Introduction
00:49 Creating and configuring the app
03:19 Adding and configuring vue-i18n plugin
06:02 Performing basic translations
09:46 Using interpolation
10:42 Introducing pluralization
13:43 Working with numbers and currencies
15:25 Localizing date and time
16:40 Extracting translations into JSON files
18:30 Creating a language switcher
25:41 Persisting the chosen locale
26:27 Reading the user's preferred locale
29:55 Displaying the current locale in the URLs
31:04 Adding the beforeEnter hook
33:42 Update the URL after the language is switched
34:37 Adding locale to the links
36:41 Lazy loading translation files
39:49 Conclusion

#vue #i18n #l10n #lokalise

[Lokalise]

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))
}
}
})

[jose]

Thanks a lot for your complete video! That's really helpful. No such content as it on internet. Thank u, God Bless

[theWhiteBiM]

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.

[deltaforceseal]

what was that you did in pluralization.js?

[RajaSekhar-tenz]

How to use multiple files per language in vue3 vue-i18n?

[djproductions]

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