Pinia in Nuxt

Pinia integrates with Nuxt via the @pinia/nuxt module, auto-importing stores and handling SSR hydration so the server-rendered state matches the client.

4 min read Level 2/5 #nuxt#pinia#state

What you'll learn

Install @pinia/nuxt and register it in the modules array
Define a setup-style store in the stores/ directory
Use the auto-imported store in a page component

For state that needs actions, getters, and modules, reach for Pinia. The @pinia/nuxt module wires everything up — SSR hydration, auto-imports, and devtools.

Install

npx nuxi module add @pinia/nuxt

This installs pinia and @pinia/nuxt and adds the module to nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

Define a Store

Stores live in stores/ and are auto-imported. Setup-style stores read like composables:

// stores/counter.ts
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  const inc = () => count.value++
  return { count, double, inc }
})

The first arg is a unique store id, used for devtools and SSR hydration.

Use It in a Component

<script setup lang="ts">
const counter = useCounterStore()
</script>

<template>
  <button @click="counter.inc()">Count: {{ counter.count }} (x2: {{ counter.double }})</button>
</template>

No import needed — defineStore and useCounterStore are both auto-imported by the module.

SSR Hydration

When a store mutates during server rendering, its state is serialized into the payload. On the client, Pinia rehydrates before any component runs, so you never see a flash of stale data.

Custom Composables →