CODEWITHSUNDEEP
vue.jsinternationalizationeslintvuetify.js
Ann Kilzer
Ann Kilzer

Reputation: 1361

Using vuetify with i18n and eslint plugin

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?

Upvotes: 0

Views: 366

Answers (1)

Kael Watts-Deuchar
Kael Watts-Deuchar

Reputation: 4481

{{ $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.

Upvotes: 1

Related Questions