Pinia usage in Micro Frontends

[ljcremer]

We are investigating the use of Micro Frontends in our Vue applications architecture.

Would the Pinia stores in different Micro Frontends within the same Vue application be accessible from each other?

[posva]

It should be, yes. You must use the same pinia instance for all apps so they share the same state.

[thespacedeck]

Hi @posva,

This sounds great. What would be the best strategy for sharing such an instance accross the microfrontends (Vue instances)? Perhaps with:

if (isClient) {
  pinia = JSON.parse(window.__pinia)
}

Thank you for your input.
Rgds

[posva]

That really depends on your application structure. Make sure you use the same pinia object (don't serialize it, only the state should be serialized, like shown in docs) for all apps:

const pinia = createPinia()

const app1 = createApp(App1)
app1.use(pinia)
const app2 = createApp(App2)
app2.use(pinia)