mirror of https://github.com/nuxt/nuxt.git
45 lines
811 B
Markdown
45 lines
811 B
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!
|
|
|
|
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() (pascalCase of file name without extension)
|
|
export default function () {
|
|
return 'bar'
|
|
}
|
|
```
|
|
|
|
You can now auto-import it:
|
|
|
|
```vue [app.vue]
|
|
<template>
|
|
<div>
|
|
{{ foo }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const foo = useFoo()
|
|
</script>
|
|
```
|