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:

  1. composables
  2.  | - useFoo.ts
  3.  | - useBar
  4.  | --- supportingFile.ts
  5.  | --- 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)

composables/useFoo.ts

  1. export const useFoo = () => {
  2.   return useState('foo', () => 'bar')
  3. }

Example: (using default export)

composables/use-foo.ts or composables/useFoo.ts

  1. // It will be available as useFoo() (camelCase of file name without extension)
  2. export default function () {
  3.   return useState('foo', () => 'bar')
  4. }

You can now auto-import it:

app.vue

  1. <template>
  2.   <div>
  3.     {{ foo }}
  4.   </div>
  5. </template>
  7. <script setup>
  8. const foo = useFoo()
  9. </script>

🔎

Read and edit a live example in Examples > Auto Imports > Composables