CODEWITHSUNDEEP
vue.jsdatatablesvuejs2vue-component
Fabul
Fabul

Reputation: 166

Vuejs Cannot read property 'use' of undefined error

I'm trying to integrate a Datatable plugin (https://www.npmjs.com/package/vuejs-datatable) in my Vue application and I'm getting an error in my console.

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (vuejs-datatable.js?b015:1)
    at Object.eval (vuejs-datatable.js?b015:1)
    at eval (vuejs-datatable.js:4)
    at Object../node_modules/vuejs-datatable/dist/vuejs-datatable.js (app.js:10170)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (selector.js?type=script&index=0!./src/views/tables/data-table.vue:2)
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/tables/data-table.vue (app.js:1438)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)

My dataTable.vue file: 

<template lang="html">

  <section class="data-table">
   <datatable :columns="columns" :data="rows"></datatable>
  </section>

</template>

<script lang="js">
import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable'
export default {
  name: 'DatatablePage'
}
Vue.use(DatatableFactory)
</script>

And whenever i try to use 'Vue.use(PluginName)' when integrating a plugin, i get the similar error. I'm new to VueJS. Is there anything i need to do ?

Upvotes: 4

Views: 14355

Answers (3)

akuiper
akuiper

Reputation: 214957

You need to add plugin before your main Vue instance is initialized; See using vue plugins here, which says:

Use plugins by calling the Vue.use() global method. This has to be done before you start your app by calling new Vue().

For your case, move

import Vue from 'vue'
Vue.use(DatatableFactory)

to your main.js, so it looks like:

import Vue from 'vue'
Vue.use(DatatableFactory)

// some other code

new Vue({
...
})

Upvotes: 3

Nodira
Nodira

Reputation: 666

I faced the same error in my vue-app. 

import Vue from 'vue';
import VueRouter from 'vue-router';
...some more imports here....

Vue.use(VueRouter);

...

The error was cannot read property 'use' of undefined. Which means, it had a problem with reading Vue. I checked my package.json and package-lock.json (for whether I installed in my local). Everything seemed ok. I had both Vue and Vue-router.

Deleting node_modules and re-installing worked for me.

Upvotes: 0

PeterG
PeterG

Reputation: 782

Adding the following in weback.config.js seemed to do the trick:

module.exports = {
    resolve: {
        alias: {
            ...
            'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js',
            ...
        }
    },
}

Based on discussion here:

https://github.com/pstephan1187/vue-datatable/issues/50

Upvotes: 2

Related Questions