How To Use Vuejs 2 Global Components Inside Single File Components?

I am trying to use a globally registered component (with Vue.component) inside a single file component but I am always getting vue.common.js:2611[Vue warn]: Unknown custom element

Solution 1:

You don't need the module.exports. You can register the component globally by having this within the mycomponent.vue file.

<template><div>A custom component!</div></template><script>exportdefault {}
</script>

Then add to main.js

importMyComponentfrom'./component.vue'Vue.component('my-component', MyComponent);

or I typically register them in a 'globals' file them import that into the main.

That should then allow you to use my-component anywhere in the app.

Solution 2:

Component.vue

<template><div>A custom component!</div></template><script>exportdefault { code here... }</script>

Use this component in home.vue:

<template><div><my-component></my-component></div></template><script>import component from'./component.vue'exportdefault {
     components: { my-component: component }
    }
</script>