Nuxt/docs/content/3.docs/2.directory-structure/5.composables.md

61 lines
1.2 KiB
Markdown
Raw Normal View History

---
icon: IconDirectory
title: 'composables'
head.title: Composables directory
---
# Composables directory
2021-11-21 12:31:44 +00:00
Nuxt 3 supports `composables/` directory to automatically import your Vue composables into your application using auto-imports!
## How files are scanned
Only files at the top level of the `composables/` directory (or index files within any subdirectories) will be scanned for composables.
For example:
```bash
composables
| - useFoo.ts
| - useBar
| --- supportingFile.ts
| --- index.ts
```
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`.
## Example: (using named export)
```js [composables/useFoo.ts]
import { useState } from '#app'
export const useFoo = () => {
return useState('foo', () => 'bar')
}
```
## Example: (using default export)
```js [composables/use-foo.ts or composables/useFoo.ts]
import { useState } from '#app'
2022-01-18 16:36:29 +00:00
// It will be available as useFoo() (camelCase of file name without extension)
export default function () {
2021-12-20 10:36:25 +00:00
return useState('foo', () => 'bar')
}
```
2021-11-21 12:31:44 +00:00
You can now auto-import it:
```vue [app.vue]
<template>
<div>
{{ foo }}
</div>
</template>
<script setup>
const foo = useFoo()
</script>
```