How to pass custom props and consume inside the created web component

[Trav1sRen]

Hi, my aim is to expose the Vue3 app to the other frameworks as a web component. But I wanna pass some custom options to the web component. What is the proper way to achieve this after using this createWebComponent wrapper?

[EranGrin]

Hi, I’d suggest checking the examples in the documentation — they could be a good starting point. https://stackblitz.com/edit/vue-web-component-wrapper?file=README.md&startScript=vite-demo

[kazbekaskarov]

index.html

<your-component id="component-container" custom-prop-1="prop" custom-prop-2="prop" custom-prop-3="prop" custom-prop-4="prop">
  </your-component>
 <script type="module" src="/src/main.ts"></script>

App.vue

<template>
  <div><router-view /></div>
</template>

<script setup lang="ts">
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  customProp1: String,
  customProp2: String,
  customProp3: String,
  customProp4: String,

});

store.dispatch("setCustomProp1", props.customProp1);
store.dispatch("setCustomProp2", props.customProp2);
store.dispatch("setCustomProp3", props.customProp3);
store.dispatch("setCustomProp4", props.customProp4);
</script>