Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 21:55:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
Anthony Fu 2022-07-21 22:04:50 +08:00 committed by GitHub
parent 6313f69a06
commit 45c2a6118f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,41 +8,13 @@ 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)! 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. 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'.` 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] ```js [composables/useFoo.ts]
export const useFoo = () => { export const useFoo = () => {
@ -50,7 +22,7 @@ export const useFoo = () => {
} }
``` ```
## Example: (using default export) **Method 2:** Using default export
```js [composables/use-foo.ts or composables/useFoo.ts] ```js [composables/use-foo.ts or composables/useFoo.ts]
// It will be available as useFoo() (camelCase of file name without extension) // 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] ```vue [app.vue]
<template> <template>
@ -74,3 +46,42 @@ const foo = useFoo()
``` ```
:LinkExample{link="/examples/auto-imports/composables"} :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/**'
]
}
})
```