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!

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:

composables
 | - useFoo.ts
 | - useBar
 | --- supportingFile.ts
 | --- index.ts

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.

Example: (using named export)

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

Example: (using default export)

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

<template>
  <div>
    {{ foo }}
  </div>
</template>

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

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