Vue3 Webcomponents share Pinia Store

[m1rm]

During work I came across the need to embed a web component built with Vue3 and Vue's defineCustomElement function into another website more than one time.

The web component is rather complex with one "root level" Vue file that uses several other normal Vue components, so I made a simple reproducer that showcases my finding: https://github.com/m1rm/vue3-webcomponent-reproducer/tree/main

Although it is made clear in the pinia documentation, that pinia stores are global (that's why we use/want/need stores), I did not expect the web components to share state.

The only way I found (apart from encapsulating the web component in an iFrame) to separate the stores between web components would be to pass a unique ID to the store upon instance creation of the web component.

--> Edit: I added a provide/inject example in the reproducer and I think that would work, too.

For the real-world use case of my company that would mean to also pass this unique ID generated in the "root level" Vue-file down to all child components via a prop (a technique called "prop drilling"). But this is against the intention/idea of using a store and we then could not use a store at all (with all the downs coming from not using one regarding shared state within the web component). Also, using Vue's provide/inject is a document Vue-way but I would rather expect Vue to handle scoping everything to the web component for me.

I wonder if
a) the behavior of pinia is intended for surpassing the borders of web components
b) there is any better solution out there (preferably without the use of internal APIs like showcased here https://rimdev.io/vue-3-custom-elements)

Related discussions: #840 -> leaves out the web component part as far as I understood

[akuehnis]

I run into the same problem. I hve tried to avoid Pinia and use a standard Vue reactive as described here:

https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api

Unfortunately, the problem is exaxtely the same: Multiple customElements on the same page share the same state.

[akuehnis]

I have found a solution that seams to work. I am using vite, vue3 and pinia.

• It is important to call the useMainStore function inside the setup part of each components.
• As defineCustomElement() does not provide a possibility for use(pinia), setActivePinia(createPinia()) is called within them main App component

In my application it now works, I can use my-superelement multiple times on the same page, each using it's own store.

// main.js
import {defineCustomElement} from 'vue'
import App from './App.vue'
import styles_lic from "./styles.lic.css?raw"
App.styles = [styles_lic];
const TheElement = defineCustomElement(App);
customElements.define('my-superelement', TheElement);

// plugins/Store.js
import {defineStore} from "pinia"
export const useMainStore = defineStore("main", {
    state: () => ({
    }),
    getters: {   
    },
    actions: {
    }
    
})

// App.vue
<script setup >
  import {createPinia, setActivePinia} from "pinia"
  import useMainStore from "@/plugins/Store"
  setActivePinia(createPinia());
  const Store = useMainStore();
 ...
</script>

// AnyComponent.vue
<script setup >
  import useMainStore from "@/plugins/Store"
  const Store = useMainStore();
 ...
</script>