Vee Validate complains about errors not defined

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

[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')