From 5efd0f5be4fa23a8391e146bc0cc693d28ff103d Mon Sep 17 00:00:00 2001 From: warflash Date: Tue, 17 Oct 2023 21:46:09 +0200 Subject: [PATCH 1/2] docs: clarify reactivity in composables directory --- docs/2.guide/2.directory-structure/1.composables.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/2.guide/2.directory-structure/1.composables.md b/docs/2.guide/2.directory-structure/1.composables.md index 102f22e82683..1f03e56e4733 100644 --- a/docs/2.guide/2.directory-structure/1.composables.md +++ b/docs/2.guide/2.directory-structure/1.composables.md @@ -7,12 +7,16 @@ description: Use the composables/ directory to auto-import your Vue composables # Composables Directory -Nuxt 3 uses the [`composables/` directory](/docs/guide/directory-structure/composables) to automatically import your Vue composables into your application using [auto-imports](/docs/guide/concepts/auto-imports)! +Nuxt 3 uses the [`composables/` directory](/docs/guide/directory-structure/composables) to automatically import your [Vue composables](https://vuejs.org/guide/reusability/composables.html) into your application using [auto-imports](/docs/guide/concepts/auto-imports)! Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types. Be aware that you have to run `nuxi prepare`, `nuxi dev` or `nuxi build` in order to let Nuxt generate the types. If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.` +::alert{type=info} +The `composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `composables\` directory. You are free to employ reactivity features wherever they're needed in your application. +:: + ## Usage **Method 1:** Using named export From 7ae082c41213ae1514d22d9c069f326c5d2fffe7 Mon Sep 17 00:00:00 2001 From: warflash Date: Tue, 17 Oct 2023 21:53:54 +0200 Subject: [PATCH 2/2] docs: unify slashes --- docs/2.guide/2.directory-structure/1.composables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/2.guide/2.directory-structure/1.composables.md b/docs/2.guide/2.directory-structure/1.composables.md index 1f03e56e4733..1e1658362d59 100644 --- a/docs/2.guide/2.directory-structure/1.composables.md +++ b/docs/2.guide/2.directory-structure/1.composables.md @@ -14,7 +14,7 @@ Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the Be aware that you have to run `nuxi prepare`, `nuxi dev` or `nuxi build` in order to let Nuxt generate the types. If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.` ::alert{type=info} -The `composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `composables\` directory. You are free to employ reactivity features wherever they're needed in your application. +The `composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `composables/` directory. You are free to employ reactivity features wherever they're needed in your application. :: ## Usage