composables/ · Структура директорий Nuxt

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

Метод 1: Использование именованного экспорта

composables/useFoo.ts

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

Метод 2: Использование экспорта по умолчанию

composables/use-foo.ts or 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 > Guide > Concepts > Auto Imports.

Прочитайте и отредактируйте живой пример в Docs > Examples > Features > Auto Imports.

Типы

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

Имейте в виду, что вам необходимо запустить nuxi prepare, nuxi dev или nuxi 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
}

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

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/**'
    ]
  }
})

components

Директория components/ - это место, куда вы поместите все ваши компоненты Vue.

content

Используйте директорию content/ для создания файловой CMS для вашего приложения.