frontend/src/i18n/setup.js

76 lines
1.6 KiB
JavaScript

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import langEN from './lang/en.json'
Vue.use(VueI18n)
export const i18n = new VueI18n({
locale: 'en', // set locale
fallbackLocale: 'en',
messages: {
en: langEN,
},
})
export const availableLanguages = {
en: 'English',
de: 'Deutsch',
}
const loadedLanguages = ['en'] // our default language that is preloaded
const setI18nLanguage = lang => {
i18n.locale = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
}
export const loadLanguageAsync = lang => {
// If the same language
if (i18n.locale === lang) {
return Promise.resolve(setI18nLanguage(lang))
}
// If the language was already loaded
if (loadedLanguages.includes(lang)) {
return Promise.resolve(setI18nLanguage(lang))
}
// If the language hasn't been loaded yet
return import(`./lang/${lang}.json`).then(
messages => {
i18n.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
if (browserLanguage.startsWith('en-')) {
browserLanguage = 'en'
}
if (typeof availableLanguages[browserLanguage] !== 'undefined') {
return browserLanguage
}
return 'en'
}
export const saveLanguage = lang => {
localStorage.setItem('language', lang)
setLanguage()
}
export const setLanguage = () => {
loadLanguageAsync(getCurrentLanguage())
}