Nuxt•5w ago

Nuxt 4 breaks Pinia

Since i made the upgrade to Nuxt 4 (4.0.2), Pinia is broken. Which versions of the packages (pinia and @pinia/nuxt) should we use ?

8 Replies

kapa.ai•5w ago

Hi @Etienne. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- After upgrading to Nuxt 4, it is important to have both the pinia and @pinia/nuxt packages installed as direct dependencies. Several users have reported that only having @pinia/nuxt is not sufficient and leads to errors; explicitly installing pinia resolves these issues. For Nuxt 4, you should use: - @pinia/nuxt: latest compatible version (e.g., 0.11.x) - pinia: latest compatible version (e.g., 3.x) Example from user reports:

"dependencies": {
  "@pinia/nuxt": "0.11.1",
  "pinia": "3.0.3"
}

"dependencies": {
  "@pinia/nuxt": "0.11.1",
  "pinia": "3.0.3"
}

This combination has been confirmed to resolve issues with Pinia not working after upgrading to Nuxt 4. Make sure both packages are present in your dependencies, not just @pinia/nuxt. If you are still experiencing issues, ensure you are not using an outdated version of either package and that your lockfile is up to date. For more details, see the related discussions and solutions provided by contributors and users in the Nuxt repository here and here. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

EtienneOP•5w ago

@kapa.ai Yes, I even have 0.11.2 and it doesn't work. Like on dev, works perfectly. When i build : it works on client-side nav, but breaks on server-side load

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, several users have reported that after upgrading to Nuxt 4, Pinia works in development and on client-side navigation, but breaks on server-side load or during SSR. The most common solution reported is to ensure that both @pinia/nuxt and pinia are installed as direct dependencies. However, you mentioned you already have @pinia/nuxt@0.11.2 and are still experiencing issues. There are multiple related issues where users describe similar symptoms—SSR breaking with errors like obj.hasOwnProperty is not a function or hydration errors. In these cases, explicitly installing pinia as a direct dependency (not just @pinia/nuxt) resolved the problem for many users. For example:

"dependencies": {
  "@pinia/nuxt": "0.11.1",
  "pinia": "3.0.3"
}

"dependencies": {
  "@pinia/nuxt": "0.11.1",
  "pinia": "3.0.3"
}

If you already have both packages installed and the issue persists, the knowledge sources do not provide a definitive solution beyond this step. The problem seems to be related to how Nuxt 4 and Pinia interact during SSR, and may require further investigation or a fix from the maintainers. You may want to follow or contribute to ongoing discussions in the Nuxt and Pinia repositories for updates or workarounds as they become available see related issue. In summary:
- Make sure both @pinia/nuxt and pinia are direct dependencies. - If the issue persists even with the correct versions, the knowledge sources do not provide a further solution at this time.
- This appears to be a known issue affecting some users after upgrading to Nuxt 4, especially in SSR mode. If you have already tried these steps, you may need to wait for an upstream fix or further guidance from the Nuxt or Pinia teams. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

dmarr•5w ago

bummer! I see their nuxt module is still at v3 nuxt. can you try using --legacy-peer-deps when you install?

manniL•5w ago

This should be fixed and also released (changelog)

GitHub

fix(nuxt): mark compatibility for nuxt v4 stable (#3009) · vuejs/p...

* fix(nuxt): mark compatibility for nuxt v4 stable * chore: simplify compatibility

GitHub

Release @pinia/nuxt@0.11.2 · vuejs/pinia

release: @pinia/nuxt@0.11.2

GitHub

pinia/packages/nuxt/CHANGELOG.md at v3 · vuejs/pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support - vuejs/pinia

EtienneOP•5w ago

Hey guys ! Thanks for your answers. After re-upgrading, i still had some issues bumped by Pinia, but after digging for the whole night, it was due to my radix-vue version. After upgrading to last version, it's now fixed. Thanks a lot !

Gaming

Programming

Nuxt 4 breaks Pinia

Did you find this page helpful?