docs(composables): add nested and plugin injection examples (#6743)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
HomWang 2022-08-22 23:33:28 +08:00 committed by GitHub
parent dc6b6ce621
commit 39a6054a44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -12,7 +12,7 @@ Under the hood, Nuxt auto generates the file `.nuxt/auto-imports.d.ts` to declar
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
## Usage
**Method 1:** Using named export
@ -47,6 +47,30 @@ const foo = useFoo()
:LinkExample{link="/examples/auto-imports/composables"}
## Examples
### Nested Composables
You can use a composable within another composable using auto imports:
```js [composables/test.ts]
export const useFoo = () => {
const nuxtApp = useNuxtApp()
const bar = useBar()
}
```
### Access plugin injections
You can access [plugin injections](/guide/directory-structure/plugins#automatically-providing-helpers) from composables:
```js [composables/test.ts]
export const useHello = () => {
const nuxtApp = useNuxtApp()
return nuxtApp.$hello
}
```
## How Files Are Scanned
Nuxt only scans files at the top level of the `composables/` directory, e.g.: