How to render a native web component in Vue3

Question

So i created the following method to render a webcomponent:

export function renderComponent(el: Element, component: Component,props: VNodeProps,appContext: AppContext){
let vnode: VNode | undefined = createVNode(component, props)
vnode.appContext = { ...appContext }
render(vnode, el)

return ()=> {
    render(null, el)
    vnode = undefined
}
}

i tried using it like this in my componentView.vue:

const addComponent = async(component: ComponentRegistryItem) => {
  destroyComp = renderComponent(
    containerDiv.value,
    (await import (/* @vite-ignore */ component.frontendUrl)),
    {},
    appContext);
};

And i have this template:

       <li v-for="component in group">
        <button @click="addComponent(component)">{{ component.tagName }}</button>
        <div ref="containerDiv"></div>
      </li>

the component.frontendUrl is a javascript webcomponent extending HTMLElement (non vue), But when i press the button i do not get any error, just nothing happens.

Does any one know how to render a non vue component?

UPDATE:

when i log the imported component i see :

    Object { … }
         Symbol(Symbol.toStringTag): "Module"

Have you taken a look to the Vue documentation about web components? — Kapcash
– Kapcash, Commented Jan 26, 2023 at 15:31
@Kapcash but i can only find examples for Vue components, not non-vue — Lars Hendriks
– Lars Hendriks, Commented Jan 27, 2023 at 7:56
I'm not sure what you're trying to do. Native webcomponent are 100% compatible with Vue with no config required. Here is an example using this native webcomponent: html-code-block — Kapcash
– Kapcash, Commented Jan 30, 2023 at 19:40

fchancel · Accepted Answer · 2023-02-01 08:52:05Z

1

You attempt to import with import(), except that as you mention in your log, import() returns an object containing a module, not the default export, and in order to use your import correctly, you need access to the default import. You can do this by adding .default after the import().

const addComponent = async(component: ComponentRegistryItem) => {
  destroyComp = renderComponent(
    containerDiv.value,
    (await import (/* @vite-ignore */ component.frontendUrl)).default,
    {},
    appContext);
};

answered Feb 1, 2023 at 8:52

fchancel

2,7298 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render a native web component in Vue3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related