How to use usePinia inside a Nuxt3 app?

[lucavenir]

Hi there,

How are we supposed to install Pinia in Nuxt3? I'm following the documentation here that says:

npm install pinia
[...]
If you are using Nuxt, you should follow these instructions.

But this results in an error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vue@3.2.37
npm ERR! node_modules/vue
npm ERR!   peer vue@"^3.2.37" from @nuxt/vite-builder@3.0.0-rc.6
npm ERR!   node_modules/@nuxt/vite-builder
npm ERR!     @nuxt/vite-builder@"^3.0.0-rc.6" from nuxt@3.0.0-rc.6
npm ERR!     node_modules/nuxt
npm ERR!       dev nuxt@"3.0.0-rc.6" from the root project
npm ERR!   peer vue@"^3.2.25" from @vitejs/plugin-vue@2.3.3
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     @vitejs/plugin-vue@"^2.3.3" from @nuxt/vite-builder@3.0.0-rc.6
npm ERR!     node_modules/@nuxt/vite-builder
npm ERR!       @nuxt/vite-builder@"^3.0.0-rc.6" from nuxt@3.0.0-rc.6
npm ERR!       node_modules/nuxt
npm ERR!         dev nuxt@"3.0.0-rc.6" from the root project
npm ERR!   5 more (@vue/server-renderer, @vueuse/head, nuxt, vue-demi, vue-router)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! pinia@"^2.0.17" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.0
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.4.0" from pinia@2.0.17
npm ERR!     node_modules/pinia
npm ERR!       pinia@"^2.0.17" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/user/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2022-08-10T08_25_15_812Z-debug-0.log

Maybe I wasn't supposed to npm install pinia before following these instructions about Nuxt3. Such instructions mention:

npm install @pinia/nuxt

And then, add '@pinia/nuxt' to the modules inside nuxt.config.ts.

This won't produce any npm install errors, but I can't use defineStore as the module pinia is not found. Nor defineStore can be found inside pinia@nuxt. I still can't npm install pinia because of the above error, so I'm stuck without being able to use my stores in my Nuxt3 project.

I tried and searched some answers on the web, and I could find this example. This example indeed installs both pinia and @pinia/nuxt. But again, my npm install fails to deliver as it shows a conflict.

I tried and searched / read the repo here for usage of usePinia and its testing, but I found nothing.

I'm opening this issue as I find necessary to document better the installation process on Nuxt3. I'd like to help too, if I only knew how to actually make this work.

[lucavenir]

I'm closing this discussion as I created an issue about this.

#1536