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

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

Good day, I am trying to migrate my code from vue 3 to Nuxt v4 and I was trying to setup on the index page where the page content should be based on the dynamic param "market".

So I tried to redirect to a default market using a middleware on pages/index.vue route to pages/[market]/index.vue this somehow causes my pinia not loading and hence it is not displaying on the devtools. If I don't use plugins to set the defaultMarket and defaultLanguage it won't even print out the stored value in userStore on pages/[market]/index.vue (even though I already assigned it in the middleware).

Below are my code and if anyone can shine some light on what am I handling or understanding wrongly would be awesome.

NOTE: I found a post with a similar issue but that would still not solve the issue on how can I make pinia to be loaded so I can debug it on devtools. Nuxt Pinia State doesn't persist when set from middleware

pages/index.vue

<template></template>

<script setup lang="ts">
definePageMeta({
    middleware: ['redirect-default-market']
});
</script>

<style scoped></style>

middleware/redirectDefaultMarket.ts

export default defineNuxtRouteMiddleware((to, from) => {
    const runtimeConfig = useRuntimeConfig();
    const userStore = useUserStore();

    console.log('in middle ware');
    if (to.path === '/') {
        const defaultMarket = runtimeConfig.public.defaultMarket;
        const defaultLang = runtimeConfig.public.defaultLang;

        userStore.setMarket(defaultMarket);
        userStore.setLanguage(defaultLang);

        return navigateTo(`/${userStore.getMarket()}?lang=${userStore.getLanguage()}`, { replace: true });
    }
});

pages/[market]/index.vue

<template
    <h1>Index Page</h1>
    {{ runtimeConfig.public.appTitle }} <br />
    {{ runtimeConfig.public }} <br />
    <client-only>
        Route Param: {{ route.params.market }} <br />
        UserStore: {{ userStore.getMarket() }} && {{ userStore.getLanguage() }}
    </client-only>
</template>

<script setup lang="ts">
const elementStore = useElementStore();
const appStore = useAppStore();
const userStore = useUserStore();
const runtimeConfig = useRuntimeConfig();
const route = useRoute();
</script>

I expect that Pinia is loaded in client side and display on devtools so I can check on the stores variables. Furthermore, in pages/[market]/index.vue should print out the userStore

Note: After developing for couple of days. I found out that to have Pinia display I need to click on this App 3 inside devtools and it will install all the Pinia as shown on the picture below. I have no explanation why it behave like that but at least I got it showing and working as usual now.

Picture

Solution

Picture