CODEWITHSUNDEEP
vue.jsvee-validate
Leos Literak
Leos Literak

Reputation: 9474

Vue l18n $t undefined

I can use $t in components:

:label="$t('sign-up.terms-label')"

and in javascript:

 case 'email':
   this.errors.push(this.$t('sign-up.email-exists')); break;

But I cannot use it in extend:

import { extend, localize, ValidationObserver } from 'vee-validate';
localize({
  cs: {
   names: {
     email: $t('sign-up.email-label'),

EsLint says that the function is undefined.

I want to localize the field names for vee-validate as described here:

https://logaretm.github.io/vee-validate/guide/localization.html#using-the-default-i18n

I18N is defined this way:

Vue.use(VueI18n);

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'cs',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'cs',
  messages: loadLocaleMessages(),
});

Upvotes: 1

Views: 2151

Answers (2)

Ryley
Ryley

Reputation: 21226

You can call extend from the created() method, at which point you will have access to this.$t.

created() {
  localize({
    cs: {
     names: {
       email: this.$t('sign-up.email-label'),
  //...
}

Upvotes: 1

Estus Flask
Estus Flask

Reputation: 222626

There's an error because $t isn't defined in this scope.

As the guide shows, $t should be referred as a method on vue-i18n instance outside Vue components.

If it's defined in another module, it should be imported from a module where vue-i18n instance was exported from:

import i18n from './i18n';

...

localize({
  cs: {
   names: {
     email: i18n.$t('sign-up.email-label'),
     ...

Upvotes: 2

Related Questions