CODEWITHSUNDEEP
vue.jsvuejs2
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

Vue global component not defined

I am creating a Vue plugin that adds a custom component to the global scope like so:

import CustomComponent from './CustomComponent.vue';

const MyPlugin = {
    install(Vue, options) {
        Vue.component('CustomComponent', CustomComponent);
    }
}

and the component itself is simply:

<template>
    <h1>Hi from the custom component</h1>
</template>
<script>
export default {
    name: 'CustomComponent',

    mounted() {
        console.log('hello console');
    }
}
</script>

And then finally I import the plugin into my main.js file (I'm using Gridsome):

export default function (Vue, { router, head, isClient }) {
    Vue.use(MyPlugin);
}

But now I expect that when I make a component I can extend the CustomComponent since it's in the global scope like so:

<template>
    <h2>Hi again</h2>
</template>
<script>
export default {
    name: 'RegularComponent',
    extends: CustomComponent
}
</script>

But this gives me an error of Custom Component not defined and it seems like it's because CustomComponent isn't in the global scope because if I import the CustomComponent vue file in my RegularComponent vue file it works. However, this is not the behavior I would like and I cannot figure out why CustomComponent is not just globally available.

Upvotes: 0

Views: 1801

Answers (1)

ittus
ittus

Reputation: 22393

CustomComponent is a javascript object, you still need to import to use it

<script>
import CustomComponent from './CustomComponent.vue'
export default {
  name: 'RegularComponent',
  extends: CustomComponent
}
</script>

I think when define component as global, that means you can use it in template without re-declare:

<template>
  <h2>Hi again</h2>
  <custom-component />
</template>

Upvotes: 2

Related Questions