composables

Директория composables/ используется для автоимпорта Vue-композаблов в приложение.

Использование

Способ 1: именованный экспорт

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

Способ 2: экспорт по умолчанию

app/composables/use-foo.ts or composables/useFoo.ts
// Будет доступен как useFoo() (camelCase от имени файла без расширения)
export default function () {
  return useState('foo', () => 'bar')
}

Использование: композабл можно использовать в файлах .js, .ts и .vue без явного импорта

app/app.vue
<script setup lang="ts">
const foo = useFoo()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>
Директория app/composables/ в Nuxt не добавляет реактивности сама по себе. Реактивность в композаблах обеспечивается механизмами Composition API Vue (ref, reactive). Реактивный код не ограничен границами app/composables/ — его можно использовать в любом месте приложения.
Узнать больше Docs > 4 X > Guide > Concepts > Auto Imports.
Прочитайте и отредактируйте живой пример в Docs > 4 X > Examples > Features > Auto Imports.

Типы

Nuxt автоматически генерирует файл .nuxt/imports.d.ts с объявлениями типов.

Типы появятся после запуска nuxt prepare, nuxt dev или nuxt build.

Если создать композабл при выключенном dev-сервере, TypeScript может выдать ошибку вроде Cannot find name 'useBar'.

Примеры

Вложенные композаблы

Один композабл можно вызывать из другого через автоимпорт:

app/composables/test.ts
export const useFoo = () => {
  const nuxtApp = useNuxtApp()
  const bar = useBar()
}

Доступ к инъекциям плагинов

Из композаблов доступны инъекции плагинов:

app/composables/test.ts
export const useHello = () => {
  const nuxtApp = useNuxtApp()
  return nuxtApp.$hello
}

Как сканируются файлы

Nuxt сканирует только файлы на верхнем уровне директории app/composables/:

Directory Structure
-| composables/
---| index.ts     // сканируется
---| useFoo.ts    // сканируется
---| nested/
-----| utils.ts   // не сканируется

Импорты ищутся только в app/composables/index.ts и app/composables/useFoo.ts.

Чтобы автоимпорт работал для вложенных модулей, можно реэкспортировать их (рекомендуется) или настроить сканирование вложенных директорий:

Пример: реэкспорт из app/composables/index.ts:

app/composables/index.ts
// Включает автоимпорт для этого экспорта
export { utils } from './nested/utils.ts'

Пример: сканирование вложенных директорий в app/composables/:

nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    dirs: [
      // Сканировать композаблы верхнего уровня
      '~/composables',
      // или композаблы на один уровень вглубь с заданным именем и расширением
      '~/composables/*/index.{ts,js,mjs,mts}',
      // или все композаблы в директории
      '~/composables/**',
    ],
  },
})