Nuxt 4.2

Представляем Nuxt 4.2: удобнее TypeScript, улучшенная обработка ошибок в dev и контроль над отменой запросов данных! 🎉

🎯 Отмена запросов данных (AbortController)

В useAsyncData теперь можно передавать сигнал AbortController и гибко отменять запросы (#32531).

Внутренний сигнал передаётся в handler useAsyncData, так что можно отменять любой отменяемый промис, например $fetch.

<script setup lang="ts">
const { data, error, clear, refresh } = await useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', {
  signal
}))

refresh() // отменит запрос $fetch (если dedupe: cancel)

clear() // отменит последний ожидающий handler
</script>

Сигнал AbortController можно передавать в refresh/execute — удобно отменять запросы по действиям пользователя или жизненному циклу компонента.

const { data, refresh } = await useAsyncData('posts', fetchPosts)

// Отменить выполняющийся refresh
const abortController = new AbortController()
refresh({ signal: abortController.signal })

// Позже...
abortController.abort()

🎨 Удобнее страницы ошибок в dev

При ошибке в режиме разработки Nuxt показывает и вашу кастомную страницу ошибки, и технический оверлей с деталями (#33359): и вид пользователя, и stack trace с отладочной информацией.

Технический оверлей открывается отдельной панелью и не перекрывает вашу страницу ошибки — удобнее отлаживать и смотреть, как выглядит обработка ошибок.

🔮 Vite Environment API (опционально)

Для экспериментов с новыми возможностями можно включить Vite Environment API (#33492).

Vite Environment API в Vite 6 — крупное архитектурное изменение: dev-сервер Vite может обрабатывать несколько окружений одновременно, сближая dev и production (раньше в Nuxt для этого требовалось несколько dev-серверов).

Ожидаются лучшая производительность в dev и меньше граничных багов.

Это же основа для запуска Nitro как окружения Vite — ещё быстрее dev-сервер и лучше соответствие Nitro preset в разработке.

export default defineNuxtConfig({
  experimental: {
    viteEnvironmentApi: true
  }
})

Это также первый breaking change для Nuxt v5. Включить его можно, выставив compatibilityVersion: 5:

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 5
  },
})

Используйте только для тестов: включаются все будущие breaking changes, в том числе переход на Nitro v3 после выхода интеграции.

📦 Пакет @nuxt/nitro-server

Интеграция Nitro на сервере вынесена в отдельный пакет @nuxt/nitro-server (#33462). Это даёт возможность разных схем интеграции и задел под будущие изменения в SSR.

Изменение в основном внутреннее и продолжает линию на более модульный Nuxt. Пакет даёт отдельную интеграцию Nitro и основу для других вариантов (например, Nitro как Vite-плагин в Nuxt v5+).

⚡ Производительность

В релиз вошли несколько улучшений:

• Зависимости рендерера на этапе сборки — зависимости считаются при сборке, а не в runtime, быстрее холодный старт и первый рендер (#33361)
• Меньше зависимостей — убраны лишние из пакетов kit и schema (7ae2cf563)

📉 Вынос handler'ов useAsyncData

Экспериментальная возможность — вынос handler'ов в отдельные чанки (#33131). Функции, переданные в useAsyncData и useLazyAsyncData, выносятся в отдельные чанки и подгружаются динамически.

Особенно полезно для статически пререндеренных сайтов: логика загрузки данных нужна только при сборке и может не попадать в клиентский бандл.

<script setup lang="ts">
// Этот handler будет вынесен в отдельный чанк
// и загружаться только при необходимости
const { data: post } = await useAsyncData('post', async () => {
  const content = await queryContent(`/blog/${route.params.slug}`).findOne()

  // Сложная обработка, которую не нужно включать в клиентский бандл
  const processed = await processMarkdown(content)
  const related = await findRelatedPosts(content.tags)

  return {
    ...processed,
    related
  }
})
</script>

Для статических/пререндеренных сайтов включите в конфиге:

export default defineNuxtConfig({
  experimental: {
    extractAsyncDataHandlers: true
  }
})

При пререндере вынесенные handler'ы убираются из клиентского бандла (данные уже в payload). В итоге пользователям отдаётся заметно меньше JavaScript.

🔧 Экспериментальная поддержка TypeScript-плагинов

Добавлена экспериментальная поддержка улучшенного TypeScript DX через модуль @dxup/nuxt.

Модуль подключает TypeScript-плагины для удобства работы с возможностями Nuxt:

• Умное переименование компонентов — при переименовании автоимпортируемых компонентов обновляются все ссылки
• Go to definition для динамических импортов — переход к файлам при паттернах вида import(`~/assets/${name}.webp`)
• Навигация по Nitro-маршрутам — переход к серверным route handler'ам из $fetch, useFetch, useLazyFetch
• Runtime config — Go to definition для свойств runtime config
• Автоимпорты — плагин @dxup/unimport для навигации по composables и утилитам

Чтобы включить, установите в конфиге Nuxt experimental.typescriptPlugin: true:

export default defineNuxtConfig({
  experimental: {
    typescriptPlugin: true
  }
})

После включения модуль будет установлен и настроен Nuxt автоматически.

🎁 Другие улучшения

• declarationPath для компонентов — можно задать свой путь к декларациям (#33419)
• Расширения в resolveModule — в kit resolveModule добавлена опция extensions (#33328)
• Утилита setGlobalHead — в kit добавлена setGlobalHead для управления head (#33512)

🩹 Важные исправления

• Хеш маршрута сохраняется при редиректах по routeRules (#33222)
• Исправлены конкурентные вызовы loadNuxtConfig и корректная очистка (#33420)
• href в формате объекта корректно работает в <NuxtLink> (c69e4c30d)
• Автоимпорты компонентов работают как аргументы Vue h() (#33509)
• Исправлена обработка массивов в app config при HMR (#33555)

✅ Обновление

Рекомендуем выполнить:

npx nuxt upgrade --dedupe

Команда обновит lockfile и подтянет актуальные зависимости Nuxt, в том числе из экосистемы unjs.

👉 Полный список изменений

Спасибо, что дочитали до конца! Надеемся, релиз вам понравится. Если есть замечания или проблемы — напишите нам.

Удачной разработки на Nuxt ✨