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

icon	title	head.title
IconDirectory	composables	Composables Directory

Composables Directory

Nuxt 3 supports composables/ directory to automatically import your Vue composables into your application using 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

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

Method 2: Using default export

// 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

<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:

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:

// Enables auto import for this export
export { useBaz } from './nested/useBaz.ts'

Example: Scan nested directories inside composables:

export default defineConfig({
  // ...
  autoImports: {
    dirs: [
      // Scan composables from nested directories
      'composables/**'
    ]
  }
})