|
1 | 1 | # `@pinia/nuxt`
|
2 | 2 |
|
3 |
| -> Nuxt 2 & 3 module |
| 3 | +> Nuxt module for Pinia |
4 | 4 |
|
5 |
| -## Installation |
| 5 | +## Automatic Installation |
| 6 | + |
| 7 | +Use `nuxi` to automatically add this module to your Nuxt project: |
6 | 8 |
|
7 | 9 | ```shell
|
8 |
| -npm i pinia @pinia/nuxt |
| 10 | +npx nuxi@latest module add pinia |
9 | 11 | ```
|
10 | 12 |
|
11 |
| -## Usage |
| 13 | +## Manual Installation |
| 14 | + |
| 15 | +Add dependencies to your Nuxt project: |
| 16 | + |
| 17 | +```shell |
| 18 | +npm i pinia @pinia/nuxt |
| 19 | +``` |
12 | 20 |
|
13 |
| -Add to `modules` (Nuxt 3) or `buildModules` (Nuxt 2) in `nuxt.config.js`: |
| 21 | +Enable the `@pinia/nuxt` module in `nuxt.config.ts`: |
14 | 22 |
|
15 | 23 | ```js
|
16 |
| -// Nuxt 2 |
17 |
| -export default { |
18 |
| - buildModules: [['@pinia/nuxt', { disableVuex: true }]], |
19 |
| -} |
20 |
| -// Nuxt 3 |
21 | 24 | export default defineNuxtConfig({
|
22 | 25 | modules: ['@pinia/nuxt'],
|
23 | 26 | })
|
24 | 27 | ```
|
25 | 28 |
|
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 | +``` |
27 | 54 |
|
28 | 55 | ## License
|
29 | 56 |
|
|
0 commit comments