Docs Guide Directory Structure
composables
Use the composables/ directory to auto-import your Vue composables into your application.
Usage
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
<script setup lang="ts">const foo = useFoo()</script><template> <div> {{ foo }} </div></template>Types
Under the hood, Nuxt auto generates the file .nuxt/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 generate the types.
Cannot find name 'useBar'.Examples
Nested Composables
You can use a composable within another composable using auto imports:
export const useFoo = () => { const nuxtApp = useNuxtApp() const bar = useBar()}Access plugin injections
You can access plugin injections from composables:
export const useHello = () => { const nuxtApp = useNuxtApp() return nuxtApp.$hello}How Files Are Scanned
Nuxt only scans files at the top level of the composables/ directory, e.g.:
| composables/---| index.ts // scanned---| useFoo.ts // scanned-----| nested/-------| utils.ts // not scannedOnly composables/index.ts and composables/useFoo.ts would be searched for imports.
To get auto imports working for nested modules, you could either re-export them (recommended) or configure the scanner to include nested directories:
Example: Re-export the composables you need from the composables/index.ts file:
// Enables auto import for this exportexport { utils } from './nested/utils.ts'Example: Scan nested directories inside the composables/ folder:
export default defineNuxtConfig({ imports: { dirs: [ // Scan top-level modules 'composables', // ... or scan modules nested one level deep with a specific name and file extension 'composables/*/index.{ts,js,mjs,mts}', // ... or scan all modules within given directory 'composables/**' ] }})