docs: Nuxt module README (#3013)

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

diff --git a/packages/nuxt/README.md b/packages/nuxt/README.md
index 66f7cba8fa00f7a7586f96ba080a7e09c35e4db0..cac35328d7a1261611ab6946755d7b861ffbbd79 100644 (file)
--- a/packages/nuxt/README.md
+++ b/packages/nuxt/README.md
@@ -1,29 +1,56 @@
 # `@pinia/nuxt`
 
-> Nuxt 2 & 3 module
+> Nuxt module for Pinia
 
-## Installation
+## Automatic Installation
+
+Use `nuxi` to automatically add this module to your Nuxt project:
 
 ```shell
-npm i pinia @pinia/nuxt
+npx nuxi@latest module add pinia
 ```
 
-## Usage
+## Manual Installation
+
+Add dependencies to your Nuxt project:
+
+```shell
+npm i pinia @pinia/nuxt
+```
 
-Add to `modules` (Nuxt 3) or `buildModules` (Nuxt 2) in `nuxt.config.js`:
+Enable the `@pinia/nuxt` module in `nuxt.config.ts`:
 
 ```js
-// Nuxt 2
-export default {
-  buildModules: [['@pinia/nuxt', { disableVuex: true }]],
-}
-// Nuxt 3
 export default defineNuxtConfig({
     modules: ['@pinia/nuxt'],
 })
 ```
 
-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).
+## Configuring the Module
+
+By default, this module adds `stores` folder to auto imports, in which you can organize code related to Pinia stores in one place.
+> [!TIP]
+> In the new directory structure introduced since Nuxt 4, this directory is `app/stores`.
+
+You can customize this behaviour using the `pinia` property in `nuxt.config.ts`:
+
+```js
+export default defineNuxtConfig({
+    modules: ['@pinia/nuxt'],
+    // configure the module using `pinia` property
+    pinia: {
+      /**
+       * Automatically add stores dirs to the auto imports. This is the same as
+       * directly adding the dirs to the `imports.dirs` option. If you want to
+       * also import nested stores, you can use the glob pattern `./stores/**`
+       * (on Nuxt 3) or `app/stores/**` (on Nuxt 4+)
+       *
+       * @default `['stores']`
+       */
+        storesDirs: []
+    }
+})
+```
 
 ## License
 

diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index afa369cc55b71c1fa9dc4d46ff5cf1e38205d3e6..7542ccec29d52bd9d88a851d53b4d6d28ba75a3a 100644 (file)
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -16,6 +16,7 @@ export interface ModuleOptions {
    * Automatically add stores dirs to the auto imports. This is the same as
    * directly adding the dirs to the `imports.dirs` option. If you want to
    * also import nested stores, you can use the glob pattern `./stores/**`
+   * (on Nuxt 3) or `app/stores/**` (on Nuxt 4+)
    *
    * @default `['stores']`
    */