Weird "Vue is not defined" error ...

[lee-alderdice]

Hi,

I am registering the component as per the docs and importing Vue as per my other components but getting the error "Error in created hook: "ReferenceError: Vue is not defined".

Below is the complete .vue file.

Any help greatly appreciated.

Thanks.

<template>
  <div>
    <datatable :columns="columns" :data="rows"></datatable>
  </div>
</template>

<script>
import Vue from "vue"
import DatatableFactory from "vuejs-datatable"
Vue.use(DatatableFactory)

export default {
  data () {
    return {
      columns: [
        {label: "id", field: "id"},
        {label: "Username", field: "user.username"},
        {label: "First Name", field: "user.first_name"},
        {label: "Last Name", field: "user.last_name"},
        {label: "Email", field: "user.email"},
        {label: "address",
          representedAs: function (row) {
            return row.address + "<br />" + row.city + ", " + row.state
          },
          interpolate: true
        }
      ],
      rows: [
        {
          "id": 1,
          "user": {
            "username": "dprice0",
            "first_name": "Daniel",
            "last_name": "Price",
            "email": "dprice0@blogs.com"
          },
          "address": "3 Toban Park",
          "city": "Pocatello",
          "state": "Idaho"
        }
      ]
    }
  }
}
</script>

[lee-alderdice]

Using 'index.js' from the node_modules folder returns the header rows but the error persists and while data is returned it is not rendered because the columns and rows don't match.

[pstephan1187]

The Vue object needs to be available globally. Try this and let me know if it works:

import Vue from "vue"
import DatatableFactory from "vuejs-datatable"
Vue.use(DatatableFactory)
window.Vue = Vue;

[lee-alderdice]

That worked, thank you.

I create an instance of Vue in App.Vue, I thought that would therefore be globally available. Need to re-read a few bits I think.

[robertjk]

@pstephan1187

Why would you require Vue object to be registered globally? That's the opposite to the idea how isolated components work - they should declare all their dependencies internally. You could add @import Vue from 'vue'; in your component and the problem would be gone. It would make your component (library) easier to use - nobody would have to remember/read docs to know that to use it you have to have some global variables declared. It would also save people (like me) who try to write fully modular applications - without declaring any global variables - from polluting the code with some global variable only to use a single library.

It's like old JQuery days, when to use a JQuery plugin, you'd have to have $/JQuery defined as a global variable. JavaScript has grown since then. So should we in how we build our tools.

[GerkinDev]

For reference, duplicate of #24, and would be resolved by #42 (with some webpack config. . .)

[pstephan1187]

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