From 39a6054a445d7bb0b788b806eb5fe1ef5467c478 Mon Sep 17 00:00:00 2001 From: HomWang <516310460@qq.com> Date: Mon, 22 Aug 2022 23:33:28 +0800 Subject: [PATCH] docs(composables): add nested and plugin injection examples (#6743) Co-authored-by: Pooya Parsa --- .../3.directory-structure/5.composables.md | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 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 ce149606a9a..eeaa2cd0fa6 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -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.: