VUEJS - Unknown custom element: <category-edit> - did you register the component correctly?

Question

I have declared my components in app.js like so:

window.Vue = require('vue');
import ExampleComponent from "./components/ExampleComponent";

new Vue({
 el: '#app',
   components:{
    'example':ExampleComponent
  }
});

ExampleComponent from Laravel

 <template>
   <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">Example Component</div>

                        <div class="card-body">
                            I'm an example component.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            name:'example',
            mounted() {
                console.log('Component mounted.')
            }
        }
    </script>

The component have the option "name" too. But I still have the error message in title error_message

The error I have:

app.js:158231 [Vue warn]: Unknown custom element: <example> - did you 
register the component correctly? For recursive components, make sure to 
provide the "name" option.(found in <Root>)

And the weird part of this, is the component is displayed normally. I'm new to vuejs and probably missing out something.

Thanks for the help.

Answer 1

Try this:

window.Vue = require('vue');
import ExampleComponent from "./components/ExampleComponent";

new Vue({
 el: '#app',
   components:{
    ExampleComponent
  }
});

In your html use whatever name you have used while writing the ExampleComponent like below:

<example-component></example-component>