Trying to use pinia store in plugin provided by custom module
I have a custom module that has begun to fail outside of it's own playground since updating to nuxt 3.16.2. The problem is that when workign on the module the playground runs as expected. After building and importing into a local project we get the dreaded:
Uncaught Error: [:pineapple:]: "getActivePinia()" was called but there was no active Pinia. error from pinia.
Our plugin looks like this:
```typescript
export default defineNuxtPlugin(async (NuxtApp) => {
const voixConfig = useRuntimeConfig().public.voix.options as unknown as VoixModuleOptionsInterface
const voixOptions = Object.assign({}, voixConfig)
if (!voixOptions.languages?.length) {
voixOptions.languages = [
{
code: 'en',
name: 'English',
icon: '๐บ๐ธ',
},
]
}
let voix: IVoix = {
options: voixOptions,
breakpoint: ref(''),
}
const sliceStore = useSliceStore()
// eslint-disable-next-line ts/no-unsafe-assignment
sliceStore.slices = slicesConfig
const layoutStore = useLayoutStore()
// eslint-disable-next-line ts/no-unsafe-assignment
layoutStore.layouts = layoutsConfig
NuxtApp.vueApp.directive('voix-text', vVoixText)
NuxtApp.vueApp.directive('voix-text-color', vVoixTextColor)
NuxtApp.vueApp.directive('voix-background-color', vVoixBackgroundColor)
NuxtApp.vueApp.directive('voix-visibility', vVoixVisibility)
NuxtApp.vueApp.directive('voix-popper', vVoixPopper)
voix = voixBreakpointsSetup(voix)
voix = voixFetchSetup(voix)
voix = voixEventsSetup(voix)
authMiddlewareSetup()
voixApplicationSetup()
// Injects into the application for global use
return {
provide: {
voix,
},
}
})4 Replies
Hi @Gary. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue you're experiencing with Pinia in Nuxt 3.16.0+ is a known problem. Since the 3.16.0 update, there have been changes in how Pinia is initialized, causing the "getActivePinia()" error when trying to use Pinia stores outside of components or before Pinia is fully initialized.
The Problem
In your plugin, you're trying to access Pinia stores (
useSliceStore() and useLayoutStore()) directly, but in Nuxt 3.16.0+, this can cause issues because the Pinia instance might not be active yet when your plugin runs.
Solution
Based on the knowledge sources, there are a few approaches to fix this:
1. Use useNuxtApp().runWithContext() to ensure your store access happens within the proper Nuxt context:
This approach was mentioned as a solution in one of the GitHub issues: Cannot read properties of undefined (reading '_s') where a user reported that using return useNuxtApp().runWithContext(() => useStore()) solved their problem.
Additional Context
This issue appears to be related to changes in Nuxt 3.16.0 that affect how Pinia is initialized. Several users have reported similar problems in various GitHub issues:
- In issue #31416, users reported the same "no active pinia instance" error after upgrading to 3.16.0 in v 3.16 i have error that no active pinia instance
- Another user in issue #22943 confirmed the error also occurs in 3.16.0 nuxt 3.7.0 - "getActivePinia()" was called but there was no active Pinia
If the above solution doesn't work, you might need to consider:
1. Ensuring you have the latest version of @pinia/nuxt installed
2. Making sure it's properly added to your modules in nuxt.config.ts
3. Consider downgrading to Nuxt 3.15.4 temporarily if needed, as some users reported this version works correctly
Let me know if this solution resolves your issue!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@477504252344795136> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Here is what I ended up doing:
It may have something to do with multiple pinias? Unsure. See https://github.com/vuejs/pinia/discussions/2378
GitHub
Nuxt Layer support ยท vuejs pinia ยท Discussion #2378
What problem is this solving Allow the possibility to use pinia with nuxt layers. Proposed solution It would be awesome to have Nuxt layer support similar to nuxt/i18n, where the default stores are...