How to fix "TypeError: plugin is undefined" error when using VeeValidate with Vue
Asked Answered
E

1

5

When I add:

Vue.use(VeeValidate);

My Vue page shows up blank with the console error:

TypeError: plugin is undefined

I found the following with the same error:

Vue plugin vee-validate not installing properly

but I am not utilizing the => syntax anywhere in my .vue document.

vee-validate 3.0.3, Vue 2.6.10

Full main.js file:

import Vue from 'vue'
import VeeValidate from 'vee-validate';
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(VeeValidate);

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

In my App.vue file I do include ValidationProvider as a component:

<script>
import CriteriaDataModel from './data-model/criteria-data-model.js';
import UserDataModel from './data-model/user-data-model.js';
import { ValidationProvider } from 'vee-validate';

export default {
  name: 'app',
  data: function() {
    return {
      criteriaModel: CriteriaDataModel,
      completeMessage: null,
      form: {
        user: UserDataModel
      }
    };
  },
  components: {
    ValidationProvider
  }
};
</script>

I also tried changing my Vue initialization to this without it helping:

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

I observed that VeeValidate has many usages of the '=>' syntax (referenced in the other stack overflow as being the problem) in the node_module, but since the intention is to use it for Vue, I question whether that is the problem.

Eboni answered 30/8, 2019 at 10:42 Comment(3)
ValidationProvider is a component which you should register it with Vue.component. Vue.component('ValidationProvider', ValidationProvider)Antiphony
Isn't that equivalent to listing it in the components section of the default exports in the .vue file?Eboni
github it's the source code. It's clear that ValidationProvider is an constructor that return by Vue.extend which you can create a instance with new or register a global component with Vue.componentAntiphony
E
6

I figured this out. The default export for vee-validate seems to be null. It worked after I changed the import to:

import * as VeeValidate from 'vee-validate';
Eboni answered 30/8, 2019 at 12:0 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.