Nuxt•2w ago

I can’t see the store (pinia) in the DevTools when there’s a middleware

This index.vue

<template>
  <div>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
    <button @click="handleOpen">Open Modal</button>
    <button @click="handleClose">Close Modal</button>
  </div>
</template>

<script lang="ts" setup>

definePageMeta({
  middleware: ["auth"],
});

const modalStore = useModalStore();

const handleOpen = () => {
  modalStore.open();
}

const handleClose = () => {
  modalStore.close();
}
</script>

<style></style>

<template>
  <div>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
    <button @click="handleOpen">Open Modal</button>
    <button @click="handleClose">Close Modal</button>
  </div>
</template>

<script lang="ts" setup>

definePageMeta({
  middleware: ["auth"],
});

const modalStore = useModalStore();

const handleOpen = () => {
  modalStore.open();
}

const handleClose = () => {
  modalStore.close();
}
</script>

<style></style>

middeware/auth.ts

export default defineNuxtRouteMiddleware((to) => {
  console.log("Auth middleware (client):", to.path);
});

export default defineNuxtRouteMiddleware((to) => {
  console.log("Auth middleware (client):", to.path);
});

If has auth middleware when open devtools -> pinia not found store, but comment middleware: ["auth"] I can founded modal store

4 Replies

kapa.ai•2w ago

Hi @jetnipat_.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This behavior matches a couple of Nuxt/Pinia “gotchas” shown in the sources: 1. Stores only appear in DevTools after they’re actually used in a component lifecycle.
In the Pinia question, the store didn’t show up at all until it was imported and useUserStore() was called inside a component. [Pinia store init]
You already call useModalStore() in index.vue, so that part is correct. 2. Middleware and navigation can change when the store is created / visible.
Route middleware runs during navigation via Vue Router before the page is rendered. [Route middleware runs]
If middleware causes redirects or errors (even subtle ones), the page component may never mount, so useModalStore() is never executed and the store doesn’t appear in DevTools. From the provided sources there is no specific bug documented that “having any middleware hides Pinia stores from DevTools”. The most likely explanations, based on what is documented: - The auth middleware is preventing the page from fully loading/rendering on the client, so useModalStore() is never called. - Or there’s a navigation loop / redirect pattern similar to the infinite-redirect issues shown in other middleware questions, where route guards keep re‑running and the page never settles enough for stores to be instantiated. [Middleware redirect loop] What you can verify: 1. Ensure the middleware does not redirect or abort in this test:

   // middleware/auth.ts
   export default defineNuxtRouteMiddleware((to, from) => {
     console.log('Auth middleware (client):', to.path)
     // no navigateTo / abortNavigation here
   })

   // middleware/auth.ts
   export default defineNuxtRouteMiddleware((to, from) => {
     console.log('Auth middleware (client):', to.path)
     // no navigateTo / abortNavigation here
   })

Then reload and open DevTools → Pinia. 2. Confirm that useModalStore() is really executed on the client (add a console.log('modal store used') right after calling it in index.vue). If with a no-op middleware the page renders (you see the console log from index.vue), but the store still never appears in DevTools, that specific interaction (DevTools + Pinia + route middleware) is not described in the provided sources, so I can’t point to an official Nuxt bug or configuration fix from these documents. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@917899762546651175> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

jetnipat_.OP•2w ago

I just noticed that when I first open the page, the stores show up. But after refreshing the page the second or third time, the stores disappear. Sometimes when I refresh the page, the store shows up, but most of the time it doesn’t.

jetnipat_.OP•2w ago

I just tried enabling ‘Disable cache’, and now the store shows up every time I open the page.

Gaming

Programming

I can’t see the store (pinia) in the DevTools when there’s a middleware

Did you find this page helpful?