Автоматические импорты
Nuxt автоматически импортирует компоненты, композаблы и API Vue.js для использования в приложении без их явного импорта.
<script setup lang="ts">
const count = ref(1) // ref импортируется автоматически
</script>
Благодаря продуманной структуре директорий Nuxt может автоматически импортировать ваши components/, composables/ и utils/.
В отличие от классического глобального объявления, Nuxt сохраняет типизацию, автодополнения и подсказки IDE и включает только то, что используется в вашем продакшен коде.
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.
asyncContext для использования композаблов Nuxt в асинхронных функциях.Пример нерабочего кода:
// попытка доступа к runtime-конфигурации вне композабла
const config = useRuntimeConfig()
export const useMyComposable = () => {
// доступ к runtime-конфигурации здесь
}
Пример рабочего кода:
export const useMyComposable = () => {
// Поскольку ваш композабл вызывается в правильном месте жизненного цикла,
// useRuntimeConfig будет здесь работать
const config = useRuntimeConfig()
// ...
}
Автоматический импорт на основе директорий
Nuxt напрямую автоматически импортирует файлы, созданные в определенных директориях:
components/для компонентов Vue.composables/для композаблов Vue.utils/для вспомогательных функций и других утилит.
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.
export default defineNuxtConfig({
imports: {
autoImport: false
}
})
Это полностью отключит автоматический импорт, но по-прежнему можно будет использовать явный импорт из #imports.
Автоматически импортированные компоненты
Nuxt также автоматически импортирует компоненты из директории ~/components, хотя это настраивается отдельно от автоматического импорта композаблов и функций-утилит.
Чтобы отключить автоматический импорт компонентов из вашей собственной директории ~/components, вы можете установить components.dirs в пустой массив (однако учтите, что это не повлияет на компоненты, добавляемые модулями).
export default defineNuxtConfig({
components: {
dirs: []
}
})
Автоматический импорт из сторонних пакетов
Nuxt также позволяет делать автоматический импорт из сторонних пакетов.
Например, вы можете включить автоматический импорт композабла useI18n из пакета vue-i18n следующим образом:
export default defineNuxtConfig({
imports: {
presets: [
{
from: 'vue-i18n',
imports: ['useI18n']
}
]
}
})