Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

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

Merged
merged 7 commits into from
Aug 22, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion docs/content/2.guide/3.directory-structure/5.composables.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.:
Expand Down