mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 18:13:54 +00:00
122 lines
3.4 KiB
Markdown
122 lines
3.4 KiB
Markdown
---
|
|
title: 'composables'
|
|
head.title: 'composables/'
|
|
description: Use the composables/ directory to auto-import your Vue composables into your application.
|
|
navigation.icon: i-ph-folder
|
|
---
|
|
|
|
## Usage
|
|
|
|
**Method 1:** Using named export
|
|
|
|
```js [composables/useFoo.ts]
|
|
export const useFoo = () => {
|
|
return useState('foo', () => 'bar')
|
|
}
|
|
```
|
|
|
|
**Method 2:** Using default export
|
|
|
|
```js [composables/use-foo.ts or composables/useFoo.ts]
|
|
// It will be available as useFoo() (camelCase of file name without extension)
|
|
export default function () {
|
|
return useState('foo', () => 'bar')
|
|
}
|
|
```
|
|
|
|
**Usage:** You can now use auto imported composable in `.js`, `.ts` and `.vue` files
|
|
|
|
```vue [app.vue]
|
|
<script setup lang="ts">
|
|
const foo = useFoo()
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
{{ foo }}
|
|
</div>
|
|
</template>
|
|
```
|
|
|
|
::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.
|
|
::
|
|
|
|
:read-more{to="/docs/guide/concepts/auto-imports"}
|
|
|
|
:link-example{to="/docs/examples/features/auto-imports"}
|
|
|
|
## Types
|
|
|
|
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`](/docs/api/commands/prepare), [`nuxi dev`](/docs/api/commands/dev) or [`nuxi build`](/docs/api/commands/build) in order to let Nuxt generate the types.
|
|
|
|
::note
|
|
If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.`
|
|
::
|
|
|
|
## 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](/docs/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](/docs/guide/directory-structure/composables), e.g.:
|
|
|
|
```bash [Directory Structure]
|
|
| composables/
|
|
---| index.ts // scanned
|
|
---| useFoo.ts // scanned
|
|
-----| nested/
|
|
-------| utils.ts // not scanned
|
|
```
|
|
|
|
Only `composables/index.ts` and `composables/useFoo.ts` would be searched for imports.
|
|
|
|
To get auto imports working for nested modules, you could either re-export them (recommended) or configure the scanner to include nested directories:
|
|
|
|
**Example:** Re-export the composables you need from the `composables/index.ts` file:
|
|
|
|
```ts [composables/index.ts]
|
|
// Enables auto import for this export
|
|
export { utils } from './nested/utils.ts'
|
|
```
|
|
|
|
**Example:** Scan nested directories inside the `composables/` folder:
|
|
|
|
```ts twoslash [nuxt.config.ts]
|
|
export default defineNuxtConfig({
|
|
imports: {
|
|
dirs: [
|
|
// Scan top-level modules
|
|
'composables',
|
|
// ... or scan modules nested one level deep with a specific name and file extension
|
|
'composables/*/index.{ts,js,mjs,mts}',
|
|
// ... or scan all modules within given directory
|
|
'composables/**'
|
|
]
|
|
}
|
|
})
|
|
```
|