Add support for Vue 3 with web-component-wrapper

[aranoe]

I wanted to migrate my Vue 2 project to Vue 3.
The problem is, that the wrap-function is still using and expecting the Vue-instance, which is why i get the following error:

vue-wc-wrapper.js?b803:172 Uncaught TypeError: Vue is not a constructor

The main.js:

import { createApp } from "vue";
import App from "./App";
import wrap from "@vue/web-component-wrapper";

const app = createApp(App);

const WrappedElement = wrap(app, app);
// Tried several other things
// const WrappedElement = wrap(app, App);
// const WrappedElement = wrap({}, app);
// const WrappedElement = wrap({}, App);
// const WrappedElement = wrap(app);

window.customElements.define("my-name", WrappedElement);

This makes total sense, since global Vue doesn't exist anymore.
Any work around on this?

[LinusBorg]

I started working on the port of the wrapping library, but we also need to add back some capabilities to the Vue-3-compatible versions of vue-loader (& rollup-plugin-vue) in order to be able to inject styles into shadowRoot.

So this is being worked on, but it will still be some time before it's ready.

[micru]

Hi, any news on this? Would be really great to have this abillity

[LinusBorg]

This will still take a while, mostly because we still need to add shaoowRoot CSS injection back into the build tooling. Without that, this lib is pretty useless.

[volarname]

when we can expect vue 3 support? do you have any specific idea? days? weeks? months?

[LinusBorg]

weeks to months. The work I described will take some time and has a bit lower priority at this moment while we get core more stable etc.

[sreenaths]

I have published a Vue3 compatible version of this package @ https://www.npmjs.com/package/vue3-webcomponent-wrapper. It supports reactive attributes, events & slots. Feel free to use it if you are not keen on shadow-root.
Also please find a demo app that uses my wrapper @ https://github.com/sreenaths/vue3-webcomponent-wrapper-demo

If you have found an issue with the wrapper, please submit a PR on https://github.com/cloudera/hue/tree/master/desktop/core/src/desktop/js/vue/wrapper

[nunofhfontes]

How can I use router or store on a Vue web component if those should be declared on the main.js file?

[DrMabuse23]

I have published a Vue3 compatible version of this package @ https://www.npmjs.com/package/vue3-webcomponent-wrapper. It supports reactive attributes, events & slots. Feel free to use it if you are not keen on shadow-root.
Also please find a demo app that uses my wrapper @ https://github.com/sreenaths/vue3-webcomponent-wrapper-demo

If you have found an issue with the wrapper, please submit a PR on https://github.com/cloudera/hue/tree/master/desktop/core/src/desktop/js/vue/wrapper

i try the demo and it looks like you dont have a shadow root any plans on that ? @sreenaths

[sreenaths]

@DrMabuse23 Sorry that I don't have immediate plans for shadow root .

[sreenaths]

@nunofhfontes Was that question regarding vue3-webcomponent-wrapper?

[fedifazzy]

How can I use router or store on a Vue web component if those should be declared on the main.js file?

You can use it like this:

const createAppWrapper: CreateAppFunction<Element> = (component) => {
  return createApp(component)
  .use(store)
  .use(router)
}

const webComponent = wrapper(RouterViewWrapper, createAppWrapper, h);

[BlahaMarek]

@sreenaths

how can i publish a component and use it in another project ? not whole app, just one component. thanks

[sreenaths]

@BlahaMarek
You could use webpack and build everything into a vanilla javascript file. Publish that file in an NPM package, and load that file in another project using a script tag or import "path/to/file".

For instance following is how we package a er-diagram component.

1. Wrap the component - https://github.com/cloudera/hue/blob/master/desktop/core/src/desktop/js/components/er-diagram/webcomp.ts
2. Build the file using webpack - https://github.com/cloudera/hue/blob/master/webpack.config.npm.js#L95
3. Publish - https://github.com/cloudera/hue/blob/master/package.json#L162
4. Load using a script tag - https://github.com/cloudera/hue/blob/master/tools/examples/components/er-diagram-demo/index.html#L4

Note:
If the other project uses webpack then you could skip the build part all together. Just publish the source as an NPM package and configure the bundler in the other project to bundle everything.

[pawel-marciniak]

Guys, maybe move this discussion about vue3-webcomponent-wrapper package to its repository and keep this issue about official package. Are we have any news about official package? Any progress?