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

composables/useBar/index.ts
export const useBar = () => {
}

// Enables auto import for this export
export { useBaz } from './supportingFile'
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)

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

Example: (using default export)

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:

app.vue
<template>
  <div>
    {{ foo }}
  </div>
</template>

<script setup>
const foo = useFoo()
</script>
🔎
Read and edit a live example in Examples > Auto Imports > Composables.
Edit this page on GitHub Updated at Wed, May 25, 2022