Multi Language Settings

How to add new language? Let add French language in the existing language.

  1. Create de.json file in src/locales folder.

  2. Add new language property in /src/components/nav-bar.vue file.

    languages = [{
    flag: require("~/assets/images/flags/germany.jpg"),
    language: "gr",
    title: "German",
}];
  3. update the below code in the src/i18n.js file. 
    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)
      }
    })
    return messages
  }
  
  export default createI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || 'en',
    legacy: false,
    globalInjection: true,
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
    messages: loadLocaleMessages()
  })

    The translationGr JSON originates from the file located at src/locales/gr/translation.json.

How to add new language? Let add French language in the existing language.

  1. Create de.json file in resources/js/locales folder.

  2. Add new language property in /resources/js/components/nav-bar.vue file.

    languages = [{
    flag: require("~/assets/images/flags/germany.jpg"),
    language: "gr",
    title: "German",
}];
  3. update the below code in the resources/js/i18n.js file. 
    import {createI18n} from 'vue-i18n'
import en from './locales/en.json'
import fr from './locales/fr.json'
import ar from './locales/ar.json'
import es from './locales/es.json'
import zh from './locales/zh.json'

const messages = {
  en,
  fr,
  ar,
  es,
  zh
}

const locale = localStorage.getItem("locale");
const i18n = createI18n({
  locale:  locale || "en",
  fallbackLocale: "en",
  messages: messages
});

export default i18n;

    The translationGr JSON originates from the file located at resources/js/locales/gr/translation.json.

© Skote.