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

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

Free templates for startup

Free HTML templates for startup or a new project. A complete list with free resources to build your next startup's website and gain the traction to the sky.

What I learned to never do in a presentation meeting

What I learned to never do in a presentation meeting. I had a very bad meeting experience with a gateway provider.

Startup graveyard is a series of killed projects that made millions in revenue per year

Startup graveyard is a series of killed projects that made millions in revenue per year. Just watch their graveyard and do it your own. What better validation do you expect.

How do you detect Credit card type based on the number?

How do you detect Credit card type based on the number using JavaScript? Simple solution using only code, no library required.

Download files in Javascript from Node.js server

How to download files in Javascript, either you use Vue.js, React, Angular, jQuery, or Vanilla JS. On the backend side, we run on Node.js using Express.js.

What books to read

The list of books I read. I decided one year ago to challenge myself and read as many books as I can this year. Take a look at this article and find all of them.

Startup tools for a better version

Are you a startup founder and are you looking for startup tools like invoice, planning or just making money with much automation? Check this article, from founder to founders.

How to use express validator?

How to use express validator through full examples. I found express validator very powerful, but having a poor documentation.