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

---
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() (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>
```