CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
user587266
user587266

Reputation: 31

Vue component does not show

I am a beginner in Vue.js and in web development in general. I was following the vuejs guide here.

I was wondering when I was creating a vue component by Vue.component(NameOfComponent, {...}) and adding it to my HTML like this <NameOfComponent></NameofComponent>, the component did not show.

Like in the example below. The first argument of Vue.component is TodoItem which is the name of the component. When I added it as <TodoItem></TodoItem>, it did not show and there is an error: [Vue warn]: Unknown custom element: <todoitem> - did you register the component correctly? For recursive components, make sure to provide the "name" option. But <todo-item></todo-item> or even <todo-Item></todo-Item> showed.

Why? What name/naming convention should I use? Thank you!

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/[email protected]/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>

Upvotes: 0

Views: 250

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

Try using the default (kebab-case) to view the component

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/[email protected]/dist/vue.js"></script>
  <title>Vue docs</title>
</head>
<body>
  <div id='app'>
    <ol>
      <todo-item></todo-item>         // comment - Line changed
    </ol>
  </div>

  <script src='main.js'></script>
</body>
  
</html>

Upvotes: 1

Related Questions