VeeValidate errors is not defined when importing into custom plugin

Question

I'm building a custom Vue JS plugin using the vue create CLI. I've imported my various packages, however, I'm getting an error when trying to use custom settings with VeeValidate.

plugin.js

/*
 * NOTE:
 *   This file is plugin stub for main.js
 */

// Import required packages
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'

// Import custom LES form styling
import './assets/scss/les-application.scss'

// Import our plugin
import plugin from './index'

/* Vue Validation */
const config = {
  fieldsBagName: 'fields',
  errorBagName: 'errors',
  classes: true,
  strict: false,
  classNames: {
    valid: '',
    invalid: 'is-invalid'
  },
  events: 'change|blur',
  validity: false,
  inject: false,
  aria: true,
  delay: 0
}

Vue.use(require('vue-moment'))
Vue.use(VueResource)
Vue.use(VeeValidate, config)
Vue.use(plugin)

// Custom validation rules


/*
 * NOTE:
 *   If you want Vue instance of main.js to import something in your plugin as a Vue option,
 *   you need to export it here.
 */
// export default plugin

main.js

import Vue from 'vue'
import App from './App.vue'
import './plugin'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Errors:

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.

and

Cannot read property 'has' of undefined

I'm trying to figure out what I'm missing from my configuration, if I remove the VeeValidate config from plugin.js it then uses the default VeeValidate options and is working.

Where's the code for the component that actually uses VeeValidate? — Ryley
Right right, can we see the relevant code from MyComponent.vue then? — Ryley
@RyanHolton i think it's because you disabled the automatic injection. You need to request a new validator scope in every component where you need validations — Sovalina
@Sovalina How would I set this, I've read the docs, but am confused where that would go in my code snippets above — Ryan H

Katherine R Katherine R · Accepted Answer · 2020-02-21T23:25:23

It is the inject: false, in the validation config causing this. if you set this to true or do not set it, the errors object should be injected in your component without errors.

The inject:false stops automatic injections in vee-validate 2 http://vee-validate.logaretm.com/v2/concepts/injections.html

This changes with vee-validate 3 where ValidationObserver and ValidationProvider need to be used https://logaretm.github.io/vee-validate/migration.html#migrating-from-2-x-to-3-0

VeeValidate errors is not defined when importing into custom plugin

1 Answers