Preetish HS
Feb 3, 2020 ⋅ 8 min read

Localization in Vue.js with vue-i18n

Preetish HS Freelance web developer, digital nomad, and design enthusiast. You can find me online at preetish.in.

Recent posts:

Zoneless Change Detection In Angular 18

Zoneless change detection in Angular 18

Angular v18 introduced an experimental feature called zoneless change detection, eliminating the need for Zone.js.

Yan Sun
Jul 15, 2024 ⋅ 5 min read
Developing Cross Platform Apps With Bun Version 1.1

Developing cross-platform apps with Bun v1.1

For some years now, developers have faced many performance challenges while using traditional JavaScript runtimes like Node.js and Deno. Even […]

Clara Ekekenta
Jul 12, 2024 ⋅ 6 min read
Exploring The Magic Of Runes In Svelte 5

Exploring the magic of runes in Svelte 5

See how to use Svelte 5’s new runes system to declare reactive states and compare them to the existing approach to reactivity in Svelte 4.

Yashodhan Joshi
Jul 11, 2024 ⋅ 7 min read
Building UIs With Franken UI, A Shadcn Alternative

Building UIs with Franken UI, a Shadcn alternative

Explore Franken UI, an open source library of pre-built UI components that takes inspiration from Shadcn UI’s design principles.

Jude Miracle
Jul 10, 2024 ⋅ 11 min read
View all posts

4 Replies to "Localization in Vue.js with vue-i18n"

  1. Hi Preetish! I’m following along with your tutorial and after making the changes to App.vue and HelloWorld.vue and attempting to run the app, I’m getting the error ‘languageArray:’ is defined but never used. Do you know why this might be?

  2. Hi,
    Thank you very much for such detailed article and knowledge share.

    I’ve made a small change to cehckDefaultLanguage because forEach continues to iterate despite already having a match.

    function checkDefaultLanguage () {
    let matched = null
    const supportedLanguages = Object.getOwnPropertyNames(loadLocaleMessages())
    matched = supportedLanguages.find(lang => lang === navigator.language)
    if (!matched) {
    const navigatorLanguagePartials = navigator.language.split(‘-‘)[0]
    matched = supportedLanguages.find(lang => lang === navigatorLanguagePartials)
    if (!matched) {
    const navigatorLanguagePartials = navigator.language.split(‘-‘)[0]
    matched = supportedLanguages.find(lang => lang.split(‘-‘)[0] === navigatorLanguagePartials)
    return matched

Leave a Reply