Foolproofing and trigger error, when locale is not set.
hekep opened this issue · comments
Clear and concise description of the problem
Quasar 2.x
In src/boot/i18n.js
we have
import { boot } from "quasar/wrappers";
import { createI18n } from "vue-i18n";
// to check https://vue-i18n.intlify.dev/guide/advanced/lazy.html
// Create I18n instance
const i18n = createI18n({
locale: "fi", // Default Language
legacy: false, // comment this out if not using Composition API
allowComposition: true, // https://vue-i18n.intlify.dev/guide/migration/vue3
// messages,
messages: {
en-US: {
isoName: "en-US",
isoNative: "English (US)",
"Select Client": "Select English/ US Organisaatio",
"Napoleon Demo": "en-us / index DEMO",
"Select Language": "Select Language",
},
fi: {
isoName: "fi",
isoNative: "Suomi",
"Select Client": "Valitse Organisaatio",
"Napoleon Demo": " fi index DEMO",
"Select Language": "Valitse kieli",
}
}
});
export default boot(({ app }) => {
app.use(i18n); // this enables useI18n() later on
app.config.globalProperties.$i18n = i18n;
console.log('src boot i18n.js ,app.use(i18n)', app);
});
export { i18n };
in layouts/MainLayout.vue
we have
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-select
v-model="locale"
:options="localeOptions"
:label="t('Select Language')"
dense
dark
borderless
emit-value
map-options
options-dense
style="min-width: 150px"
/>
</q-header>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script setup>
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { i18n } from "boot/i18n";
const $q = useQuasar();
const { t, locale } = useI18n();
const localeOptions = [
{ value: "fi", label: "Finnish" },
{ value: "en-US", label: "English" },
];
watch(locale, (val) => {
i18n.global.locale.value = val;
// dynamic import, so loading on demand only
import(
/* webpackInclude: /(fi|en-US)\.js$/ */
"quasar/lang/" + val + ".js"
).then((locale) => {
$q.lang.set(locale.default);
});
});
Notice that the select box has en_US
but there is no such locale. There is en-US
.
Suggested solution
Error should be triggered when user tries to set invalid, unavailable locale.
Alternative
No response
Additional context
No response
Validations
- Read the Contributing Guidelines
- Read the Documentation
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Notice that the select box has en_US but there is no such locale. There is en-US.
I'm not sure where en_US
is used in your example, if you want to make sure only existing locales are used you could use the availableLocales
property to either limit the options or check if the selected option is included.
See the component example on this page of the docs: https://vue-i18n.intlify.dev/guide/essentials/scope.html#global-scope-1 for reference.
As for why it's possible to set the locale without it throwing an error, I'm not sure, perhaps there are use cases in which this would be fine? 😅
Notice that the select box has en_US but there is no such locale. There is en-US.
As for why it's possible to set the locale without it throwing an error, I'm not sure, perhaps there are use cases in which this would be fine? 😅
May be it is falling back to the first default language, right now I do not have 3 languages to test. It should at least write some console.log(...) or something.