Why Unknown custom element error using vuetable-2 component?

Question

In @vue/cli 4.0.5 app adding https://github.com/ratiw/vuetable-2 component I got error in the console:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <vuetable-pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

My vue file is :

<template>
    <div class="test" style="width: 100% !important;">
        <h1>This is a test page</h1>


        <div class="ui container">
            <vuetable ref="vuetable"
                      api-url="https://vuetable.ratiw.net/api/users"
                      :fields="fields"
                      pagination-path=""
                      @vuetable:pagination-data="onPaginationData"
            >
            </vuetable>
            <vuetable-pagination ref="pagination"
                                 @vuetable-pagination:change-page="onChangePage"
            ></vuetable-pagination>
        </div>



    </div>
</template>

<script>
    import Vue from 'vue'

    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from "vuetable-2/src/components/VuetablePagination";


    Vue.use(Vuetable);

    export default {
        components: {
            'vuetable-pagination': Vuetable.VuetablePagination,
            Vuetable,
            VuetablePagination,
        },

        data() {
            return {
                fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'],
            }
        }, // data () {


        methods: {
            onPaginationData (paginationData) {
                this.$refs.pagination.setPaginationData(paginationData)
            },

        }, // methods: {

    }
</script>

I suppose that I added VuetablePagination in import and component parts to my page, but looks invalid way?

Which way is valid to use this component?

Thanks!

Answer 1

You can try this

Add Bootstrap

npm install bootstrap --save

Main.js

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css';
Vue.config.productionTip = false

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

Your Component vue

<template>
    <div class="app" style="width: 100% !important;">
        <h1>This is a test page</h1>


        <div class="ui container">
            <vuetable ref="vuetable"
                      api-url="https://vuetable.ratiw.net/api/users"
                      :css="css.table"
                      :fields="fields"
                      pagination-path=""
                      @vuetable:pagination-data="onPaginationData"
            >
            </vuetable>
            <vuetable-pagination ref="pagination"
                                 @vuetable-pagination:change-page="onChangePage"
                                 :css="css.pagination"
            ></vuetable-pagination>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'

    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from "vuetable-2/src/components/VuetablePagination";


    Vue.use(Vuetable);

    export default {
        components: {
            Vuetable,
            VuetablePagination,
        },

        data() {
            return {
                fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'],
                css: {
                    table: {
                        tableClass: 'table table-striped table-bordered table-hovered',
                        loadingClass: 'loading',
                        ascendingIcon: 'glyphicon glyphicon-chevron-up',
                        descendingIcon: 'glyphicon glyphicon-chevron-down',
                        handleIcon: 'glyphicon glyphicon-menu-hamburger',
                    },
                    pagination: {
                        infoClass: 'pull-left',
                        wrapperClass: 'vuetable-pagination pull-right',
                        activeClass: 'btn-primary',
                        disabledClass: 'disabled',
                        pageClass: 'btn btn-border',
                        linkClass: 'btn btn-border',
                        icons: {
                        first: '',
                        prev: '',
                        next: '',
                        last: '',
                        },
                    }
                }
            }
        }, // data () {


        methods: {
            onPaginationData (paginationData) {
                this.$refs.pagination.setPaginationData(paginationData)
            },
            onChangePage (page) {
                this.$refs.vuetable.changePage(page)
            }

        }, // methods: {

    }
</script>