As a newcomer to Vue.js and web development in general, I decided to dive into the vuejs guide.
Something puzzled me - when creating a vue component using
Vue.component(NameOfComponent, {...})<NameOfComponent></NameofComponent>Let's take an example. The initial argument of Vue.component is TodoItem, which signifies the name of the component. Despite trying
<TodoItem></TodoItem><todoitem> - did you register the component correctly? For recursive components, make sure to provide the "name" option. But oddly enough, <todo-item></todo-item><todo-Item></todo-Item>What naming convention should I adhere to in order to resolve this issue? Your insights are greatly appreciated!
Vue.component('TodoItem', {
template: '<li>This is a todo</li>'
})
const app = new Vue({
el: '#app',
})<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cd87848eab979b93968d80909497bd">[email protected]</a>/dist/vue.js"></script>
<title>Vue docs</title>
</head>
<body>
<div id='app'>
<ol>
<TodoItem></TodoItem>
</ol>
</div>
<script src='main.js'></script>
</body>
</html>