Unknown custom element: <custom-actions> - did you register the component correctly?

[hamidh2]

hi im using vuejs with type script syntax (not the default vuejs syntax) base on the documentaion i used some code in order to use __component:customAaction example but i recieved the below error "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option found in <Vuetable> <PersonnelComponent> " i put my codes here.please tell me my mistake!

import Vue from 'vue';
import Component from 'vue-class-component';
import { Vuetable, VuetablePagination, VuetablePaginationInfo } from 'vuetable-2';
import { CustomActionsComponent } from '../CustomActions';
import accounting from 'accounting';
import moment from 'moment';

@Component({
  template: require('./personnel.html'),
  components: {
    Vuetable,
    VuetablePagination,
    VuetablePaginationInfo , 
    'custom-actions': CustomActionsComponent
  }
})

export class PersonnelComponent extends Vue {
  fields = [];
  constructor() {
    super();
    this.fields = [
        '__sequence',
        {
        name: 'name',
        title: 'نام کاربری',
        dataClass: 'text-center',
        textClass: 'text-center',
        callback: 'makeAllCharCapital',
        sortField: 'name'
      },
      {
        name: 'gender',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
        callback: 'genderLabel',

      },
      {
        name: 'email',
        sortField: 'email'
      }, 'birthdate', 'address.line1',
      {
        name: '__component:custom-actions',   
        title: 'Actions',
        titleClass: 'center aligned',
        dataClass: 'center aligned'
      }
    ];

  }

  $refs: {
    pagination: HTMLFormElement,
    vuetable: HTMLFormElement,
    paginationInfo: HTMLFormElement,
    paginationTop: HTMLFormElement,
    paginationInfoTop: HTMLFormElement
  }

  onPaginationData(paginationData) {
    this.$refs.paginationTop.setPaginationData(paginationData)      // <----
    this.$refs.paginationInfoTop.setPaginationData(paginationData)

    this.$refs.pagination.setPaginationData(paginationData);
    this.$refs.paginationInfo.setPaginationData(paginationData);

  }

  onChangePage(page) {
    this.$refs.vuetable.changePage(page)
  }

  formatDate(value, fmt = 'D MMM YYYY') {
    return (value === null)
      ? ''
      : moment(value, 'YYYY-MM-DD').format(fmt)
  }

  formatNumber(value) {
    return accounting.formatNumber(value, 2);
  }

  genderLabel(value) {
    return value == 'M'
      ? `<span class='label label-info'><i class='glyphicon glyphicon-star'></i> Male</span>`
      : `<span class='label label-success'><i class='glyphicon glyphicon-heart'></i> Female</span>`
  }

  makeAllCharCapital(value) {
    return value.toUpperCase();
  }

  mounted() {

  }
}

`

<div class="vuetable-pagination ui basic segment grid">

  <vuetable-pagination-info ref="paginationInfoTop"></vuetable-pagination-info>
  <vuetable-pagination ref="paginationTop" style="display:inline-flex" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
</div>

<vuetable ref="vuetable" api-url="https://vuetable.ratiw.net/api/users" :fields="fields" pagination-path="" :per-page="10"
   @vuetable:pagination-data="onPaginationData"></vuetable>

<div class="vuetable-pagination ui basic segment grid">
  <vuetable-pagination-info ref="paginationInfo"></vuetable-pagination-info>

  <vuetable-pagination ref="pagination" style="display:inline-flex" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
</div>

`

[hamidh2]

i found my mistake is shuold register custom-action like below

Vue.component('custom-actions', CustomActionsComponent);

insted

@Component({
  template: require('./personnel.html'),
  components: {
    Vuetable,
    VuetablePagination,
    VuetablePaginationInfo , 
    'custom-actions': CustomActionsComponent
  }
})

my final code is

import Vue from 'vue';
import Component from 'vue-class-component';
import { Vuetable, VuetablePagination, VuetablePaginationInfo } from 'vuetable-2';
import { CustomActionsComponent } from '../CustomActions';
import { DetailRowComponent } from '../detailrow';
import accounting from 'accounting';
import moment from 'moment';
Vue.component('custom-actions', CustomActionsComponent);
Vue.component('my-detail-row', DetailRowComponent);
@Component({
  template: require('./personnel.html'),
  components: {
    Vuetable,
    VuetablePagination,
    VuetablePaginationInfo , 
  }
})

export class PersonnelComponent extends Vue {
  fields = [];
  constructor() {
    super();
    this.fields = [
        '__sequence',
        {
        name: 'name',
        title: 'نام کاربری',
        dataClass: 'text-center',
        textClass: 'text-center',
        callback: 'makeAllCharCapital',
        sortField: 'name'
      },
      {
        name: 'gender',
        titleClass: 'center aligned',
        dataClass: 'center aligned',
        callback: 'genderLabel',

      },
      {
        name: 'email',
        sortField: 'email'
      }, 'birthdate', 'address.line1',
      {
        name: '__component:custom-actions',   
        title: 'Actions',
        titleClass: 'center aligned',
        dataClass: 'center aligned'
      }
    ];

  }

  $refs: {
    pagination: HTMLFormElement,
    vuetable: HTMLFormElement,
    paginationInfo: HTMLFormElement,
    paginationTop: HTMLFormElement,
    paginationInfoTop: HTMLFormElement
  }

  onPaginationData(paginationData) {
    this.$refs.paginationTop.setPaginationData(paginationData)      // <----
    this.$refs.paginationInfoTop.setPaginationData(paginationData)

    this.$refs.pagination.setPaginationData(paginationData);
    this.$refs.paginationInfo.setPaginationData(paginationData);

  }

  onChangePage(page) {
    this.$refs.vuetable.changePage(page)
  }

  onCellClicked (data, field, event) {
    console.log('cellClicked: ', field.name)
    this.$refs.vuetable.toggleDetailRow(data.id)
  }

  formatDate(value, fmt = 'D MMM YYYY') {
    return (value === null)
      ? ''
      : moment(value, 'YYYY-MM-DD').format(fmt)
  }

  formatNumber(value) {
    return accounting.formatNumber(value, 2);
  }

  genderLabel(value) {
    return value == 'M'
      ? `<span class='label label-info'><i class='glyphicon glyphicon-star'></i> Male</span>`
      : `<span class='label label-success'><i class='glyphicon glyphicon-heart'></i> Female</span>`
  }

  makeAllCharCapital(value) {
    return value.toUpperCase();
  }

  mounted() {

  }
}