useNuxtApp() and useRuntimeConfig not available in pinia store during SSR

Environment

---

• Operating System: Darwin
• Node Version: v18.7.0
• Nuxt Version: 2.16.0-27616340.013f051b
• Package Manager: yarn@3.2.1
• Builder: webpack
• User Config: buildDir, srcDir, bridge, components, ssr, dev, alias, image, generate, head, typescript, publicRuntimeConfig, privateRuntimeConfig, css, loading, loadingIndicator, plugins, buildModules, modules, proxy, axios, vuetify, build, serverHandlers, devServerHandlers
• Runtime Modules: @nuxtjs/vuetify@1.12.3, @nuxt/image@0.7.1, @nuxtjs/axios@5.13.6, @nuxtjs/proxy@2.1.0, nuxt-social-meta@1.0.0
• Build Modules: (), nuxt-storm@1.1.3, nuxt-compress@5.0.0, @pinia/nuxt@0.3.1, ~/modules/apolloSSR, @nuxt/bridge@3.0.0-27639120.e7a7f9b

---

Reproduction

https://github.com/vuejs/pinia/discussions/1526

Describe the bug

I am getting this error

When running this pinia actions during SSR

I rolled back to the old this.$nuxt for now to temporarily solve the issue

Additional context

The page being loaded uses the default.vue layout which has an apollo query “labels”

So that, together with this query causes the error.

No response

Logs

No response

[antlionguard]

@stephenjason89 this.$nuxt is unavailable in latest pinia 😦 vuejs/pinia#1526

It’s available now but not have a type support.

[tubstrr]

I struggled with this for a while, the solution for me was to instantiate the store before I called a method inside of it.

In my use case, I was trying to build Bread Crumbs aided by the current Route, my code looked like this:

export const useBreadCrumbStore = defineStore("breadcrumbs", () => {

  const { currentRoute } = useRouter();

  const makeBreadcrumbList = () => {
    const fullPath = currentRoute.value.fullPath;
    
    fullPath.split("/").forEach((path, index) => {
     ...
    }
  }
}

Which would error out with the Nuxt Instance Unavailable.

What I ended up having to do, was to call the store on my page, before my useSEO composable which actually calls the “makeBreadcumbList” function.

I found this doc on Pinia’s site which clarified what was happening in my case.
https://pinia.vuejs.org/core-concepts/outside-component-usage.html

Hope this helps.