@pinia/nuxt

Nuxt module for Pinia

Automatic Installation

Use nuxi to automatically add this module to your Nuxt project:

npx nuxi@latest module add pinia

Manual Installation

Add dependencies to your Nuxt project:

npm i pinia @pinia/nuxt

Enable the @pinia/nuxt module in nuxt.config.ts:

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

Configuring the Module

By default, this module adds stores folder to auto imports, in which you can organize code related to Pinia stores in one place.

[!TIP] In the new directory structure introduced since Nuxt 4, this directory is app/stores.

You can customize this behaviour using the pinia property in nuxt.config.ts:

export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],
    // configure the module using `pinia` property
    pinia: {
      /**
       * Automatically add stores dirs to the auto imports. This is the same as
       * directly adding the dirs to the `imports.dirs` option. If you want to
       * also import nested stores, you can use the glob pattern `./stores/**`
       * (on Nuxt 3) or `app/stores/**` (on Nuxt 4+)
       *
       * @default `['stores']`
       */
        storesDirs: []
    }
})

License

MIT