Looking to localize messages separately for each component? Check out this example for Vue 2. But how can it be done for Vue 3 and Vuetify 3? Here's what I've tried:
package.json
"dependencies": {
"@mdi/font": "6.5.95",
"core-js": "^3.8.3",
"roboto-fontface": "*",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0",
"vue-i18n": "^9.1.2",
"vue-router": "^4.0.3",
"vuetify": "npm:@vuetify/nightly@next",
"vuex": "^4.0.0",
"webfontloader": "^1.0.0"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0", <--- This one is used for Vue 2.
...
My component.vue:
<template>
<v-card-actions>
<v-tooltip left>
<template v-slot:activator="{ props }">
<v-btn v-bind="props">
<v-icon size="25">mdi-home</v-icon>
</v-btn>
</template>
<span>{{ $t('hello') }}</span>
</v-tooltip>
</v-card-actions>
</template>
<i18n>
{
"en": {
"hello": "Hello, world!"
},
"ru": {
"hello": "Привет, мир"
}
}
</i18n>
And main.ts:
const app = createApp(App)
installI18n(app)
const i18n = createI18n({
locale: 'en',
messages: {
}
})
app
.use(i18n)
.use(vuetify)
.mount('#app')
However, after running my component, the tooltip doesn't display Hello, world!. Any suggestions on making it work?
EDIT: Tried using @intlify/vue-i18n-loader instead of @kazupon/vue-i18n-loader, but no luck. Test project available on github