VeeValidate 3.1 how to add rules on external file vs in each component

Question

I am able to use the rules fine but I have to have them in each component, which is not DRY and just cluttered. I would like to add rules.js file for validation, but in the file you just extend a class so I am unsure how to implement this in terms of exporting and importing the file into the components, or making them global, which I would like to do since I have many many forms in the application.

If it were a variable I could import it but I am drawing a blank on how to import these rules that extend vee-validate.

Answer 1

Create a vee-validate.js file:

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

// Install rules
extend("required", required);

Import that file in your entry file, typically main.js if you are using vue-cli:

import Vue from 'vue';
import App from './App';
import './vee-validate';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App)
});

Or if you are using Nuxt.js, create a plugins/vee-validate with the same contents and add it to nuxt.config.js plugins array.