# composables

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

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

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

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

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

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

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

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

<template>
  <div>
    {{ foo }}
  </div>
</template>
```

<note>

Директория `composables/` в Nuxt не предоставляет никаких дополнительных возможностей реактивности для вашего кода. Вместо этого любая реактивность в композаблах достигается с помощью механизмов Composition API из Vue, таких как ref и reactive. Обратите внимание, что реактивный код также не ограничен границами директории `composables/`. Вы можете свободно использовать функции реактивности везде, где они необходимы в приложении.

</note>

<read-more to="/docs/3.x/guide/concepts/auto-imports">



</read-more>

<link-example to="/docs/3.x/examples/features/auto-imports">



</link-example>

## Типы

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

Имейте в виду, что вам необходимо запустить [`nuxt prepare`](/docs/3.x/api/commands/prepare), [`nuxt dev`](/docs/3.x/api/commands/dev) или [`nuxt build`](/docs/3.x/api/commands/build), чтобы позволить Nuxt сгенерировать типы.

<note>

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

</note>

## Примеры

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

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

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

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

Вы можете получить доступ к [внедренным плагинам](/docs/3.x/directory-structure/plugins/#providing-helpers) из композаблов:

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

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

Nuxt сканирует только файлы верхнего уровня в [`composables/`](/docs/3.x/directory-structure/composables/), например:

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

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

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

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

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

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

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