CODEWITHSUNDEEP
vue.jsvuetify.jsvee-validate
Alex Hunter
Alex Hunter

Reputation: 260

How to configure vee-validate with i18n in vuetify?

I want custom localization (en,ar) in my vuetify project. This are my files. divided in 3 main files.

Component.vue

import { ValidationProvider, ValidationObserver } from 'vee-validate';
  components: {
    ValidationProvider,
    ValidationObserver,
  },

<validation-observer
  ref="observer"
  v-slot="{ invalid }"
>
  <form @submit.prevent="submit">
    <validation-provider
      v-slot="{ errors }"
      name="Name"
      rules="required"
    >
      <v-text-field
        v-model="name"
        :counter="10"
        :error-messages="errors"
        label="Name"
        required
      ></v-text-field>
    </validation-provider>
    <v-btn
      class="mr-4"
      type="submit"
      :disabled="invalid"
    >
      submit
    </v-btn>
  </form>
</validation-observer>

localization.js

import Vue from 'vue';
import { extend, localize } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', required);

// Install English and Arabic localizations.
localize({
  en: {
    messages: en.messages,
    names: {
      name: 'E-mail Address',
    },
    fields: {
      name: {
        required: 'is too short, you want to get hacked?',
      },
    },
  },
  ar: {
    messages: ar.messages,
    names: {
      name: 'البريد الاليكتروني',
    },
    fields: {
      name: {
        required: 'كلمة السر قصيرة جداً سيتم اختراقك',
      },
    },
  },
});
localize(ar);

main.js

import "./common/validations";

If i change localize(ar), it only shows english, is there something im missing? (Later ill be changing that localize with a button.

Upvotes: 2

Views: 1285

Answers (1)

logaretm
logaretm

Reputation: 1435

You should mention which version of vee-validate are you using. I assume it's v3.

As per the documentation, the root localization object must contain the keys of the language if you are going to install locales without activating them, so:

// ⛔️ Doesn't work
localize(ar);

// ✅ installs locale but doesn't activate it
localize({ ar });

// ✅ installs and activates locale
localize('ar', ar);

Check for more details here

Upvotes: 1

Related Questions