composables

Каталог composables/ — композаблы Vue с автоматическим импортом.

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

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

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

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

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

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

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

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

Типы

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

Имейте в виду, что вам необходимо запустить nuxt prepare, nuxt dev или nuxt build, чтобы позволить Nuxt сгенерировать типы.

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

Примеры

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

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

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

Доступ к внедренным плагинам

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

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

Как сканируются файлы {#how-files-are-scanned}

Nuxt сканирует только файлы верхнего уровня в composables/, например:

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

Автоимпорт сработает только для composables/index.ts и composables/useFoo.ts.

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

Пример: Повторно экспортируйте необходимые вам композаблы из файла composables/index.ts:

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

Пример: Сканировать вложенные директории внутри composables/:

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