0

I'm trying to use the vee-validate plugin for form validation without using npm install --save, so I copied the files in the dist folder into my project, but for some reason I can't use the plugin properly.

This is how I call the plugin as a script in my pug file register.pug:

block main-content
  .article#register
  form
    input(
      v-model="email"
      v-validate.initial="'required|email'"
      :class="{'input': true, 'is-danger': errors.has('email') }")
block page-specific-scripts
  script(data-minjs-group="register" src="/libs/vue/vee-validate.js")
  script(data-minjs-group="register" src="/scripts/onboarding/register.js")

And this is register.js:

(function(doc, win) {
  'use strict';

  var register = new Vue({ 
    el: '#register',
    data: {
      email: ''
    }
  });
})(document, window);

When I reload the page, I'm getting this message: "Property or method "errors" is not defined on the instance but referenced during render." which shouldn't be the case as I believe that errors is a built-in property of the vee-validate plugin.

Bargain23
  • 1,863
  • 3
  • 29
  • 50
  • Same problem. I tried on vee-validate version 3.1.3 and it didnt work. But I tried with version 2.0.6 and it worked for me. – Abdullah Ilgaz Dec 10 '19 at 10:00

1 Answers1

5

You probably haven't added this.

Vue.use(VeeValidate);

(Add it before new Vue)

Jacob Goh
  • 19,800
  • 5
  • 53
  • 73
  • I'm not allowed to use import statements in my script. Hence, I cannot register vee-validate using Vue.use. I find it bizzare, since I'm using another plugin `vue-infinite-scroll` and installed it in the same manner, and it simply auto-registered the directive without additional configurations. – Bargain23 Mar 16 '18 at 01:55
  • `vee-validate.js` will create a global variable called `VeeValidate` in your browser environment, just like `Vue` is a global variable. As long as your do `Vue.use(VeeValidate)` after `vee-validate.js` is loaded, it will work. Different plugins require different usage. This is normal. – Jacob Goh Mar 16 '18 at 01:59
  • Thanks! However, how would I be able to use VeeValidate's methods in my register.js file? `VeeValidate.extend` generates an error that says it is not a function. How so? – Bargain23 Mar 16 '18 at 04:48
  • 1
    what you want is probably `VeeValidate.Validator.extend` – Jacob Goh Mar 16 '18 at 04:51