Как использовать плагины VueJS прямо в браузере?

Question

Я включаю VueJS в качестве замены JQuery в устаревшую систему, но у меня возникли проблемы с возможностью использования плагинов, как в случае с JQuery. В качестве примера, библиотека "vuetable" указывает, что она может быть импортирована непосредственно в html с помощью тегов скрипта, но я не могу заставить ее работать:

Я импортирую скрипты

<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>

затем внутри моего файла JS я пытаюсь манипулировать информацией.

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

Внутри я получаю информацию по fetch() и затем я передаю его компоненту с помощью его реквизита. Когда я пытаюсь интонировать, вызывая компонент по его метке, я получаю сообщение об ошибке, что vueetables не определен: app.js Uncaught ReferenceError: Vuetable is not defined

Answer 1

Я думаю, что все, что не хватает, это пара Vue.use() заявления в верхней части вашего сценария.

Также обратите внимание, что для Vue2 используйте 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>