From efee037ba523713f5f8ccebcbbb51dfadaa8b081 Mon Sep 17 00:00:00 2001 From: Florent Catiau-Tristant Date: Wed, 27 Apr 2022 21:41:38 +0200 Subject: [PATCH 1/3] docs: details & gotchas autoimports composables Specifies that * the nuxt server must be running to generate auto imports * second level files under /composables can be generated by *namely* export them from index.ts --- .../3.directory-structure/5.composables.md | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/docs/content/2.guide/3.directory-structure/5.composables.md b/docs/content/2.guide/3.directory-structure/5.composables.md index ee1bc9a7ed4..8f0bce4668c 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -16,14 +16,32 @@ For example: ```bash composables - | - useFoo.ts + | - useFoo.ts // scanned | - useBar - | --- supportingFile.ts - | --- index.ts + | --- 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 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 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 `nuxt dev` or `nuxt 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) ```js [composables/useFoo.ts] From 017342890d2a0d7ceb68d6343954286d60f6aebe Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Fri, 29 Apr 2022 11:35:34 +0200 Subject: [PATCH 2/3] Update docs/content/2.guide/3.directory-structure/5.composables.md --- docs/content/2.guide/3.directory-structure/5.composables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/3.directory-structure/5.composables.md b/docs/content/2.guide/3.directory-structure/5.composables.md index 8f0bce4668c..02ae2d0b948 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -35,7 +35,7 @@ export { useBaz } from './supportingFile' ``` ::alert{type=warning} -Auto import generating doesn't work with `export * from './supportingFile.ts'`, you must use named export. +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. From 83f31edb4f82161c6dd373d12f9fe6305c093b5f Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Fri, 29 Apr 2022 11:35:38 +0200 Subject: [PATCH 3/3] Update docs/content/2.guide/3.directory-structure/5.composables.md --- docs/content/2.guide/3.directory-structure/5.composables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/2.guide/3.directory-structure/5.composables.md b/docs/content/2.guide/3.directory-structure/5.composables.md index 02ae2d0b948..22f2ec1a9c0 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -40,7 +40,7 @@ Auto import generating doesn't work with `export * from './supportingFile.ts'`, Under the hood, Nuxt auto generates the file `.nuxt/auto-imports.d.ts` to declare the types. -Be aware that you have to run `nuxt dev` or `nuxt 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)