I’m learning Vue with Vuex, I tried to do a component but appear this error:
vue.js:634 [Vue warn]: Unknown custom element: actividadescomponent – did you register the component correctly? For recursive components, make sure to provide the “name” option. (found in )
I tried many ways but I could not find a solution.
That’s the code html:
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Vuex -->
<script src="https://unpkg.com/vuex@3.6.0/dist/vuex.js"></script>
</head>
<body>
<div id="caja-vue">
<actividadesComponent></actividadesComponent>
</div>
<script src="codigo.js"></script>
</body>
</html>
That’s the JS code:
//componentes
Vue.component('actividadesComponent', {
template: /*html*/
` <div>
<h1>Hola mundo</h1>
</div>
`,
computed: {
...Vuex.mapState(['actividades'])
},
methods: {
...Vuex.mapActions(['llamarJson'])
}
});
//VueEx
const store = new Vuex.Store({
state: {
actividades: [],
programas: []
},
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.actividades = llamarJsonAction;
}
},
actions: {
llamarJson: async function(){
const data = await fetch('/Documentos/Calendario-academico/calendario-2021-prueba.json');
const actividades = await data.json();
commit('llamarJsonMutation', actividades);
}
}
});
//Vue
new Vue({
el: '#caja-vue',
store: store
});
Advertisement
Answer
In-DOM templates will convert tag names to lowercase, so you essentially have:
<actividadescomponent></actividadescomponent>
Two options:
Use kebab case in the DOM:
<actividades-component></actividades-component>
This works because Vue will automatically register the component in that form as well when you use capitalization.
Or register the component with an all-lowercase name:
Vue.component('actividadescomponent', ...)
Read Component Registration in the docs for more information.