Vue.js including library

Question

I'm a Java dev completely new to Frontend stuff and currently looking into building a little Vue-App. Herefor I want to make use of a library (called vue-good-table, but pretty much irrelevant I guess).

I downloaded and installed it via npm (npm install --save vue-good-table) and am now trying to make it work with the basic project template provided by the vue-cli looking like this: 1 HelloWorld-component, renamed it to IssueTable.vue being loaded in the Home.vue - view, App.vue as start point and main.js and router.js being there too: Project setup

I have then tried adding the import and Vue.use statement to the main.js file, since it seems to be the place, where imports where already there, so it looks like this:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueGoodTable from 'vue-good-table'

Vue.use(VueGoodTable)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

This does not make it work and I dont see the table I would expect to see being created in my IssueTable.vue component. Adding the import and Vue.use - lines into the component file itself doesnt seem to work either.

So my question is, what do I have to do to make use of the library?

Thank you very much :)

Answer 1

To use the plugin you need to import the plugin in the component or declare it globally in main.js to use it.

Try this:

In component file

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
 import { VueGoodTable } from 'vue-good-table'; 
 import 'vue-good-table/dist/vue-good-table.css'
 export default {
    components: {
      VueGoodTable,
    },
    data(){
        return {
          columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'YYYY-MM-DD',
          dateOutputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
          ],
          rows: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
          ],
        };
      },
 }
</script>