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
.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With