Using vuetify with i18n and eslint plugin - vue.js

Question

I am using vuetify together with vue-i18n, following the instructions here.
translations.js:
const deDict = require('./i18n/vuetify/de.json');
const enDict = require('./i18n/vuetify/en.json');
export default class Translations {
constructor() {
this.messages = {
de: deDict,
en: enDict,
};
}
}
init.js:
import Translations from './translations';
// Create VueI18n instance with options
const tr = new Translations();
const i18n = new VueI18n({
locale: 'en', // default locale is English
messages: tr.messages, // set locale messages
});
Vue.use(Vuetify, {
lang: {
/* eslint-disable-next-line vue-i18n/no-dynamic-keys */
t: (key, ...params) => i18n.t(key, params),
},
}
const app = new Vue({
i18n,
el: '#app',
data() {
return {
i18n,
};
},
render: h => h(Main),
});
To avoid errors in our growing codebase, I'd like to incorporate the eslint plugin for i18n.
However, vuetify with vue-i18n expects keys to look like this inside the code:
<a #click="buttonAction">
{{ $vuetify.t('$vuetify.components.ActionBtn') }}
</a>
And the en.json (in a separate file) looks like this:
{
"components": {
"ActionBtn": "Click me!"
}
}
but the eslint plugin doesn't recognize that as matching. It wants the code to look like this:
<a #click="buttonAction">
{{ $vuetify.t('components.ActionBtn') }}
</a>
How can I restructure the way I load the json to ensure I can use i18n in vuetify with my linter?

Answer 1

{{ $vuetify.t('$vuetify.components.ActionBtn') }}
This is if you're only using vuetify's built-in internationalization. When combined with vue-i18n you should use $t('components.ActionBtn') along with having the required vuetify messages in your i18n config.