Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-19 09:55:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add notes about auto imports from composables/ directory (#4675)

Browse Source
This commit is contained in:
Florent Catiau-Tristant 2022-04-29 11:36:59 +02:00 committed by GitHub
parent eef037d604
commit e360e31413
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,14 +16,32 @@ For example:
```bash ```bash
composables composables
| - useFoo.ts | - useFoo.ts // scanned
| - useBar | - useBar
| --- supportingFile.ts | --- supportingFile.ts // not scanned
| --- index.ts | --- 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`. 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 default 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: (using named export)
```js [composables/useFoo.ts] ```js [composables/useFoo.ts]