Vue is not defined error

[amustapha]

ReferenceError: Vue is not defined
    at VueComponent.created (vue-datatable.vue?ac0c:165)
    at callHook (vue.common.js?e881:2897)
    at VueComponent.Vue._init (vue.common.js?e881:4562)
    at new VueComponent (vue.common.js?e881:4730)
    at createComponentInstanceForVnode (vue.common.js?e881:4244)
    at init (vue.common.js?e881:4061)
    at createComponent (vue.common.js?e881:5514)
    at createElm (vue.common.js?e881:5462)
    at createChildren (vue.common.js?e881:5588)
    at createElm (vue.common.js?e881:5490)
logError @ vue.common.js?e881:1719
globalHandleError @ vue.common.js?e881:1710
handleError @ vue.common.js?e881:1699
callHook @ vue.common.js?e881:2899
Vue._init @ vue.common.js?e881:4562
VueComponent @ vue.common.js?e881:4730
createComponentInstanceForVnode @ vue.common.js?e881:4244
init @ vue.common.js?e881:4061
createComponent @ vue.common.js?e881:5514
createElm @ vue.common.js?e881:5462
createChildren @ vue.common.js?e881:5588
createElm @ vue.common.js?e881:5490
createChildren @ vue.common.js?e881:5588
createElm @ vue.common.js?e881:5490
createChildren @ vue.common.js?e881:5588
createElm @ vue.common.js?e881:5490
createChildren @ vue.common.js?e881:5588
createElm @ vue.common.js?e881:5490
patch @ vue.common.js?e881:5997
Vue._update @ vue.common.js?e881:2639
updateComponent @ vue.common.js?e881:2767
get @ vue.common.js?e881:3117
Watcher @ vue.common.js?e881:3106
mountComponent @ vue.common.js?e881:2774
Vue$3.$mount @ vue.common.js?e881:8431
Vue$3.$mount @ vue.common.js?e881:10792
init @ vue.common.js?e881:4067
createComponent @ vue.common.js?e881:5514
createElm @ vue.common.js?e881:5462
patch @ vue.common.js?e881:6036
Vue._update @ vue.common.js?e881:2649
updateComponent @ vue.common.js?e881:2767
get @ vue.common.js?e881:3117
run @ vue.common.js?e881:3194
flushSchedulerQueue @ vue.common.js?e881:2956
(anonymous) @ vue.common.js?e881:1815
flushCallbacks @ vue.common.js?e881:1736
Promise resolved (async)
microTimerFunc @ vue.common.js?e881:1784
nextTick @ vue.common.js?e881:1828
queueWatcher @ vue.common.js?e881:3043
update @ vue.common.js?e881:3184
Vue.$forceUpdate @ vue.common.js?e881:2670
(anonymous) @ vue.common.js?e881:8216
wrappedHook @ vue.common.js?e881:2059
invoker @ vue.common.js?e881:2002
(anonymous) @ vue.common.js?e881:7713
(anonymous) @ vue.common.js?e881:314
end @ vue.common.js?e881:7420
(anonymous) @ vue.common.js?e881:7431
setTimeout (async)
whenTransitionEnds @ vue.common.js?e881:7429
(anonymous) @ vue.common.js?e881:7744
requestAnimationFrame (async)
(anonymous) @ vue.common.js?e881:7387
requestAnimationFrame (async)
nextFrame @ vue.common.js?e881:7386
performLeave @ vue.common.js?e881:7737
leave @ vue.common.js?e881:7721
remove$$1 @ vue.common.js?e881:7812
removeAndInvokeRemoveHook @ vue.common.js?e881:5690
removeVnodes @ vue.common.js?e881:5664
patch @ vue.common.js?e881:6078
Vue._update @ vue.common.js?e881:2649
updateComponent @ vue.common.js?e881:2767
get @ vue.common.js?e881:3117
run @ vue.common.js?e881:3194
flushSchedulerQueue @ vue.common.js?e881:2956
(anonymous) @ vue.common.js?e881:1815
flushCallbacks @ vue.common.js?e881:1736
Promise resolved (async)
microTimerFunc @ vue.common.js?e881:1784
nextTick @ vue.common.js?e881:1828
queueWatcher @ vue.common.js?e881:3043
update @ vue.common.js?e881:3184
Vue.$forceUpdate @ vue.common.js?e881:2670
(anonymous) @ index.js?12b5:158
(anonymous) @ index.js?12b5:139
(anonymous) @ index.js?12b5:104
(anonymous) @ Sales.vue?e28b:31
352 @ 0.5d94cfeeacdd17f21b13.hot-update.js:14
__webpack_require__ @ app.js:660
fn @ app.js:86
(anonymous) @ Sales.vue?ea1b:9
(anonymous) @ app.js:2497
__webpack_require__ @ app.js:660
hotApply @ app.js:590
cb @ process-update.js?e13e:66
(anonymous) @ process-update.js?e13e:82
Promise resolved (async)
check @ process-update.js?e13e:81
module.exports @ process-update.js?e13e:42
processMessage @ client.js?7955:251
handleMessage @ client.js?7955:131
handleMessage @ client.js?7955:94

[pstephan1187]

Please provide more information. Specifically, the code where you require the datatable factory and Vue.use it.

[arundaskd]

@pstephan1187 Hi, it seems like there is a missing import

[Vue warn]: Error in created hook: "ReferenceError: Vue is not defined"
found in
---> <Datatable> at node_modules\vuejs-datatable\src\vue-datatable.vue

I added in
import Vue from 'vue'; to vue-datatable.vue
and it works perfectly fine
or
Apart from

import DatatableFactory from "vuejs-datatable"
Vue.use(DatatableFactory)

I needed to add Vue Globally like this
window.Vue = Vue;

Other than that, Great Work 👍 💯

[pstephan1187]

Yes, Vue needs to be accessible globally. The missing import is missing on purpose. With it there, the ES5 distribution will contain the Vue source code and bloat the script. I need to spend more time looking into a better fix for this because it seems to be a recurring theme.

[pstephan1187]

I found a way to fix the "Vue not defined" error without importing Vue and thus not bloating the ES5 distribution.

[shakib609]

I found a workaround to this problem.

In your main.js simply include the DatatableFactory like this

import DatatableFactory from 'vuejs-datatable/src/classes/factory';

Vue.use(new DatatableFactory())