Hello, fellow developers. I am currently working on implementing internationalization in Quasar, using Vue 3 (Composition API) and vue-i18n. My goal is to make internationalization available throughout the entire application, not just within Vue components. However, I keep encountering errors in the process.
Here's how I have configured i18n initialization for Quasar:
I came across the
i18n = langapproach in a blog post
import { boot } from 'quasar/wrappers'
import VueI18n from 'vue-i18n'
const { createI18n } = VueI18n
import messages from '../config/i18n'
let i18n
export default boot(({ app, Vue }) => {
Vue.use(VueI18n)
const lang = createI18n({
locale: 'en',
legacy: false,
messages,
})
i18n = lang
app.use(lang)
})
export { i18n }
In the example below, I import the configuration variable, but I've also tried importing what the export default returns without success:
import { i18n } from './../boot/i18n'
console.log(i18n)
export default {
required: (value) => !!value || i18n.t('errors.rules.required'),
email: (value) => {
return (
/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value) ||
i18n.global.t('errors.rules.email')
)
},
// More translation functions...
}
I have double-checked the path for correctness, so that is not the issue. But translating the object still fails.
Here is the language object for English (en):
export default {
errors: {
rules: {
required: 'Required',
email: 'Invalid email address',
password: 'This password is weak',
// More translations...
},
},
}
This is the version of dependencies I am currently using:
{
"dependencies":{
"@quasar/extras":"^1.16.9",
"quasar":"^2.14.5",
"vue":"^3.3.11",
"vue-i18n":"^9.9.0"
}
}
If anyone has suggestions on how to utilize internationalization outside of Vue components successfully, please share your insights. I've tried various methods but none seem to work as expected.