vue unknown custom element

Posted by w3diy - 8 months ago

How to Solve "Unknown Custom Element" in Vuejs?

HTML Part

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>pakainfo.com</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="app">
    <div v-for="product in products">
            <my-product :product="product"></my-product>
    </div>

</div>

<template id="product-template">
    <h1>My products</h1>
    <div class="">{{ product.name }}</div>
</template>
</body>
</html>

Vue.js Part

var products_list = Vue.component('my-product',{
  template : '#product-template',
  data : function(){
      return this.products
  },
  props : ['product']
});

new Vue({
el : '#app',
data : {
    products : [
        { name : "product 1", completed : false},
        { name : "product 2", completed : false},
        { name : "product 3", completed : true}
    ]
},
components: {products_list: products_list},
methods : {

},
computed : {

},
ready : function(){

}

});

Unknown custom element: vue.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import DemoExample from './components/DemoExample.vue'
import LoginBlock from './components/LoginBlock.vue'
Vue.config.productionTip = false
const routes = [
  { path: '/about', component: DemoExample },
  { path: '/contact', component: LoginBlock }
]
const router = new VueRouter({
  routes // short for `routes: routes`
})
Vue.use(VueRouter);
new Vue({
  router, 
  render: h => h(App),
}).$mount('#root')