Laravel, VueJS [Vue warn]: Unknown custom element: did you register the component correctly?

Question

I'm not sure what I am missing, everything seems to be set up correctly:

app.js

window.Vue = require('vue');


    import CategoriesDataTable from './components/categories/CategoriesDataTable.vue';

    const app = new Vue({
        el: '#app',
        components : {
            CategoriesDataTable,
        },
    });

CategoriesDataTable.vue:

<template>
    <section class="table-container">
        <table>
            <thead></thead>
        </table>
    </section>
</template>

<script>
export default {
    name : 'CategoriesDataTable',
    data() {
        return {}
    }
}
</script>

<style>

</style>

test.blade.php

@extends('master')

@section('title', 'Add Category')

@section('app')
<CategoriesDataTable></CategoriesDataTable>
@endsection

Doubled checked the spelling but still get

app.js:37926 [Vue warn]: Unknown custom element: <categoriesdatatable> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Try kebab case, categories-data-table, within your template. You don't need to change it elsewhere. Note the error message shows the component name in lower case. That's because the template is being parsed as HTML by the browser before it gets to Vue. See also vuejs.org/v2/style-guide/… — skirtle
Thanks @skirtle. That worked. let's say in CategoriesDataTable.vue I change the name like so name : 'add-category' and then in est.blade.php I update the element like so <add-category></add-category>, why would that not work? I guess I don't know how the name property is used. — Robert Rocha
If you still have components : { CategoriesDataTable }, when you create the Vue instance then that is the name it will use within that root template. You can read more about the name configuration option at vuejs.org/v2/api/#name but in practice it is much less important than you might expect. — skirtle

Daniel Mesa Daniel Mesa · Accepted Answer · 2019-11-26T02:39:30

In your blade template you can try this:

<categories-data-table></categories-data-table>

Then execute npm run watch.

Laravel, VueJS [Vue warn]: Unknown custom element: did you register the component correctly?

2 Answers