How to detect the browser language in javascript


How to detect the browser language in javascript

How to detect the browser language in javascript in just a line of code. The method is working on all major browser

const language = navigator.language || navigator.userLanguage;
// en-US

If you need only the two letters:

const language = (navigator.language || navigator.userLanguage).substr(0, 2)
// en

How to change the language in browser in Vue 3 with i18n

This vue app example use API Composition. An working example on QR Code Contact

src/i18n.js

import { createI18n } from 'vue-i18n';

function loadLocaleMessages() {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key).default;
    }
  });
  return messages;
}

export default createI18n({
  legacy: false,
  globalInjection: true,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
});

src/components/LanguageSelector.vue

<template>
  <div class="language-selector">
    <h3></h3>
    <img :src="imageFlag" alt="" />
    <select v-model="$i18n.locale">
      <option v-for="(lang, i) in langs" :key="`lang-${i}`" :value="lang">
        
      </option>
    </select>
  </div>
</template>
<script setup>
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';

const langs = ['en', 'ro'];
const { locale, t } = useI18n();

onMounted(() => {
// detect the language of browser
  i18n.global.locale.value = (navigator.language || navigator.userLanguage).substr(0, 2);
});

// eslint-disable-next-line import/no-dynamic-require, global-require
const imageFlag = computed(() => require(`@/assets/images/${locale.value}-flag.png`));
</script>
<style>
.language-selector {
  display: flex;
  align-items: center;
}

img {
  margin-left: 10px;
  margin-right: 10px;
}

select {
  width: 75px;
  line-height: 49px;
  height: 38px;
  font-size: 22px;
  outline: 0;
}
</style>
<i18n>
{
  "en": {
    "language": "Language",
  },
  "ro": {
    "language": "Limba",
  }
}
</i18n>

Newsletter


Related Posts

Managerflota idea validation

Managerflota idea validation thread. Manage the car hailing business in one web app.

Generate hexagons in JS based on center coordinates and radius

How to generate hexagons in javascript based on the center point coordinates and radius length

How to generate referral codes in javascript

How to generate referral codes in javascript very fast with less code

Loop over directories in bash and execute commands

How to loop over directories in bash and execute multiple commands

How to launch a 6 figures startup with 0$ investment

Are you curious how to launch a startup in the fast and effective way? Here's not the answer, but you can understand how to achieve it

Get your Jenkins Passwords from secrets

How to get your Jenkins passwords from your secrets credentials. Follow this simple tutoriale and find your password or ssh private key.

How to cold email

How to cold email - a practical guide about how to use cold email in your activity as a CEO of a software agency or startup owner.

Linux disk space alerts on Discord

Linux disk space alerts. Check your space and be responsible with your project. Take care of your space and don't crack the project.

Git clone private repo in docker

A simple how to guide to use git clone of a private repository inside docker container. With vuejs / nodejs app.

You don't need a macbook pro to be a pro

You don't need a macbook pro to be a pro! You need a laptop and internet connection, and a brain, but you already have it