Vee-validate: Vee Validate complains about errors not defined

[sts-ryan-holton]

I'm trying to install Vee Validate into my Nuxt JS v2.6.3 application. I'm using Nuxt JS in universal mode, and have added a vee-validate.js plugin file in the plugins folder, the contents of this file are:

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate, { inject: false });

I have then included this in my nuxt.config.js file using the server mode for this file:

plugins: [
  ...
  { mode: 'server', src: '@/plugins/vee-validate' }
  ...
]

Then, in my page, but I have also tried a component file as well, I've got a simple input setup with validation:

pages/apply.vue

<div class="form-group mb-0" v-if="loaded">
  <label class="form-label" for="AppLoanPurposeOther">Please tell us the reason for your loan:</label>
  <input v-validate="'required'" v-bind:class="this.errors.has('data[ApplicationPayday][AppLoanPurposeOther]') ? 'is-invalid' : ''" name="data[ApplicationPayday][AppLoanPurposeOther]" id="AppLoanPurposeOther" class="form-control form-control-lg" type="text">
</div>

Unfortunately, with this setup I get the following console error:

Property or method "errors" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

This is rather frustrating, as it is included in the project, I have Vee Validate version 2.2.7, and have tried switching the mode of the Vee Validate JS file, I've tried using: inject: true and inject: false, with little luck.

What am I missing?

[logaretm]

inject: false removes the error messages from Vue instances.

You need to inject the instance yourself like this:

export default {
  $_veeValidate: {
    validator: 'new'
  }
};

This is documented here

[logaretm]

I suggest you give ValidationProvider a try, it is much easier to deal with than the directive.

[sts-ryan-holton]

@logaretm Unfortunately, this doesn't work, I've removed the inject option, and have added the veeValidate option as you suggested:

<script>
import moment from 'moment'

export default {
  $_veeValidate: {
    validator: 'new'
  },
  data () {
    return {
      ...
    }
  },
  created () {
    ...
  }
}
</script>

[logaretm]

Try to omit the this in your bindings so it looks like this:

v-bind:class="errors.has('data[ApplicationPayday][AppLoanPurposeOther]')

[jordanboston]

@logaretm How would resolve this in vue-class-components?

export default { $_veeValidate: { validator: 'new' } };

I am unable to kill these errors: "Property or method "errors" is not defined on the instance but referenced during render." It also seems that using this rename to resolve property conflicts does not work:
errorBagName: 'otherNameForErrors'

Nevermind, installing this as a global plugin _Vue.use(VeeValidate)_ instead of in components solved the issue for me.

[vincent-kean]

@logaretm How would resolve this in vue-class-components?

export default { $_veeValidate: { validator: 'new' } };

I am unable to kill these errors: "Property or method "errors" is not defined on the instance but referenced during render." It also seems that using this rename to resolve property conflicts does not work:
errorBagName: 'otherNameForErrors'

Nevermind, installing this as a global plugin _Vue.use(VeeValidate)_ instead of in components solved the issue for me.

Can you show me how? I'm having this issue too.

[jordanboston]

@vincent-kean I ended up installing this component globally for my app and using a different name for the errors.

import VeeValidate from 'vee-validate'

Vue.use(VeeValidate, { errorBagName: 'vErrors' })

Then using that throughout my app worked without those errors.

:show="vErrors.first('password')">{{ vErrors.first('password')

[vincent-kean]

Hi @jordanboston, thanks for response. I use it as a plugin in my Nuxt app and it still says Property or method "vErrors" is not defined

here is my plugin

import Vue from "vue";
import * as VeeValidate from "vee-validate";
Vue.use(VeeValidate, { errorBagName: "vErrors" });

any comments?

[jordanboston]

Not sure when it comes to Nuxt, haven't tried that setup, sorry.
You will likely have to dig around docs and other places to get more info.

https://logaretm.github.io/vee-validate/guide/rules.html#importing-rules-in-nuxt-js