Nuxt 3 - Async Middleware - No active Pinia

[psycongaroo]

Reproduction

no reproduction link

Steps to reproduce the bug

import { useUserStore } from "~/stores/user";

export default defineNuxtRouteMiddleware(async () => {
    // check if user is authenticated by using cookie and pinia

    const session = useCookie('laravel_session').value || null
    const userStore = useUserStore();
    
    await userStore.fetchUser();

})

Expected behavior

Pinia should load on async middleware too..

Actual behavior

getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

Using async middleware, pinia is not getting started.

Additional information

No response

[psycongaroo]

🤔

[itsNeutron]

I have the same issue, need a fix asap..

[psycongaroo]

Hope @posva can help us.

[JonnyJDEV]

I thought I was the only one having this issue :/
any solution?

[psycongaroo]

👁️👄👁️

[itsNeutron]

Bump, hoping for an answer/fix

[psycongaroo]

awesome :)

[vis97c]

Try to move the userStore const outside the middleware.

[oyed]

Also seem to be having this issue.

I've tried using the Nuxt Context to provide the $pinia instance, but its undefined due to the fact that Middleware is loaded before Plugins.

import { useUserStore } from '@/store';

export default defineNuxtRouteMiddleware(async () => {
    const app = useNuxtApp();
    const store = useUserStore(app.$pinia);

    store.user = {};
});

I'm not sure if this is going to be possible as a result, unless Nuxt moves Middleware to load after Plugins (I can only assume they built it that way for a reason).

For now, I've gotten Middleware to load after Plugins by defining dynamic Middleware inside a Plugin:

import { useUserStore } from '@/store';

export default defineNuxtPlugin(nuxt => {
    const store = useUserStore(nuxt.$pinia);

    addRouteMiddleware('my-middleware', async () => {
        // TODO:
    }, { global: true });
});

[serhez]

Is there any updates on this issue? I am still having the problem using RC 3.

[joaop-oliveira1]

Also having this issue, no fix in sight?

[pipinet]

Is there any updates on this issue?

[gardun0]

I'm in RC 5 and still facing this issue.

[sxgrant]

I think this is fixed? I was having this issue some time back, and I was just revisiting some older code from that time and it seems to work. Perhaps this fix is what changed: nuxt/framework#4645

My code puts a simple counter in a pinia store, and increments it in route middleware. This is using RC6
I see page count incremented once on server-side, then once on client side for each subsequent page navigation (so page console logs start at 2, having already incremented once server-side). The count resets on page refresh

export default defineNuxtRouteMiddleware((to, from) => {
    const pageMetaStore = usePageMetaStore()
    pageMetaStore.incrementPageCount()
    console.log(`Page count is now: ${pageMetaStore.sessionPageCount} `)
})

export const usePageMetaStore = defineStore({
    id: 'page-meta',
    state: () => {
        return {
            sessionPageCount: 0, 
        }
    },
    actions: {
        incrementPageCount() { this.sessionPageCount++ }
    }
})

Server logs:

✔ Vite server built in 238ms                                                                                                                                                                                              
Page count is now: 1 

Client logs:

Page count is now: 2 
Page count is now: 3 
Page count is now: 4 

[eserini]

In 3.6.1 does not work anymore, probably a regression?

[teco-yokoyama]

RC6 not happened, but RC7 happened.

[ayophanz]

same here I have issue pinia in middleware.

[markgibbons25]

I've set up an example of it working in RC9 https://stackblitz.com/edit/github-tc2xr9?file=pages%2Fsecret.vue,app.vue,middleware%2Falways-run.global.ts&theme=light thanks to @sxgrant

[res63661]

This seems to work but are we comfortable with the idea of instancing the store every single time a page is requested? If this is handled as a Singleton underneath the covers by pinia then we are probably good otherwise do we need a better way long term?

[eserini]

It was working up until i updated to 3.6.1 from 3.2.3, now we're back to square one it seems.

[thunderrun]

For anyone using composables with @pinia/nuxt run into getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

import { useSettingsStore } from '~/store/settings';

export const apiFetch = $fetch.create({
    headers: {
        plant: useSettingsStore().selectedPlant
    },
});

Wrap your functions =>

import { useSettingsStore } from '~/store/settings';

export const apiFetch = (url, options) => $fetch.create({
    headers: {
        plant: useSettingsStore().selectedPlant
    },
})(url, options);

So composable functions will have access to the latest state in the store, and that any changes to the state are automatically reflected in the component. But this creates a new instance every time it is called, which can be expensive and also lead to unnecessary overhead and decreased performance. Use $fetch directly may be better:

export const apiFetch = (url, options) => $fetch(url, {
    ...options,
    headers: {
        plant: useSettingsStore().selectedPlant,
        ....options.headers
    },
});

There are no errors in older versions of @pinia/nuxt.