import { createI18n } from 'vue-i18n' import langEN from './lang/en.json' export const i18n = createI18n({ locale: 'en', // set locale fallbackLocale: 'en', globalInjection: true, messages: { en: langEN, }, }) export const availableLanguages = { en: 'English', 'de-DE': 'Deutsch', 'de-swiss': 'Schwizertütsch', 'ru-RU': 'Русский', 'fr-FR': 'Français', 'vi-VN': 'Tiếng Việt', 'it-IT': 'Italiano', 'cs-CZ': 'Čeština', } const loadedLanguages = ['en'] // our default language that is preloaded const setI18nLanguage = lang => { i18n.global.locale = lang document.querySelector('html').setAttribute('lang', lang) return lang } export const loadLanguageAsync = lang => { if ( // If the same language i18n.global.locale === lang || // If the language was already loaded loadedLanguages.includes(lang) ) { return setI18nLanguage(lang) } // If the language hasn't been loaded yet return import(`./lang/${lang}.json`).then( messages => { i18n.global.setLocaleMessage(lang, messages.default) loadedLanguages.push(lang) return setI18nLanguage(lang) }, ) } export const getCurrentLanguage = () => { const savedLanguage = localStorage.getItem('language') if (savedLanguage !== null) { return savedLanguage } let browserLanguage = navigator.language || navigator.userLanguage for (let k in availableLanguages) { if (browserLanguage[k] === browserLanguage || k.startsWith(browserLanguage + '-')) { return k } } return 'en' } export const saveLanguage = lang => { localStorage.setItem('language', lang) setLanguage() } export const setLanguage = () => { loadLanguageAsync(getCurrentLanguage()) }