how should I use pinia outside of setup in Nuxt3

[171h]

What problem is this solving

I want to use pinia outside of setup in Nuxt3, so i get the $pinia from useNuxtApp().$pinia, however useNuxtApp is a composable meant to be called in composables, plugins and components.

Although vueuse privide createGlobalState composable can be used global, but I want to use pinia, did I not find the correct way to use pinia?

// I want to use below
const store = useCalendarStore(useNuxtApp().$pinia)

// error report
nuxt.js:213 Uncaught Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more athttps://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables`.
at useNuxtApp (nuxt.js:213:13)
``

Proposed solution

how should I use pinia outside of setup in Nuxt3.

Describe alternatives you've considered

No response

[onurusluca]

@171h Hi, have you found a solution for this problem? I am currently having a similar problem where I want to use pinia with Phaser, outside of Nuxt's reach.

[angelhdzdev]

I don't think there's nothing that can be done. Even if you manage to use useNuxtApp out of the required contexes (which I didn't manage to when I played with it), you still have the active pinia problem: You can't access a store before the pinia instance is installed as a Vue plugin in the vueApp.

I recommend using a composable. Using a composable you get sure both Nuxt and Pinia are ready.

export default useMyComposable = () => {
   // This will be called in a time where both useNuxtApp and $pinia will be ready
   const {$pinia} = useNuxtApp()
   // But we don't need $pinia instance anymore because we can use the other stores here
   const someOtherStore = useSomeOtherStore()
   
   const instanceOfClassThatNeedsPinia = new SomeClassThatNeedsPinia($pinia)
   
   SomeClassStaticMethodThatNeedsPinia.someMethod($pinia)
   
   someFunctionThatNeedsPinia($pinia)
   
   // But all those functions and classes can access the stores at this time so no need to pass the $pinia instance to them
   
   return {
     instanceOfClassThatNeedsPinia ,
   }
}

And when you call useMyComposable it will be either in a Vue component, a middleware/route guard, an action in a Pinia store, in a vue plugin, a nuxt plugin, a nuxt module,
or inside a function that will be called in a [insert everything mentioned earlier].

But if for example you call useMyComposable() out of a defineStore, in the root of a file, you will get:

getActivePinia was called with no active Pinia. Did you forget to install pinia?

Another solution is using a Nuxt Module which you can hook up to different hooks/events like ready, app:mounted, nitro:ready, listen, pages:extend, etc. https://nuxt.com/docs/api/advanced/hooks

Either way, in order to access $pinia, you need to give time to it be ready, and that time is given when you put your logic inside a composable that gets called in a time where $pinia is ready.

Let's say you REALLY, REALLY don't want to wait to use pinia, the most you can do is forget about the @pinia/nuxt module, and install pinia yourself, so you will create a nuxt plugin to do so:

useSomeStore() // Error! Pinia is not ready!
new SomeClassInstanceThatNeedsPinia().someMethod() // Error! Pinia is not ready!

export default defineNuxtPlugin(({vueApp}) => {
const pinia = createPinia()

vueApp.use(pinia);

// Do your logic here because pinia is now installed/ready, but guess what!? You are still inside a composable/function!!! 😂
})

Feel free to let me know if anything I've said is wrong. I'm always learning and reading the official documentations.

But from the Nuxt documentation link in your error about auto imports:

https://nuxt.com/docs/guide/going-further/modules

https://pinia.vuejs.org/core-concepts/outside-component-usage.html

Wishing you health, peace, and success.