@benoitranque Thank you for the link. I am new not only to quasar but also vue and all its underpinnings…
I managed to get it working
The thing is, since quasar uses “en-us” and “en-uk” and not only “en” like in the default example, I had to split “en” in “-us” and “-uk” versions inside src/i18n and then convert from snake case to camel case in my language selection component (cf. snakeToCamel() ).
// language selection component
<template>
<q-select
stack-label="Language"
:options="[
{ label: 'English (US)', value: 'en-us' },
{ label: 'English (UK)', value: 'en-uk' },
{ label: 'Français', value: 'fr' },
{ label: 'Deutsche', value: 'de' },
{ label: 'Español', value: 'es' }
]"
v-model="lang"
/>
</template>
<script>
export default {
data () {
return {
lang: this.$q.i18n.lang
}
},
watch: {
lang (lang) {
// Update application specific i18n
this.$i18n.locale = snakeToCamel(lang)
// Update quasar components i18n
// (dynamic import, so loading on demand only)
import(`quasar-framework/i18n/${lang}`).then(lang => {
this.$q.i18n.set(lang.default)
})
}
}
}
function snakeToCamel (str) {
return str.replace(/(-\w)/g, m => { return m[1].toUpperCase() })
}
</script>`
And set “en-us” (ie. “enUs”) as default in the ars/plugins/i18n.js :
// src/plugins/i18n.js
import VueI18n from 'vue-i18n'
import messages from 'src/i18n'
export default ({ app, store, Vue }) => {
Vue.use(VueI18n)
// Set i18n instance on app
app.i18n = new VueI18n({
locale: 'enUs',
fallbackLocale: 'enUs',
messages
})
}
It works but is this the correct way to do this?
Cheers