CODEWITHSUNDEEP
nuxt.jsvee-validate
Ezrab_
Ezrab_

Reputation: 983

How to install and configure vee-validate (v4) in nuxt?

I'm having a hard time understanding the docs to install this awesome plugin in to nuxt. From what I understand, which I find hard to believe, you have to export all of the rules in a plugin file. I tried to export some of the rules, but nuxt didn't know what the ValidationObserver component was.

Upvotes: 1

Views: 8702

Answers (2)

agm1984
agm1984

Reputation: 17170

I installed vee-validate v3 into Nuxt by doing the following:

npm install --save vee-validate

Add this to 'plugins' section in nuxt.config.js:

plugins: [
    { src: '~/plugins/vee-validate.js', ssr: true },
],

Add this to 'build' section in nuxt.config.js:

build: {
    transpile: ['vee-validate']
}

The transpile section is required to get rid of an error about Unexpected token 'export'. It does something related to ES6 and Babel to perhaps pre-transpile the library before loading it into Nuxt.

Here is what my vee-validate.js file looks like in the plugins directory:

import { extend, localize } from "vee-validate";
import { required, email, min } from "vee-validate/dist/rules";

const dictionary = {
    en: {
        messages: {
            required: () => '* Required',
        },
    },
};

// Install required rule.
extend("required", required);

// Install email rule.
extend("email", email);

// Install min rule.
extend("min", min);

localize(dictionary);

Upvotes: 5

logaretm
logaretm

Reputation: 1435

VeeValidate v4 is not compatible with Vue 2.x, and that means it won't work with Nuxt 2.x as vee-validate (v4) is only targeting Vue 3 support.

Generally, with vee-validate v3 you do need to register your rules in a plugin file, and register the validation-observer and validation-provider globally or import them when needed.

Upvotes: 3

Related Questions