Vue 3 i18n Tutorial: Complete Guide to Multilingual Apps with vue-i18n

Looking to master internationalization in Vue 3? This step-by-step tutorial will teach you how to create a multilingual Vue 3 web app using the powerful vue-i18n plugin. 🌍 In this comprehensive guide, you'll learn: ✅ How to perform basic translations with vue-i18n ✅ Adding a language switcher and persisting user preferences ✅ Localizing dates, currencies, and numbers ✅ Using routing and lazy loading translation files for better performance By the end of this video, you'll have the skills to build a robust Vue localization workflow and create apps ready for a global audience. Timecodes: 00:00 Introduction 00:45 Creating and configuring the app 02:35 Adding and configuring vue-i18n plugin 04:30 Performing basic translations 08:15 Using interpolation 09:27 Introducing pluralization 11:25 Working with numbers and currencies 12:35 Localizing date and time 13:45 Extracting translations into JSON files 15:45 Creating a language switcher 21:20 Persisting the chosen locale 23:30 Reading the user's preferred locale 26:20 Displaying the current locale in the URLs 37:20 Adding the beforeEnter hook 30:00 Update the URL after the language is switched 31:30 Adding locale to the links 32:45 Lazy loading translation files 36:30 Preloading translations 38:08 Conclusion Source code: https://github.com/lokalise/lokalise-tutorials/tree/main/vue-3-i18n Blog post: https://lokalise.com/blog/vue-i18n/ Русская версия: https://www.youtube.com/watch?v=G_p-LKuVZkg #vuei18n #vuelocalization #vue #Lokalise #internationalization