Jan 19, 2023
0
Level 1
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?
Please or to participate in this conversation.