Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: clarify reactivity in composables directory #23731

Merged
merged 3 commits into from Jan 16, 2024
Merged

docs: clarify reactivity in composables directory #23731

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5efd0f5
docs: clarify reactivity in composables directory
warflash Oct 17, 2023
7ae082c
docs: unify slashes
warflash Oct 17, 2023
ef07070
Merge branch 'main' into docs/composables
danielroe Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion docs/2.guide/2.directory-structure/1.composables.md
View file
Open in desktop
Expand Up @@ -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
Expand Down