vuetable and typescript, "did you register the component correctly? "

[AmarPotki]

I'm beginner at Vue2. I try to use tutorial 7 and tutorial 11 by typescript. at tutorial 7 ,i faced this error

Unknown custom element: <vuetable-pagination> - did you register the component correctly? For recursive components, make sure to provide the "name" option

and i faced error when i wanted to use component at tutorial 11

Unknown custom element: <customActions> - did you register the component correctly? For recursive components, make sure to provide the "name" option

my ts code is :

import Vue from "vue";
import Component from "vue-class-component";
import Vuetable from 'vuetable-2';
import {CustomActionsComponent} from './../customActions';
@Component({
    template: require("./gridTest.html"),
    components: {
        Vuetable,
        'customActions' : CustomActionsComponent,
        'vuetable-pagination': Vuetable.VuetablePagination,

    }
})
export class gridTestComponent extends Vue {
    fields: Array<any>;
    sortOrder: Array<any>;
    css: object;
    constructor() {
        super();
        this.fields = [
            {
                name: 'name',
                title: '<span class="orange glyphicon glyphicon-user"></span> Full Name',
                sortField: 'name'
            },{
                name: '__component:customActions', 
                title: 'Actions',
                titleClass: 'center aligned',
                dataClass: 'center aligned'
              },,
            {
                name: 'email',
                title: 'Email',
                sortField: 'email'
            },
            'birthdate', 'nickname',
            {
                name: 'gender',
                title: 'Gender',
                sortField: 'gender'
            },
            '__slot:actions'
        ];
        this.sortOrder = [
            { field: 'name', direction: 'asc' }
        ];
        this.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: '',
                },
            }
        };
    }
    onPaginationData(paginationData) {
        Vuetable.$refs.pagination.setPaginationData(paginationData);

    }
    onChangePage(page) {
        Vuetable.$refs.vuetable.changePage(page)
    }
    editRow(rowData) {
        alert("You clicked edit on" + JSON.stringify(rowData));
    }
    deleteRow(rowData) {
        alert("You clicked delete on" + JSON.stringify(rowData));
    }
    onLoading() {
        console.log('loading... show your spinner here');
    }
    onLoaded() {
        console.log('loaded! .. hide your spinner here');
    }
    mounted() { }

}

html

<div id="table-wrapper" class="ui container">
    <h2><strong>&lt;Vuetable-2&gt;</strong> with Bootstrap 3</h2>
   <vuetable ref="vuetable"
     api-url="https://vuetable.ratiw.net/api/users"
     :fields="fields"
     :sort-order="sortOrder"
     :css="css.table"
     pagination-path=""
     :per-page="3"
     @vuetable:pagination-data="onPaginationData"
     @vuetable:loading="onLoading"        
     @vuetable:loaded="onLoaded">
     <template slot="actions" scope="props">
       <div class="table-button-container">
           <button class="btn btn-warning btn-sm" @click="editRow(props.rowData)">
             <span class="glyphicon glyphicon-pencil"></span> Edit</button>&nbsp;&nbsp;
           <button class="btn btn-danger btn-sm" @click="deleteRow(props.rowData)">
             <span class="glyphicon glyphicon-trash"></span> Delete</button>&nbsp;&nbsp;
       </div>
       </template>
     </vuetable>
     <vuetable-pagination ref="pagination"
       :css="css.pagination"
       @vuetable-pagination:change-page="onChangePage"
     ></vuetable-pagination>
   </div> 

[ratiw]

I'm sorry, I don't use TypeScript so I don't think that I can help you on this. Would recommend you to remove TypeScript and see if it works. If so, you can add it back later and see what's the problem.

[AmarPotki]

I registered globally and worked for me thanks for replay

[Kaliph]

Hello AmarPotki, how did you register globally? Could you share a working example?

Thankyou

[AmarPotki]

Hi @Kaliph which one customActions or vuetable-pagination

[Rui-Carvalho]

@Kaliph considering you're using typescript, have you declared in some file (some file like src/vuetable.d.ts) the following:

// vuetable.d.ts
declare module 'vuetable-2';

[SkyNetRu]

This comment help me resolve this problem https://github.com/ratiw/vuetable-2/issues/56#issuecomment-332315641