Pinia with microfrontends

[dudziema]

How Pinia store should be implemented for microfrontends using ModuleFederationPlugin with webpack? Pinia works separetly in both apps but when I run wrapper with micro frontend inside I have below error and component inside is not rendered:

pinia.mjs:1696 Uncaught (in promise) Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.
at useStore (pinia.mjs:1696:1)
at setup (Header.vue:13:34)
at callWithErrorHandling (runtime-core.esm-bundler.js:157:1)
at setupStatefulComponent (runtime-core.esm-bundler.js:7246:1)
at setupComponent (runtime-core.esm-bundler.js:7201:1)
at mountComponent (runtime-core.esm-bundler.js:5524:1)
at processComponent (runtime-core.esm-bundler.js:5499:1)
at patch (runtime-core.esm-bundler.js:5101:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5711:1)
at ReactiveEffect.run (reactivity.esm-bundler.js:187:1)

I tried multiple times but I failed anyway. I need some guidance how to fix it.

[RobyCigar]

are you trying to access state from one apps to another apps? i think thats not possible since pinia only work within an apps

[unn3daby]

did you fix it?

[posva]

You seem to have multiple instances of the library pinia being used. Make sure vue, pinia, and other libraries are not inlined in your final bundles so they don't get duplicated

[TNGD-YQ]

In the same app, components share state by referring to the same Pinia instance, which is registered during the initialization of the Vue app. However, an error occurs in a micro-frontend (MF) setup when you attempt to share the Pinia state across multiple apps.

A potential solution is to manually pass your Pinia instance into the hook, like this:

const shareStore = useShareStore(pinia)

I’m currently using this approach. While it feels a bit unconventional to me, I haven’t noticed any issues so far. I’d love to hear your thoughts or suggestions for improvement!

[husayt]

This is an old question and it mentions webpack. Currently we have module federation for vite and it is based on MF2 which is bundler agnostic. So if you are using Pinia with MF would be best to share the same instance of pinia across all remotes. This is the very thing MF can help you with, just declare pinia a shared singleton see here

[MaksSieve]

Sorry for reanimating this dead discussion, but I have the same auestion. i.e. I have this component and store:

// remote ./src/Button.vue
<template>
  <div>
    <h3>Remote button {{ name }}</h3>
    <button @click="store.counter++">
      Click me!
    </button>
    <span>{{ store.counter }}</span>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '~/store/counter';

defineProps<{name: string}>();

const store = useCounterStore()
</script>

// remote store/counter.ts
import { defineStore } from "pinia";

export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0
  })
})

what I should expose/import to use this in host app

[Mohsen-graphyy]

can you share more details ?