Fix ‘Unknown Custom Element’ in vue

In this article, you will learn how to register components locally and globally, to avoid the ‘unknown custom element error‘.

Global Registration: Global registration of components is achieved using the Vue.component directive.

import Vue from "vue";
import App from "./App.vue";
// Import Custom Component
import newComponent from './newComponent.vue';

Vue.config.productionTip = false;

//  Register component Globally
Vue.component('newComponent ', newComponent );

new Vue({
  render: h => h(App)
}).$mount("#app");

This gives us access to make use of our component in any component.

<template>
  <div>
    <newComponent>
    
     </newComponent>
  </div>
</template>

Local Registration: We can also register our components locally by importing and registering them within the needed component.

<script>
import newComponent from "./newComponent";
export default {
  components: {
    newComponent,
  },
};
</script>

We can then use it within our component.

<template>
  <div>
    <newComponent>
    
     </newComponent>
  </div>
</template>