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?