A guide to implementing vue-i18n in Vue class components

Question

A guide to implementing vue-i18n in Vue class components

Take a look at this code snippet:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomeComponent extends Vue {
  public someText = this.$t('some.key')
}

An error is being thrown:

[Vue warn]: Error in data(): "TypeError: i18n is undefined"

I have made sure to initialize Vue with Vue.use(VueI18n) and new Vue({ /* ... */, i18n }). The initialization of the i18n object looks like this:

new VueI18n({
  locale: DEFAULT_LOCALE, // imported
  fallbackLocale: 'en',
  messages // imported
})

Translations seem to be working fine unless they are immediately called, such as in templates or component methods.

This particular issue regarding vue-i18n suggests that there might be an initialization problem.
A workaround could involve utilizing methods and translating only within templates. Nevertheless, there are instances where immediate calls cannot be avoided, for instance when dealing with Vuetify input rules.

someRule = [(v) => !!v || this.$t('field.must_not_be_empty')]

These rules are triggered instantly, even with lazy-validation activated on Vuetify forms.

I have identified two potential solutions:

Finding a way to bypass the Vuetify rules system and directly include a string for translation in the template;
Solving the immediate availability issue of $t.

However, I have not been successful in implementing either option.

Is there any known solution to tackle this issue?

typescript vue.js vuetify.js vue-i18n vue-class-components

Answer 1

Answer №1

The issue arose from the improper utilization of the keyword this.
Essentially, Vue requires a highly specific execution context that differs from what is typically available in the main context of a new class.

The remedy turns out to be straightforward: Implement a getter.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomeComponent extends Vue {
  public get someText () { return this.$t('some.key') }
}

Answer 2

The issue arose from the improper utilization of the keyword this.
Essentially, Vue requires a highly specific execution context that differs from what is typically available in the main context of a new class.

The remedy turns out to be straightforward: Implement a getter.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomeComponent extends Vue {
  public get someText () { return this.$t('some.key') }
}

Answer 3

Answer №2

The solution of placing the error message in a getter did not resolve my issue within the Vuetify input rules setup. I encountered the following error:

Error in beforeMount hook: "TypeError: Cannot read property '_t' of undefined"

I found two alternative ways to make it work:

Utilizing a getter for the entire rules array:

get someRules() {
    return [
        (v) => !!v || this.$t('field.must_not_be_empty')
    ];
}

Including the rules within the @Component decorator:

@Component({
    data() {
        return {
            someRules: [
                (v) => !!v || this.$t('field.must_not_be_empty')
            ]
        };
    }
})
export default class SomeComponent extends Vue {
...
}

Answer 4

The solution of placing the error message in a getter did not resolve my issue within the Vuetify input rules setup. I encountered the following error:

Error in beforeMount hook: "TypeError: Cannot read property '_t' of undefined"

I found two alternative ways to make it work:

Utilizing a getter for the entire rules array:

get someRules() {
    return [
        (v) => !!v || this.$t('field.must_not_be_empty')
    ];
}

Including the rules within the @Component decorator:

@Component({
    data() {
        return {
            someRules: [
                (v) => !!v || this.$t('field.must_not_be_empty')
            ]
        };
    }
})
export default class SomeComponent extends Vue {
...
}

A guide to implementing vue-i18n in Vue class components

Answer №1

Answer №2

Similar questions

Sharing an object's attributes as props in Vuejs

What is the best way to scan through Vue and React component-based web applications?

Hydration has finished, but there are some discrepancies - Utilizing Ascii art within a vue component

What is the best way to conceal a paragraph with v-if within the context of Vuex?

Can someone please point me in the right direction to locate a Typescript project within Visual Studio

Array filtering functions similarly to marketplace filtering tools

When accessing nested objects in Props in Vue.js, an error may occur if the property of null/undefined

Encountering an error when trying to insert a row in Laravel 5 with a foreign

Steps for sorting items from a list within the past 12 hours

The Application Insights Javascript trackException function is giving an error message that states: "Method Failed: 'Unknown'"

When using Vue with CSS3, placing an absolute positioned element within a relative wrapper can cause issues with maintaining the

What is the best way to remove Vuetify and Vue from the build process?

Angular Error: Unable to access properties of null (specifically 'validators')

How to activate a button only if the specified conditions are met using VueJS 3

Enhance the MUI palette by incorporating TypeScript, allowing for seamless indexing through the palette

Having trouble resolving errors in Visual Studio Code after failing to properly close a parent function? Learn how to fix this issue

Tips for utilizing global functions in VUE 2 CLI crowd

How to retrieve a value from a base64-decoded string in Angular 6?

Having trouble accessing props from the Vue root within a component template - any ideas why?

Update individual component based on selected value