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.

Answer 1

In your blade template you can try this:

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

Then execute npm run watch.

Answer 2

我遇到了同样的问题，就我而言，我忘记了命令：Npm run watch