mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-02 10:27:15 +00:00
88 lines
2.1 KiB
Markdown
88 lines
2.1 KiB
Markdown
---
|
|
icon: IconDirectory
|
|
title: 'composables'
|
|
head.title: Composables directory
|
|
---
|
|
|
|
# Composables directory
|
|
|
|
Nuxt 3 supports `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)!
|
|
|
|
Under the hood, Nuxt auto generates the file `.nuxt/auto-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 generates the types. If you create a composable without having the dev server running, typescript will throw an error `Cannot find name 'useBar'.`
|
|
|
|
## Example
|
|
|
|
**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]
|
|
<template>
|
|
<div>
|
|
{{ foo }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const foo = useFoo()
|
|
</script>
|
|
```
|
|
|
|
:LinkExample{link="/examples/auto-imports/composables"}
|
|
|
|
## How files are scanned
|
|
|
|
Nuxt only scans files at the top level of the `composables/` directory for composables.
|
|
|
|
For example:
|
|
|
|
```bash
|
|
composables
|
|
| - useFoo.ts // scanned
|
|
| - index.ts // scanned
|
|
| - nested
|
|
| --- utils.ts // not scanned
|
|
```
|
|
|
|
Only `composables/useFoo.ts` would be searched for imports.
|
|
|
|
To get auto imports for nested modules, you could either reexport them (recommended) or configure the scanner to scan nested directories:
|
|
|
|
**Example:** re-export the composables you need from the `composables/index.ts` file:
|
|
|
|
```js [composables/index.ts]
|
|
// Enables auto import for this export
|
|
export { useBaz } from './nested/useBaz.ts'
|
|
```
|
|
|
|
**Example:** Scan nested directories inside composables:
|
|
|
|
```ts [nuxt.config.ts]
|
|
export default defineConfig({
|
|
// ...
|
|
autoImports: {
|
|
dirs: [
|
|
// Scan composables from nested directories
|
|
'composables/**'
|
|
]
|
|
}
|
|
})
|
|
```
|