feat(nuxt)!: only scan top level composables/ and support glob (#6025)

Co-authored-by: Pooya Parsa <pooya@pi0.io>

docs/content/2.guide/3.directory-structure/5.composables.md

@@ -8,49 +8,21 @@ head.title: Composables directory
 
 Nuxt 3 supports `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)!
 
-## How files are scanned
-
-Nuxt only scans files at the top level of the `composables/` directory (or index files within any subdirectories) for composables.
-
-For example:
-
-```bash
-composables
- | - useFoo.ts // scanned
- | - useBar
- | --- supportingFile.ts // not scanned
- | --- index.ts // scanned
-```
-
-Only `useFoo.ts` and `useBar/index.ts` would be searched for imports - and if the latter is a default export, it would be registered as `useBar` rather than `index`.
-
-To get auto imports for `useBar/supportingFile.ts`, you have to re-export the composables you need from the `useBar/index.ts` file.
-
-```js [composables/useBar/index.ts]
-export const useBar = () => {
-}
-
-// Enables auto import for this export
-export { useBaz } from './supportingFile'
-```
-
-::alert{type=warning}
-Auto import generating doesn't work with `export * from './supportingFile.ts'`, you must use named exports or a default export.
-::
-
 Under the hood, Nuxt auto generates the file `.nuxt/auto-imports.d.ts` to declare the types.
 
 Be aware that you have to run `nuxi prepare`, `nuxi dev` or `nuxi build` in order to let Nuxt generates the types. If you create a composable without having the dev server running, typescript will throw an error `Cannot find name 'useBar'.`
 
-## Example: (using named export)
+## Example
+
+**Method 1:** Using named export
 
 ```js [composables/useFoo.ts]
 export const useFoo = () => {
   return useState('foo', () => 'bar')
 }
 ```
 
-## Example: (using default export)
+**Method 2:** Using default export
 
 ```js [composables/use-foo.ts or composables/useFoo.ts]
 // It will be available as useFoo() (camelCase of file name without extension)
@@ -59,7 +31,7 @@ export default function () {
 }
 ```
 
-You can now auto-import it:
+**Usage:** You can now use auto imported composable in `.js`, `.ts` and `.vue` files
 
 ```vue [app.vue]
 <template>
@@ -74,3 +46,42 @@ const foo = useFoo()
 ```
 
 :LinkExample{link="/examples/auto-imports/composables"}
+
+## How files are scanned
+
+Nuxt only scans files at the top level of the `composables/` directory for composables.
+
+For example:
+
+```bash
+composables
+ | - useFoo.ts // scanned
+ | - index.ts // scanned
+ | - nested
+ | --- utils.ts // not scanned
+```
+
+Only `composables/useFoo.ts` would be searched for imports.
+
+To get auto imports for nested modules, you could either reexport them (recommended) or configure the scanner to scan nested directories:
+
+**Example:** re-export the composables you need from the `composables/index.ts` file:
+
+```js [composables/index.ts]
+// Enables auto import for this export
+export { useBaz } from './nested/useBaz.ts'
+```
+
+**Example:** Scan nested directories inside composables:
+
+```ts [nuxt.config.ts]
+export default defineConfig({
+  // ...
+  autoImports: {
+    dirs: [
+      // Scan composables from nested directories
+      'composables/**'
+    ]
+  }
+})
+```