I already tried it many times and I don't know what mistake I'm omitting
Mistake
[Vue warn]: Unknown custom element: <usuarioTabla-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
I'm just trying to create a component and it gives me an error
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('prueba-component', require('./components/PruebaComponent.vue').default);
Vue.component('usuarioTabla-component', require('./components/usuario/UsuarioTablaComponent.vue').default);
const app = new Vue({
el: '#app',
});
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Usuario table</div>
<div class="card-body">
Usuario table.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
<usuarioTabla-component></usuarioTabla-component>
I'll pass you directly what it says in the documentation to make it clearer, because I see that you are using a hybrid between the two options to register the component. I suggest you choose one of them and adopt it as the convention for the whole project.
Component Registration. Nomenclature
You have two options when defining the name of a component:
With kebab case
When defining a component with kebab-case, you must also use kebab-case when referencing your custom element, as in
<my-component-name>
.With Pascal Case
When you define a component with PascalCase, you can use either case when referencing your custom element. That means as long
<my-component-name>
as they<MyComponentName>
are acceptable. However, note that only kebab case names are valid directly in the DOM (that is, in non-string-template templates).