#Nuxt4 Pinia is not displaying on devtools when redirecting from pages/index.vue to pages/[market]/in

5 messages · Page 1 of 1 (latest)

cobalt hearthBOT
#

Hi @low rivet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, there is no direct mention of the exact issue where Pinia does not display in devtools specifically when redirecting from pages/index.vue to a dynamic route like pages/[market]/index.vue in Nuxt 4. However, there are several related points and common pitfalls that may help clarify or troubleshoot your situation:

  1. Pinia Store Initialization in Nuxt
    For Pinia stores to appear in devtools and be properly initialized, you must actually use (import and call) the store in a component that is rendered. Simply defining the store or using it only in middleware or plugins is not enough. In a similar Stack Overflow case, the store did not show up in devtools until it was imported and used in a component's <script setup> block:

    <script setup>
import { useUserStore } from 'stores/user.js'
const userStore = useUserStore()
</script>

    This is necessary for Pinia to register the store instance and make it visible in devtools. If you only set values in middleware or plugins, but never use the store in a component, it will not appear in devtools or be reactive in the app as expected Stack Overflow: Pinia store does not initialise.

  2. Middleware and Plugin Execution Order
    There was a concern in the Nuxt community about the order of plugin and middleware execution. However, it was clarified that plugins are loaded before middleware, so your plugins (where you might set default values) should be available by the time middleware runs. This means you can safely use your store in middleware, but again, you must also use the store in a component for it to be initialized and visible Github Issue: middleware is loaded before plugins.

#

  1. Pinia Installation
    Ensure that both @pinia/nuxt and pinia are installed as dependencies. There have been issues where only installing @pinia/nuxt led to unexpected behavior. Adding pinia as a direct dependency resolved issues for several users Github Issue: showError bug triggers 500 error with Pinia store.

  2. Store Usage in Middleware
    While you can set values in the store from middleware, the store must still be used in a component to be properly initialized. If you set values in middleware but never use the store in a page or layout component, those values may not be reactive or visible in devtools.

Summary:

  • Always import and use your Pinia store in a component that is rendered, not just in middleware or plugins.
  • Ensure both @pinia/nuxt and pinia are installed.
  • Plugins run before middleware, so you can set defaults in plugins and use them in middleware.
  • If you still do not see the store in devtools, double-check that the store is used in a rendered component after the redirect.

If you follow these steps and still encounter issues, the knowledge sources do not provide further details specific to your redirect scenario. You may want to share a minimal reproduction for more targeted help.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

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

fallen adder
#

I have the same issue