mirror of https://github.com/nuxt/nuxt.git
77 lines
2.1 KiB
Markdown
77 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)!
|
|
|
|
## How files are scanned
|
|
|
|
Nuxt only scans files at the top level of the `composables/` directory (or index files within any subdirectories) for composables.
|
|
|
|
For example:
|
|
|
|
```bash
|
|
composables
|
|
| - useFoo.ts // scanned
|
|
| - useBar
|
|
| --- supportingFile.ts // not scanned
|
|
| --- index.ts // scanned
|
|
```
|
|
|
|
Only `useFoo.ts` and `useBar/index.ts` would be searched for imports - and if the latter is a default export, it would be registered as `useBar` rather than `index`.
|
|
|
|
To get auto imports for `useBar/supportingFile.ts`, you have to re-export the composables you need from the `useBar/index.ts` file.
|
|
|
|
```js [composables/useBar/index.ts]
|
|
export const useBar = () => {
|
|
}
|
|
|
|
// Enables auto import for this export
|
|
export { useBaz } from './supportingFile'
|
|
```
|
|
|
|
::alert{type=warning}
|
|
Auto import generating doesn't work with `export * from './supportingFile.ts'`, you must use named exports or a default export.
|
|
::
|
|
|
|
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: (using named export)
|
|
|
|
```js [composables/useFoo.ts]
|
|
export const useFoo = () => {
|
|
return useState('foo', () => 'bar')
|
|
}
|
|
```
|
|
|
|
## Example: (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')
|
|
}
|
|
```
|
|
|
|
You can now auto-import it:
|
|
|
|
```vue [app.vue]
|
|
<template>
|
|
<div>
|
|
{{ foo }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const foo = useFoo()
|
|
</script>
|
|
```
|
|
|
|
:LinkExample{link="/examples/auto-imports/composables"}
|