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)!

## How files are scanned

Nuxt only scans files at the top level of the `composables/` directory (or index files within any subdirectories) for composables.

For example:

```bash
composables
 | - useFoo.ts // scanned
 | - useBar
 | --- supportingFile.ts // not scanned
 | --- index.ts // scanned
```

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`.

To get auto imports for `useBar/supportingFile.ts`, you have to re-export the composables you need from the `useBar/index.ts` file.

```js [composables/useBar/index.ts]
export const useBar = () => {
}

// Enables auto import for this export
export { useBaz } from './supportingFile'
```

::alert{type=warning}
Auto import generating doesn't work with `export * from './supportingFile.ts'`, you must use named exports or a default export.
::

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: (using named export)

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

## Example: (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')
}
```

You can now auto-import it:

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

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

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