Use Pinia store between Vue and Web components

[kduvignau]

Hello,

I 'm working on a vue 3 application using regular Vue components. One of our component is a web component.

As stated in the official documentation , we cannot use provide/inject between Vue & Web componenets

Provide / Inject
The Provide / Inject API and its Composition API equivalent also work between Vue-defined custom elements. However, note that this works only between custom elements. i.e. a Vue-defined custom element won't be able to inject properties provided by a non-custom-element Vue component.

Is it a good idea to use Pinia to share data between Vue and Web components instead?

It works locally in a small project, however I have this warning in the console :

[Vue warn]: injection "Symbol(pinia)" not found. 
  at <Counter.ce >

Here is the playground with the code : https://stackblitz.com/edit/vitejs-vite-chvrvs?file=src/App.vue

In our app, we would like to use a web component to display a custom element in a TinyMCE editor

Thank you!