Автоматические импорты

Nuxt автоматически импортирует компоненты, композаблы и API Vue.js для использования в приложении без их явного импорта.

app.vue

<script setup lang="ts">
const count
 = ref
(1) // ref импортируется автоматически
</script>

Благодаря продуманной структуре директорий Nuxt может автоматически импортировать ваши components/, composables/ и utils/.

В отличие от классического глобального объявления, Nuxt сохраняет типизацию, автодополнения и подсказки IDE и включает только то, что используется в вашем продакшен коде.

В документации каждая функция, которая не импортируется явно, импортируется Nuxt автоматически и может использоваться как есть в коде. Вы можете найти ссылку на автоматически импортируемые компоненты, композаблы и утилиты в разделе API.

В директории server Nuxt автоматически импортирует экспортированные функции и переменные из server/utils/.

Вы также можете автоматически импортировать функции, экспортированные из пользовательских папок или сторонних пакетов, настроив раздел imports файла nuxt.config.

Встроенный автоматический импорт

Nuxt автоматически импортирует функции и композаблы для выполнения выборки данных, получения доступа к контексту приложения и runtime-конфигурации, управления состоянием или определения компонентов и плагинов.

<script setup lang="ts">
/* useAsyncData() и $fetch() импортированы автоматически */
const { data
, refresh
, status
 } = await useFetch
('/api/hello')
</script>

Vue 3 предоставляет Reactivity API, например: ref или computed, а также хуки жизненного цикла и хелперы, которые автоматически импортируются Nuxt.

<script setup lang="ts">
/* ref() и computed() импортированы автоматически */
const count
 = ref
(1)
const double
 = computed
(() => count
.value
 * 2)
</script>

Композаблы Vue и Nuxt

При использовании встроенных композаблов Composition API, предоставляемых Vue и Nuxt, имейте в виду, что многие из них требуют вызова в правильном контексте.

В течение жизненного цикла компонента Vue отслеживает временный экземпляр текущего компонента (и аналогично Nuxt отслеживает временный экземпляр nuxtApp) через глобальную переменную, а затем сбрасывает его в том же тике. Это важно при серверном рендеринге, как для предотвращения загрязнения состояния перекрестными запросами (утечки общей ссылки между двумя пользователями), так и для предотвращения утечки между различными компонентами.

Это означает, что (за очень редкими исключениями) вы не можете использовать их вне плагина Nuxt, middleware маршрута Nuxt или setup-функции Vue. Вдобавок ко всему, вы должны использовать их синхронно, то есть вы не можете использовать await перед вызовом композабла, за исключением блоков <script setup>, внутри setup-функции компонента, объявленного с помощью defineNuxtComponent, в defineNuxtPlugin или в defineNuxtRouteMiddleware, где мы выполняем преобразование, чтобы сохранить синхронный контекст даже после await.

Если вы получили сообщение об ошибке типа «Экземпляр Nuxt недоступен», то это, вероятно, означает, что вы вызываете композабл Nuxt в неправильном месте жизненного цикла Vue или Nuxt.

Посмотрите видео от Александра Лихтера об обработке асинхронного кода в композаблах и исправлении ошибки «Экземпляр Nuxt недоступен» в вашем приложении.

Ознакомьтесь с экспериментальной функцией asyncContext для использования композаблов Nuxt в асинхронных функциях.

Полное объяснение смотрите в этом комментарии на GitHub.

Пример нерабочего кода:

composables/example.ts

// попытка доступа к runtime-конфигурации вне композабла
const config
 = useRuntimeConfig
()

export const useMyComposable
 = () => {
  // доступ к runtime-конфигурации здесь
}

Пример рабочего кода:

composables/example.ts

export const useMyComposable
 = () => {
  // Поскольку ваш композабл вызывается в правильном месте жизненного цикла,
  // useRuntimeConfig будет здесь работать
  const config
 = useRuntimeConfig
()

  // ...
}

Автоматический импорт на основе директорий

Nuxt напрямую автоматически импортирует файлы, созданные в определенных директориях:

components/ для компонентов Vue.
composables/ для композаблов Vue.
utils/ для вспомогательных функций и других утилит.

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

Авто-импортированные ref и computed не будут развернуты в компоненте <template>.
Это связано с тем, как Vue работает с ref, которые не находятся на верхнем уровне шаблона. Подробнее об этом можно прочитать в документации Vue.

Явный импорт

Nuxt предоставляет доступ к каждому автоматическому импорту с помощью алиаса #imports, который можно использовать для явного импорта при необходимости:

<script setup lang="ts">
import { ref, computed } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)
</script>

Отключение автоматического импорта

Если вы хотите отключить автоматический импорт композаблов и утилит, вы можете установить imports.autoImport в false в файле nuxt.config.

nuxt.config.ts

export default defineNuxtConfig
({
  imports
: {
    autoImport
: false
  }
})

Это полностью отключит автоматический импорт, но по-прежнему можно будет использовать явный импорт из #imports.

Автоматически импортированные компоненты

Nuxt также автоматически импортирует компоненты из директории ~/components, хотя это настраивается отдельно от автоматического импорта композаблов и функций-утилит.

Узнать больше Docs > Guide > Directory Structure > Components.

Чтобы отключить автоматический импорт компонентов из вашей собственной директории ~/components, вы можете установить components.dirs в пустой массив (однако учтите, что это не повлияет на компоненты, добавляемые модулями).

nuxt.config.ts

export default defineNuxtConfig
({
  components
: {
    dirs
: []
  }
})

Автоматический импорт из сторонних пакетов

Nuxt также позволяет делать автоматический импорт из сторонних пакетов.

Если вы используете модуль Nuxt для определенного пакета, то, скорее всего, модуль уже настроил автоматический импорт для него.

Например, вы можете включить автоматический импорт композабла useI18n из пакета vue-i18n следующим образом:

nuxt.config.ts

export default defineNuxtConfig
({
  imports
: {
    presets
: [
      {
        from
: 'vue-i18n',
        imports
: ['useI18n']
      }
    ]
  }
})

Посмотрите видео от Александра Лихтера о том, как легко настроить пользовательский автоматический импорт.

Руководство по обновлению

Узнайте, как перейти на последнюю версию Nuxt.

Разработка при помощи Vue.js

Nuxt использует Vue.js и добавляет такие функции как: автоматический импорт компонентов, файловую маршрутизацию и композаблы для более удобного использования SSR.