@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: []
}
})