How do you use Pinia with Nuxt.js?
Answer
Pinia integrates with Nuxt through the @pinia/nuxt module. After installing both packages and adding '@pinia/nuxt' to the modules array in nuxt.config.ts, stores defined in the stores/ directory are auto-imported. You define a store with defineStore('user', () => { const name = ref(''); return { name } }). The key Nuxt-specific consideration is SSR safety: since multiple requests share the server environment, each request must get its own store instance. Pinia handles this automatically with Nuxt by creating a fresh store per request. State defined via useState or Pinia is serialized into the <script id="__NUXT_DATA__"> tag for hydration.
Previous
What is `useRuntimeConfig` in Nuxt.js?
Next
What are Nuxt.js server middleware vs route middleware?