Add external components for use in custom web component

I am trying to build a custom web component using vue ui.
Custom component uses external component.

My main.js is

import VuePlyr from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css' 
import App from "./App.vue";

Vue.config.productionTip = false;

Vue.use(VuePlyr)

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

My App.vue is

<template>
<VideoComponent :url="'https://www.youtube.com/embed/H6u0VBqNBQ8" :isEmbed="true" v-if="url"/>
</template>

<script>
import VideoComponent from "./components/VideoComponent.vue";

export default {
name: "app",
components: {
    VideoComponent
},
props: {
    url: String,
    isEmbed: Boolean
}
};
</script>

My “VideoComponent.vue” is

<template>
<div class="fit-parent">
    <vue-plyr ref="plyr">
    <div class="plyr__video-embed">
        <iframe
        :src= "url"
        allowfullscreen allowtransparency allow="autoplay">
        </iframe>
    </div>
</div>
</template>
<script>
...
</script>

but When i try to build and use the component it raises error

Unknown custom element: <vue-plyr> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

It works normally If i use it without wc support. What can be possible issue and what am i missing?

The issue is that main.js is ignored when building a web component becaus main.js mounts an app, and we don’t want to do that - we want to build a web component.

So Vue.use(VuePlyr) is never called and the component never registered.

So the solution would be to either do that in App.vue, but that pollutes the global Vue instance with that plugin, or check if you can directly import and register that component.

Looking at the source of the plugin you can see that it does export a VuePlyr object as a named export, and that object contains all the components (or rather, the component, it’s only one, right).

so you could use that directy in VideoComponent.vue like this:

<script>
import { VuePlyr } from 'vue-plyr'
export default {
  components: {
    VuePlyr: VuePlyr.VuePlyr
  }
}
}
</script>

Doesn’t look pretty, but is technically much cleaner as you only register locally.

I should have read the documentation more carefully. It was clearly stated over there that it defaults to App.vue if no component is defined while building web component. Thanks for the help.

Hello,

I am using element-ui to build a custom web component, use

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    components: {
        otherComponent:otherComponent,
        ElementUI: ElementUI.ElementUI
    },

in my web-component.vue file,but I can’t see styles from element-ui, why?
Thanks

Have u reslove it?

import element-ui style in host web component page.