Skip to content

Commit fed73eb

Browse files
committed
docs: explain config handling with nuxt layers
1 parent 2418e52 commit fed73eb

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
@@ -85,7 +85,7 @@ By default `@pinia/nuxt` exposes a few auto imports:
8585
- `storeToRefs()` when you need to extract individual refs from a store
8686
- `acceptHMRUpdate()` for [hot module replacement](../cookbook/hot-module-replacement.md)
8787

88-
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:
88+
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:
8989

9090
```ts
9191
// nuxt.config.ts
@@ -98,8 +98,39 @@ export default defineNuxtConfig({
9898
})
9999
```
100100

101+
**Note**: The folders are relative to the root of your project. If you change the `srcDir` option, you need to adjust the paths accordingly.
102+
103+
#### Merging Pinia Options Across Layers
104+
105+
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.
106+
107+
#### Example: Defining Stores in a Custom Layer
108+
109+
To define store directories for a specific layer, use the following approach:
110+
111+
```ts
112+
import { fileURLToPath } from 'node:url'
113+
import { defineNuxtConfig } from 'nuxt/config'
114+
import { dirname, join } from 'path'
115+
116+
const currentDir = dirname(fileURLToPath(import.meta.url))
117+
118+
export default defineNuxtConfig({
119+
pinia: {
120+
storesDirs: [join(currentDir, './stores/**')],
121+
},
122+
})
123+
```
124+
125+
In this example:
126+
127+
- `currentDir` represents the directory of the current layer.
128+
- `storesDirs` is set to point to the `stores` folder relative to the current layer's directory.
129+
101130
Note the folders are relative to the root of your project. If you change the `srcDir` option, you need to adapt the paths accordingly.
102131

132+
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).
133+
103134
## Nuxt 2 without bridge
104135

105136
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)