Skip to content

Commit 5093e2c

Browse files
toto6038posva
andauthored
docs: Nuxt module README (#3013)
Co-authored-by: Eduardo San Martin Morote <[email protected]>
1 parent 7986f8e commit 5093e2c

File tree

2 files changed

+39
-11
lines changed

2 files changed

+39
-11
lines changed

packages/nuxt/README.md

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,56 @@
11
# `@pinia/nuxt`
22

3-
> Nuxt 2 & 3 module
3+
> Nuxt module for Pinia
44
5-
## Installation
5+
## Automatic Installation
6+
7+
Use `nuxi` to automatically add this module to your Nuxt project:
68

79
```shell
8-
npm i pinia @pinia/nuxt
10+
npx nuxi@latest module add pinia
911
```
1012

11-
## Usage
13+
## Manual Installation
14+
15+
Add dependencies to your Nuxt project:
16+
17+
```shell
18+
npm i pinia @pinia/nuxt
19+
```
1220

13-
Add to `modules` (Nuxt 3) or `buildModules` (Nuxt 2) in `nuxt.config.js`:
21+
Enable the `@pinia/nuxt` module in `nuxt.config.ts`:
1422

1523
```js
16-
// Nuxt 2
17-
export default {
18-
buildModules: [['@pinia/nuxt', { disableVuex: true }]],
19-
}
20-
// Nuxt 3
2124
export default defineNuxtConfig({
2225
modules: ['@pinia/nuxt'],
2326
})
2427
```
2528

26-
Note you also need `@nuxtjs/composition-api` if you are using Nuxt 2 without Bridge. [Refer to docs for more](https://pinia.vuejs.org/ssr/nuxt.html).
29+
## Configuring the Module
30+
31+
By default, this module adds `stores` folder to auto imports, in which you can organize code related to Pinia stores in one place.
32+
> [!TIP]
33+
> In the new directory structure introduced since Nuxt 4, this directory is `app/stores`.
34+
35+
You can customize this behaviour using the `pinia` property in `nuxt.config.ts`:
36+
37+
```js
38+
export default defineNuxtConfig({
39+
modules: ['@pinia/nuxt'],
40+
// configure the module using `pinia` property
41+
pinia: {
42+
/**
43+
* Automatically add stores dirs to the auto imports. This is the same as
44+
* directly adding the dirs to the `imports.dirs` option. If you want to
45+
* also import nested stores, you can use the glob pattern `./stores/**`
46+
* (on Nuxt 3) or `app/stores/**` (on Nuxt 4+)
47+
*
48+
* @default `['stores']`
49+
*/
50+
storesDirs: []
51+
}
52+
})
53+
```
2754

2855
## License
2956

packages/nuxt/src/module.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export interface ModuleOptions {
1616
* Automatically add stores dirs to the auto imports. This is the same as
1717
* directly adding the dirs to the `imports.dirs` option. If you want to
1818
* also import nested stores, you can use the glob pattern `./stores/**`
19+
* (on Nuxt 3) or `app/stores/**` (on Nuxt 4+)
1920
*
2021
* @default `['stores']`
2122
*/

0 commit comments

Comments
 (0)