Nuxt 3.18

🧪 Макросы отложенной гидрации

Поверх отложенной гидрации из v3.16 добавлены макросы ленивой гидрации (#31192) — удобнее управлять гидрацией компонентов:

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'visible',
  () => import('./components/MyComponent.vue')
)
</script>
<template>
  <div>
    <!--
      Гидрация запустится, когда элемент
      окажется в 100px от входа во viewport.
    -->
    <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" />
  </div>
</template>

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

♿️ Доступность

В встроенный app.vue добавлен <NuxtRouteAnnouncer> (#32621): смена страниц объявляется скринридерам, навигация доступнее. (Работает, только если в проекте нет своего app.vue; если есть — добавьте <NuxtRouteAnnouncer> в него.)

🛠️ Удобство разработки

Интеграция Chrome DevTools с workspace

Добавлена интеграция Chrome DevTools с workspace (#32084): исходники Nuxt можно править прямо из DevTools, изменения попадают в файлы проекта.

Типизация компонентов

• Типизированные слоты <ClientOnly> и <DevOnly> (#32707) — лучше IntelliSense и проверка ошибок
• Экспорт типов пропсов <NuxtTime> (#32547) — проще расширять и кастомизировать

Автоимпорт onWatcherCleanup

Функция onWatcherCleanup из Vue доступна как автоимпорт (#32396) — удобнее сбрасывать watchers и избегать утечек памяти:

const { data } = useAsyncData('users', fetchUsers)

watch(data, (newData) => {
  const interval = setInterval(() => {
    // Какая-то периодическая задача
  }, 1000)

  // Очистка при остановке watcher'а
  onWatcherCleanup(() => {
    clearInterval(interval)
  })
})

📊 Наблюдаемость

Маршруты страниц передаются в Nitro для observability (#32617) — удобнее мониторинг и аналитика с поддерживаемыми платформами.

🔧 Разработка модулей

Для авторов модулей — несколько упрощений:

Одиночные серверные импорты

Утилита kit addServerImports поддерживает один импорт (#32289):

// Раньше: только массив
addServerImports([{ from: 'my-package', name: 'myUtility' }])

// Теперь: можно передать объект
addServerImports({ from: 'my-package', name: 'myUtility' })

Конфигурация TypeScript

Модули могут дополнять typescript.hoist (#32601) — больше контроля над конфигом TypeScript и генерацией типов.

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

• Обмен Vite–node через внутренний сокет (#32417) — быстрее dev-сборки
• Переход на oxc-walker (#32250) и oxc для трансформ onPrehydrate (#32045) — быстрее преобразования кода

🐛 Исправления

• Загрузка данных: при смене computed-ключей старые данные корректно сохраняются (#32616)
• Прокрутка: scrollBehaviorType используется только для hash-скролла (#32622)
• Алиасы директорий: добавлены завершающие слэши для единообразия (#32755)

✅ Обновление

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

npx nuxi@latest upgrade --dedupe

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

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

Спасибо всем, кто участвовал в релизе. В ближайшие полгода будем бэкпортить совместимые фичи и исправления из v4 — пишите, что улучшить! ❤️