Skip to content

Commit 1a959d6

Browse files
committed
docs: explain config handling with nuxt layers
1 parent de81a4e commit 1a959d6

File tree

1 file changed

+32
-1
lines changed

1 file changed

+32
-1
lines changed

packages/docs/ssr/nuxt.md

+32-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ By default `@pinia/nuxt` exposes a few auto imports:
8787
- `storeToRefs()` when you need to extract individual refs from a store
8888
- `acceptHMRUpdate()` for [hot module replacement](../cookbook/hot-module-replacement.md)
8989

90-
It also automatically imports **all stores** defined within your `stores` folder. It doesn't lookup for nested stores though. You can customize this behavior by setting the `storesDirs` option:
90+
It also automatically imports **all stores** defined within your `stores` folder in the main `srcDir` and all layers. It doesn't lookup nested stores though. You can customize this behavior by setting the `storesDirs` option:
9191

9292
```ts
9393
// nuxt.config.ts
@@ -100,8 +100,39 @@ export default defineNuxtConfig({
100100
})
101101
```
102102

103+
**Note**: The folders are relative to the root of your project. If you change the `srcDir` option, you need to adjust the paths accordingly.
104+
105+
#### Merging Pinia Options Across Layers
106+
107+
Nuxt merges Pinia options from all layers, but defining the `storesDirs` option, such as `['./stores/**', './custom-folder/**']`, in your main `nuxt.config.ts` will only be resolved relative to the main `srcDir`. To ensure that your stores are correctly auto imported in layers, you need to define the `storesDirs` option for each layer individually.
108+
109+
#### Example: Defining Stores in a Custom Layer
110+
111+
To define store directories for a specific layer, use the following approach:
112+
113+
```ts
114+
import { fileURLToPath } from 'node:url'
115+
import { defineNuxtConfig } from 'nuxt/config'
116+
import { dirname, join } from 'path'
117+
118+
const currentDir = dirname(fileURLToPath(import.meta.url))
119+
120+
export default defineNuxtConfig({
121+
pinia: {
122+
storesDirs: [join(currentDir, './stores/**')],
123+
},
124+
})
125+
```
126+
127+
In this example:
128+
129+
- `currentDir` represents the directory of the current layer.
130+
- `storesDirs` is set to point to the `stores` folder relative to the current layer's directory.
131+
103132
Note the folders are relative to the root of your project. If you change the `srcDir` option, you need to adapt the paths accordingly.
104133

134+
For more detailed information on working with layers and relative paths in Nuxt, refer to the [Nuxt Documentation on Layers](https://nuxt.com/docs/guide/going-further/layers#relative-paths-and-aliases).
135+
105136
## Nuxt 2 without bridge
106137

107138
Pinia supports Nuxt 2 until `@pinia/nuxt` v0.2.1. Make sure to also install [`@nuxtjs/composition-api`](https://composition-api.nuxtjs.org/) alongside `pinia`:

0 commit comments

Comments
 (0)