Nuxt Module for pinia
npm install @pinia/nuxt@pinia/nuxt> Nuxt module for Pinia
Use nuxi to automatically add this module to your Nuxt project:
``shell`
npx nuxi@latest module add pinia
Add dependencies to your Nuxt project:
`shell`
npm i pinia @pinia/nuxt
Enable the @pinia/nuxt module in nuxt.config.ts:
`js`
export default defineNuxtConfig({
modules: ['@pinia/nuxt'],
})
By default, this module adds stores folder to auto imports, in which you can organize code related to Pinia stores in one place.app/stores
> [!TIP]
> In the new directory structure introduced since Nuxt 4, this directory is .
You can customize this behaviour using the pinia property in nuxt.config.ts:
`jspinia
export default defineNuxtConfig({
modules: ['@pinia/nuxt'],
// configure the module using propertyimports.dirs
pinia: {
/**
* Automatically add stores dirs to the auto imports. This is the same as
* directly adding the dirs to the option. If you want to./stores/*
also import nested stores, you can use the glob pattern
(on Nuxt 3) or (on Nuxt 4+)['stores']
*
* @default
*/
storesDirs: []
}
})