mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 14:15:13 +00:00
61 lines
1.2 KiB
Markdown
61 lines
1.2 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!
|
|
|
|
## 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'
|
|
|
|
// 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>
|
|
```
|