vulcangz / svelte-webcomponent-in-react-vue

Simple experiments to integrate web components created with Svelte in React or Vue applications

svelte-webcomponent-in-react-vue

Simple experiments to integrate web components created with Svelte in React or Vue applications.

在 React 或 Vue 2, Vue 3 应用程序中整合用 Svelte 创建的 Web 组件的简单实验。

The code was written for this article.

lerna branch(default)

To add a demo package for Vue 3, Using lerna as monorepo tool. If it is not already installed, you can install it with the following command.

# via npm
npm install -g lerna
# via yarn
yarn global add lerna

Then:

git clone https://github.com/vulcangz/svelte-webcomponent-in-react-vue.git
cd svelte-webcomponent-in-react-vue
npm run init
npm run build

# after that, you can test my-counter web component now
npm run react
# or
npm run vue2
# or
npm run vue3

bolt branch

Adding project management with bolt. If it is not already installed, you can install it with the following command.

yarn global add bolt 

Then:

git clone https://github.com/vulcangz/svelte-webcomponent-in-react-vue.git -b bolt
cd svelte-webcomponent-in-react-vue
bolt install
bolt svelte
bolt vue

# In another terminal window
bolt react

Credits and Inspiration

• All the Ways to Make a Web Component - January 2021 Update on WebComponents.dev By <div>riots
• USING SVELTE IN PRODUCTION By Daniel Mies
• Integrate Web Components with Your Vue.js App By Joshua Bemenderfer