How to use it in Vue

[laxmangaian]

Doc says we can utilise the custom elements in other Frameworks. But I don't find any example how to refs/achieve it. Please provide an Example usage of custom elements generated using React-to-web-component in other Frameworks.

[tombohub]

did you find solution?

[laxmangaian]

did you find solution?

still waiting for their response

[tombohub]

I've done it yesterday for react, had to read few answers, their blog post, check 5 repositories. Check other questions and answers here, there are bits and pieces and need to collect them.

I am using vite. Gist is, you have to build component it as umd.cjs module with vite build.lib, it will be in dist folder. Then you take that umd.cjs file and put it in your vue project and include it in main index.html file in script tag, like you would normal vanilla javascript package. After that you should be able to use it wherever you want with <my-component></my-component>

[christopherjbaker]

Sorry, I missed this conversation. I set a reminder to check here more thoroughly.

We are planning to write a guide on exactly this in the near future. It will work out of the box with frameworks, but we are also planning to investigate if we can directly improve interactions with both Vue and Angular.

@tombohub Has it right though. Create a React project with Vite and update your index.ts to create the Web Component instead of mounting it directly. When you make a build, it should create a single javascript file. Include that file on any HTML page, and you can use the web component on that page. You won't need to modify your parent build system, just drop it in..

[laxmangaian]

We are planning to write a guide on exactly this in the near future. It will work out of the box with frameworks, but we are also planning to investigate if we can directly improve interactions with both Vue and Angular.

Thanks. Can we expect it to work for different frameworks anytime soon?

[ZhouJiahao228]

Do you have a specific solution now?

[Verthon]

Hi, I ran the React-based webcomponent using React-to-web-component in Vue. The example is very simple, I use RSBuild on the React side instead of Vite, but I'm pretty much sure, the same rules apply.

Web component bundler (RSBuild) setup https://github.com/Verthon/react-to-webcomponents/blob/master/widget/rsbuild.config.ts
I create always one JS chunk, I couldn't make it work with multiple async chunks. https://github.com/Verthon/react-to-webcomponents/blob/master/widget/rsbuild.config.ts#L23

Then like @christopherjbaker and @tombohub said before you don't mount React - you just create web-component with react-to-webcomponent API:
https://github.com/Verthon/react-to-webcomponents/blob/master/widget/src/index.tsx#L9

Then on the Vue client you simply add the script tag pointing to the chunk generated in React Web Component
https://github.com/Verthon/react-to-webcomponents/blob/master/client-vue/index.html#L12

Hope it clarifies a bit. BTW you have to use one-chunk there I no way to use multiple async chunks for instance ?