did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in <Root>) VUE

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 )

error screen shot

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
});

Solution

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.