Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

TiagoDuarte's avatar

VUE | component not registered - But it is!

I'm trying to show a table through a component but keep getting the error: "[Vue warn]: Unknown custom element: vuetable-field-component:account-details - did you register the component correctly?"

The things is, I already tried everything to my knowledge, and if i print out the globally registred component on VUE the component shows up!

Some code:

// index.blade.php
@extends('layout.private', ['title' => 'Accounts'])

@section('content')
<div class="field">
  <p class="control">
    <a class="button is-primary" href="{{route('account.create')}}" role="button">
        <span class="icon is-small"><i class="fa fa-plus"></i></span>
        <span>Create Account</span>
    </a>
  </p>
</div>
<hr>
<table-accounts>
</table-accounts>
@endsection
// TableAccounts.vue
<template>
    <base-vuetable :api-url="route" :fields="fields" :sort-order="sortOrder">
    </base-vuetable>
</template>
<script>
import BaseVuetable from './BaseVuetable.vue';
import AccountActions from './AccountActions.vue';
import AccountDetails from './AccountDetails.vue';

export default {
    components: {
        BaseVuetable,
        AccountActions,
        AccountDetails
    },
    props: {
        route: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            fields: [
                {
                  name: '__component:account-details',
                  title: '',
                },
                ...
                {
                    titleClass: 'account__actions-button',
                    name: '__component:account-actions',
                    title: '',
                }
            ],
            sortOrder: [
                {
                    field: 'updated_at',
                    sortField: 'updated_at',
                    direction: 'desc'
                }
            ],
        }
    },
    methods: {
       ...
    }
}
</script>
<style>
.account__actions-button {
    width:  140px;
}
</style>
// app.js
/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

import NProgress from 'vue-nprogress';
import VueAxios from 'vue-axios';
import NprogressContainer from 'vue-nprogress/src/NprogressContainer';
import VueTouch from 'vue-touch';
import Notification from './components/Notification';

Vue.use(VueAxios, axios);
Vue.use(NProgress);
Vue.use(require('vue-truncate-filter'));
Vue.use(VueTouch);

const nprogress = new NProgress({ parent: '.nprogress-container' })
const NotificationComponent = Vue.extend(Notification);

window.openNotification = (message, type) => {
  return new NotificationComponent({
    el: document.createElement('div'),
    propsData: {
        'message': message,
        'type': type
    }
  })
};

// Generic components
...

// Content specific components
...

// Specific table components
...
Vue.component('table-accounts', require('./tables/TableAccounts.vue').default);
Vue.component('account-actions', require('./tables/AccountActions.vue').default);
Vue.component('account-details', require('./tables/AccountDetails.vue').default);


const app = new Vue({
    components: {
        NprogressContainer
    },
    data: {
        visible: false
    },
    nprogress,
    el: '#app'
});

And the problem is with account-details and account-actions.

I'm using Laravel 9.19, Vue 2.1.10 and Vuetable 2 on the next branch.

Anyone can help?

0 likes
0 replies

Please or to participate in this conversation.