Using pinia with multiple vue apps bundled (Webpack specific)

[zisvh]

Hi, I have a project where my pinia store's state is an array of notifications to be displayed.

I have a symfony app that uses small vue apps for the frontend, both are compiled with webpack in the following way:

// webpack.config.js
    .addEntry('vueApp', './assets/vueApp.js')
    .addEntry('modalApp', './assets/modalApp.js')

The idea is that, in the following graph I want to have a pinia.js file that will:

• create a pinia instance
• let this instance be used in the notification vue app (yellow), and any other app that wants to display notifications

However, when I do this:

import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

and import it in multiple files, it, for some reason, creates multiples instances, making the state not persistent across apps.

Graph of my architecture: