Following the setup of the project using vue-cli 3.x, I declared this component in the main.js file.
By the way, Unknown custom element: - have you properly registered the component? For recursive components, ensure to include the "name" option.
I am stuck with the above error. How can I utilize global components?
Code..
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.component('staticComponent', {
template: '<div>{{ msg }}</div>',
data() {
return {
msg: 'Hello Static Component'
}
}
})
new Vue({
el: '#app',
render: (h) => {
return h(App)
},
})
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<StaticComponent/>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld,
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>