CODEWITHSUNDEEP
vue.jsvee-validate
user3351236
user3351236

Reputation: 2538

vee-validate - How to add rules in external file

I am not able to add rules in external files.

If I use the code below, I got this error Uncaught ReferenceError: required is not defined

import Vue from 'vue'

import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend( 'required', required );

Vue.component( 'ValidationObserver', ValidationObserver );
Vue.component( 'ValidationProvider', ValidationProvider );

When I move the code into the component, the code starts working. What am I doing wrong?

import {  extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend( 'required', required );

Upvotes: 1

Views: 1551

Answers (1)

logaretm
logaretm

Reputation: 1435

vee-validate rules are evaluated lazily so they can be extended at any time as long as the ValidationProvider didn't invoke it yet as a result of user interaction.

I think you just misplaced things when trying to tidy things up. You can have a vee-validate.js setup file to add all your rules in:

// vee-validate.js
import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', required);

// other rules ....

In your main.js you could then import vee-validate components and register them, but don't forget to import the vee-validate.js setup file:

// main.js
import Vue from 'vue'
import { ValidationObserver, ValidationProvider } from 'vee-validate';
import './vee-validate';

Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

That should allow you to use ValidationProvider and ValidationObserver anywhere in your components with the rules defined in vee-validate.js

Upvotes: 1

Related Questions