Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 217
ImperviousPanda Avatar asked Aug 30 '19 10:08

ImperviousPanda


1 Answers

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';
like image 200
ImperviousPanda Avatar answered Nov 20 '22 19:11

ImperviousPanda