Nuxt/docs/content/2.guide/3.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](/guide/concepts/auto-imports)!

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

**Method 1:** Using named export

```js [composables/useFoo.ts]
export const useFoo = () => {
  return useState('foo', () => 'bar')
}
```

**Method 2:** 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')
}
```

**Usage:** You can now use auto imported composable in `.js`, `.ts` and `.vue` files

```vue [app.vue]
<template>
  <div>
    {{ foo }}
  </div>
</template>

<script setup>
const foo = useFoo()
</script>
```

:LinkExample{link="/examples/auto-imports/composables"}

## How Files Are Scanned

Nuxt only scans files at the top level of the `composables/` directory for composables.

For example:

```bash
composables
 | - useFoo.ts // scanned
 | - index.ts // scanned
 | - nested
 | --- utils.ts // not scanned
```

Only `composables/useFoo.ts` would be searched for imports.

To get auto imports for nested modules, you could either reexport them (recommended) or configure the scanner to scan nested directories:

**Example:** re-export the composables you need from the `composables/index.ts` file:

```js [composables/index.ts]
// Enables auto import for this export
export { useBaz } from './nested/useBaz.ts'
```

**Example:** Scan nested directories inside composables:

```ts [nuxt.config.ts]
export default defineConfig({
  // ...
  autoImports: {
    dirs: [
      // Scan composables from nested directories
      'composables/**',
      // 'composables/*/index.{ts,js,mjs,mts}' // one level directories's index.js,
      //'composables/**', // Scan all nested directories
    ]
  }
})
```