How to use VueQuintable source directly?

Question

I am trying to use the following vue table wrapper on my website but for one page only. So I don't want to create the whole vue project. Instead, I try to use the source code directly.

https://vuejsexamples.com/a-high-configurable-and-flexible-table-wrapper-using-vue-and-bootstrap/

https://quintet.io/vue-quintable-demo/

I am new to vue. I follow some example online and do following 3 step.

Step 1 : I downloaded the source code and place in the vue folder, then I included following link in my html page.

<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="vue/vue-quintable.umd.min.js"></script>
<link rel="stylesheet" href="vue/vue-quintable.css"></link>

Step 2 : Create the app.js file

var app = new Vue({
  el: '#app'  
})

Step 3: add the following code in my html page

<div id="app">
 </div>

Now, I don't know how to import VueQuintable component. The demo page have following code. Is it a component code? I would be appreciate if anyone can give a some tips what I should do next. Thank you very much.

<template>
        <VueQuintable  :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>
</template>
<script>
    import VueQuintable from "../components/VueQuintable.vue"
    import Chance from "chance";

    export default {
        components:{
          VueQuintable
        },
        data() {
            return {
                config: {
                    columns: [
                        {
                            headline: "Name",
                        }, {
                            headline: "Age",
                            sort:true

                        }, {
                            headline: "Birth Place",
                        }, {
                            headline: "Job",
                            sort:true
                        }
                    ],
                    multiSort:true,
                    multiSortSelect:true,
                    pageSort:true,
                    pageSortSelect:true,
                    pagination:5,
                    search:true,
                },
                sortOrder:[{
                    index:1,
                    asc:false,
                }]

            }
        },
        computed:{
            rows(){

                let count = 30;
                const rows = [];

                const chance = new Chance();

                for(let i = 0; i < count; i++){

                    const randSortValue = Math.ceil(Math.random() * 10);

                    rows.push([
                        {
                            text:chance.name({ nationality: 'en' })
                        },
                        {
                            text:chance.age()
                        },
                        {
                            text:chance.city()
                        },
                        {
                            html:"<span class\"mr-2\">" + chance.profession() +"</span><em>"+ "["+randSortValue+"]</em>",
                            sortValue: randSortValue
                        },
                    ]);
                }

                return rows;


            }
        }
    }
</script>

Answer 1

Due to i use the source directly, I can't use import for the component. So I need to put the component inside the app.js file

Vue.component('vuequintable', {
      data() {
            return {
                config: {
                    columns: [
                        {
                            headline: "Name",
                        }, {
                            headline: "Age",
                            sort:true

                        }, {
                            headline: "Birth Place",
                        }, {
                            headline: "Job",
                            sort:true
                        }
                    ],
                    multiSort:true,
                    multiSortSelect:true,
                    pageSort:true,
                    pageSortSelect:true,
                    pagination:5,
                    search:true,
                },
                sortOrder:[{
                    index:1,
                    asc:false,
                }],
                chance:[{name : "aa",
                age : 2,
                city :"hk",
                profession :"kk"
                },{name : "bb",
                age : 3,
                city :"hk",
                profession :"kk"
                }],

            }
        },
        computed:{
            rows(){

                let count = 2;
                const rows = [];

                //const chance = new Chance();
               
                for(let i = 0; i < count; i++){

                    //const randSortValue = Math.ceil(Math.random() * 10);

                    rows.push([
                        {
                            text:this.chance[i].name
                        },
                        {
                            text:this.chance[i].age
                        },
                        {
                            text:this.chance[i].city
                        },
                        {
                            text:this.chance[i].profession
                        },
                    ]);
                }

                return rows;


            }
        
    },
    template:   `<VueQuintable  :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>`
});


Vue.config.devtools = true

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="./dist/vue-quintable.css"></link>


<div id="app">
  <vuequintable></vuequintable>
</div>

<script type="text/javascript" src="./dist/vue.min.js"></script>
<script type="text/javascript" src="./dist/vue-quintable.umd.min.js"></script>