How to use VueJS plugins directly in the browser?

Question

I am including VueJS as a replacement for JQuery in a legacy system, but I have encountered problems in being able to use plugins, as I would with JQuery. To give an example, the "vuetable" library indicates that it can be imported directly into the html using script tags, but I can not make it work:

I import the scripts

<div id="app">
<vuetable
        api-url="/api/users"
        :fields="columns">
</vuetable>
</div>

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/vue-table.js"></script>
<script src="js/app.js"></script>

then, inside my file JS I try to manipulate the information.

<script>
    new Vue({
        el: '#app',
        data: {
            columns: [
                'firstname',
                'lastname',
                'nickname',
                'birthdate',
                'group.name_en',
                'gender',
                'last_login',
            ]
        },
methods: {CODE}
    })
</script>

Inside, I get the information by fetch() and then I pass it to the component by means of its props. When I try intonoces, invoking the component by its label I get an error saying that vueetables is not defined: app.js Uncaught ReferenceError: Vuetable is not defined

I tried with these - did not work when I created a [mcve] - possibly the wrong vue-table ` ` — mplungjan, Jan 30 '18 at 06:57

score 2 · Accepted Answer · answered Jan 30 '18 at 08:27

I think all that's missing is a couple of Vue.use() statements at the top of your script.

Also note, for Vue2 use vuetable-2

console.clear()
Vue.use(VueResource)
Vue.use(Vuetable)

new Vue({
  el: '#app',
  data: {
    columns: ['name', 'email','birthdate','nickname','gender']
  },
  methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
<script src="https://unpkg.com/vuetable-2@1.6.0"></script>

<div id="app">
<vuetable ref="vuetable"
  api-url="https://vuetable.ratiw.net/api/users"
  :fields="columns"
  pagination-path="">
</vuetable>
</div>

How to use VueJS plugins directly in the browser?

1 Answers1