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:

Automate Repetitive Tasks With The Pinion Code Generator

Automate repetitive tasks with the Pinion code generator

Discover how the Pinion code generator automates repetitive tasks and boosts productivity compared to tools like Yeoman, Plop, and Hygen.

Joseph Mawa
May 21, 2024 ⋅ 7 min read
Exploring Hurl An Alternative To Postman

Exploring Hurl, a command line alternative to Postman

Hurl is an excellent Postman alternative that improves the DX of working with APIs through the command line.

Nwani Victory
May 20, 2024 ⋅ 8 min read
How To Integrate WunderGraph With Your Frontend Application

How to integrate WunderGraph with your frontend application

Unify and simplify APIs using WunderGraph to integrate REST, GraphQL, and databases in a single endpoint.

Boemo Mmopelwa
May 17, 2024 ⋅ 5 min read
Understanding The Latest Webkit Features In Safari 17.4

Understanding the latest Webkit features in Safari 17.4

The Safari 17.4 update brought in many modern features and bug fixes. Explore the major development-specific updates you should be aware of.

Rahul Chhodde
May 16, 2024 ⋅ 10 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