From c4092925fe919f9adf1d391ab8cd86d513402cfa Mon Sep 17 00:00:00 2001 From: HomWang <516310460@qq.com> Date: Thu, 18 Aug 2022 19:14:12 +0800 Subject: [PATCH 1/6] Add Using plugin Use a plugin in a composable --- .../2.guide/3.directory-structure/5.composables.md | 11 +++++++++++ 1 file changed, 11 insertions(+) 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..88f01be4228 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -31,6 +31,17 @@ export default function () { } ``` +**Method 3:** Using plugin + +```js [composables/use-foo.ts or composables/useFoo.ts] +export const useFoo = () => { + const cxt = useNuxtApp() + // https://v3.nuxtjs.org/guide/directory-structure/plugins#automatically-providing-helpers + // cxt.$hello + return useState('foo', () => 'bar') +} +``` + **Usage:** You can now use auto imported composable in `.js`, `.ts` and `.vue` files ```vue [app.vue] From ae44fc9bda53977aaa36b359b9b3f7678548ed20 Mon Sep 17 00:00:00 2001 From: HomWang <516310460@qq.com> Date: Thu, 18 Aug 2022 19:25:36 +0800 Subject: [PATCH 2/6] Add Using a composable within another composable Using a composable within another composable --- .../2.guide/3.directory-structure/5.composables.md | 9 +++++++++ 1 file changed, 9 insertions(+) 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 88f01be4228..011c0719c50 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -42,6 +42,15 @@ export const useFoo = () => { } ``` +**Method 4:** Using a composable within another composable + +```js [composables/use-twoFoo.ts or composables/useTwoFoo.ts] +export const useTwoFoo = () => { + const foo = useFoo() + return useState('twoFoo', () => foo) +} +``` + **Usage:** You can now use auto imported composable in `.js`, `.ts` and `.vue` files ```vue [app.vue] From a8f4200ed48b19a2d9871fc2480a4ed9fc260676 Mon Sep 17 00:00:00 2001 From: pooya parsa Date: Mon, 22 Aug 2022 15:38:37 +0200 Subject: [PATCH 3/6] Update 5.composables.md --- .../3.directory-structure/5.composables.md | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 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 011c0719c50..7baac70d2cb 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -31,26 +31,6 @@ export default function () { } ``` -**Method 3:** Using plugin - -```js [composables/use-foo.ts or composables/useFoo.ts] -export const useFoo = () => { - const cxt = useNuxtApp() - // https://v3.nuxtjs.org/guide/directory-structure/plugins#automatically-providing-helpers - // cxt.$hello - return useState('foo', () => 'bar') -} -``` - -**Method 4:** Using a composable within another composable - -```js [composables/use-twoFoo.ts or composables/useTwoFoo.ts] -export const useTwoFoo = () => { - const foo = useFoo() - return useState('twoFoo', () => foo) -} -``` - **Usage:** You can now use auto imported composable in `.js`, `.ts` and `.vue` files ```vue [app.vue] @@ -67,6 +47,28 @@ const foo = useFoo() :LinkExample{link="/examples/auto-imports/composables"} +### 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](https://v3.nuxtjs.org/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.: From c4d060b43de1e089a55549b06bf9a0590419ef76 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Mon, 22 Aug 2022 17:30:33 +0200 Subject: [PATCH 4/6] update --- docs/content/2.guide/3.directory-structure/5.composables.md | 4 +++- 1 file changed, 3 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 7baac70d2cb..77e52795074 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,9 @@ 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 + +### Example **Method 1:** Using named export From 32ce49bd00337dfcc65a81a10788200dfec05833 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Mon, 22 Aug 2022 17:32:20 +0200 Subject: [PATCH 5/6] split titles --- docs/content/2.guide/3.directory-structure/5.composables.md | 4 ++-- 1 file changed, 2 insertions(+), 2 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 77e52795074..a2a07f9eb0d 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -14,8 +14,6 @@ Be aware that you have to run `nuxi prepare`, `nuxi dev` or `nuxi build` in orde ## Usage -### Example - **Method 1:** Using named export ```js [composables/useFoo.ts] @@ -49,6 +47,8 @@ const foo = useFoo() :LinkExample{link="/examples/auto-imports/composables"} +## Examples + ### Nested Composables You can use a composable within another composable using auto imports: From c863bed4ec53bd20e8f60a6c7f3edb281a87662b Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Mon, 22 Aug 2022 17:32:55 +0200 Subject: [PATCH 6/6] update link --- 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 a2a07f9eb0d..eeaa2cd0fa6 100644 --- a/docs/content/2.guide/3.directory-structure/5.composables.md +++ b/docs/content/2.guide/3.directory-structure/5.composables.md @@ -62,7 +62,7 @@ export const useFoo = () => { ### Access plugin injections -You can access [plugin injections](https://v3.nuxtjs.org/guide/directory-structure/plugins#automatically-providing-helpers) from composables: +You can access [plugin injections](/guide/directory-structure/plugins#automatically-providing-helpers) from composables: ```js [composables/test.ts] export const useHello = () => {