Error with Vuejs component, cannot declare global component in Vuejs

Asked

Viewed 85 times

1

index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <meta charset="utf-8" />
</head>

<body>
 <div id="app">
<insert></insert>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="index.js"></script>
</html>

index js.

new Vue({
  el:'#app',
  data:{
  }
})
 Vue.component('insert',{
   template:`<p>teste</p>`
 })

ERROR:

[Vue warn]: Unknown custom element: - Did you Register the Component correctly? For recursive Components, make sure to provide the "name" option.

(found in )

javascript vue.js

1 answer

2


You have to change the order of those lines... Vue.component('insert' has to be read before new Vue({ el:'#app', because this new instance will read the <insert> inside the div #app but the component has not yet been registered...

Usa:

Vue.component('insert', {
   template:`<p>teste</p>`
})

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

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.