2.3 KiB
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, e.g.:
composables
| - index.ts // scanned
| - useFoo.ts // scanned
| - nested
| --- utils.ts // not scanned
Only 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 export
export { utils } from './nested/utils.ts'
Example: Scan nested directories inside the composables/
folder:
export default defineNuxtConfig({
autoImports: {
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/**'
]
}
})