[Vuejs]-Create a custom component in Vue.js

by

0👍

There are couple of mistakes here.

First <greet="greet"></greet> doesn’t work. There’s something calles props in vue (you’ll learn it in future) Change that line to <greet></greet>
Then you don’t have to use data() to show hello div. Delete the greet from data.
Above steps might fix your fault

0👍

When you use the syntax Vue.component() you are registering a component globally, so it can be used by any new Vue instances created afterward. So:

new Vue({ el: '#app' }) // this Vue instance does not contain the greet component because it does not exists yet. 
Vue.component('greet', {
  data() {
    return {

    }
  },
  template: '<div>hello!</div>'
})

Instead:

Vue.component('greet', {
  data() {
    return {

    }
  },
  template: '<div>hello!</div>'
})

new Vue({ el: '#app' }) // this Vue instance will contain the greet component because it was already created and registered.

Also <greet="greet"></greet> is not valid syntax. It should be <greet></greet>.

You should remove greet from data() function. it has no meaning and use.

The final code should look like:

<body>
    <div id="app">
      <greet></greet>
    </div>
</body>


Vue.component('greet', {
  template: '<div>hello!</div>'
})

new Vue({ el: '#app' })

Leave a comment