В этом релизе много изменений!
⚡️ Новый способ создать Nuxt
Знакомьтесь с create-nuxt — новым способом запуска проектов Nuxt (отдельная благодарность @devgar за передачу имени пакета).
Упрощённая замена nuxi init: примерно в шесть раз меньше по размеру, один файл со всеми зависимостями — чтобы вы могли начать как можно быстрее.
Создать новый проект можно так:
npm create nuxt
Особая благодарность @cmang за красивую ASCII-графику. ❤️
Хотите узнать, куда мы движемся с Nuxt CLI? Посмотрите наш roadmap, включая планы по интерактивному выбору модулей.
🚀 Unhead v2
Мы обновились до unhead v2 — движка, который управляет <head> в Nuxt. В этом мажорном релизе убраны устаревшие API и улучшена работа с контекстом:
- Для пользователей Nuxt 3 мы поставляем legacy-сборку совместимости, чтобы ничего не сломалось
- Реализация контекста теперь более прямолинейна через сам Nuxt
// Nuxt снова реэкспортирует composables с корректным разрешением контекста
export function useHead(input, options = {}) {
const unhead = injectHead(options.nuxt)
return head(input, { head: unhead, ...options })
}
Если вы используете Unhead напрямую в приложении, учитывайте:
- Импортируйте из автоимпортов Nuxt или
#app/composables/head, а не из@unhead/vue - Прямой импорт из
@unhead/vueможет терять async-контекст
Не беспокойтесь — в Nuxt 3 мы сохранили обратную совместимость, поэтому большинству пользователей ничего менять не нужно!
Если вы включили compatibilityVersion: 4, загляните в наше руководство по обновлению для дополнительных изменений.
🔧 Обновление Devtools v2
Nuxt Devtools вырос до v2 (#30889)!
Вам понравятся новые возможности: выбор редактора, Discovery.js для просмотра итоговых конфигов (удобно для отладки), возвращение генератора схем и более лёгкие зависимости.
Одно из наших любимых улучшений — отслеживание того, как модули меняют конфигурацию Nuxt: вы буквально видите, что происходит «под капотом».
👉 Все подробности — в релизных заметках Nuxt DevTools.
⚡️ Улучшения производительности
Мы продолжаем делать Nuxt быстрее, и в v3.16 немало улучшений:
- Использование
exsolveдля разрешения модулей (#31124) вместе с остальной экосистемой unjs (nitro, c12, pkg-types и др.) — это заметно ускоряет разрешение модулей - Более умные пути разрешения модулей (#31037) — приоритет прямых импортов для большей эффективности
- Убрано дублирование разрешения алиасов Nitro (#31088) — меньше лишней работы с файлами
- Упрощён
loadNuxtза счёт пропуска лишних шагов разрешения (#31176) — быстрее старт - Принят
oxc-parserдля разбора в Nuxt-плагинах (#30066)
Все эти ускорения работают автоматически — настраивать ничего не нужно!
Отдельное спасибо CodSpeed и Vitest benchmarking за измерение улучшений в CI — это очень помогло.
Для примера: мой личный сайт roe.dev загружается на 32% быстрее с v3.16, а nuxt.com — на 28% быстрее. Надеемся, у вас будет похожий результат! ⚡️
🕰️ Поддержка отложенной гидратации
Мы рады представить нативную поддержку delayed/lazy hydration (#26468)! Это позволяет точно контролировать, когда компоненты гидратируются, что улучшает начальную загрузку и time-to-interactive. Мы опираемся на встроенные стратегии гидратации Vue — смотрите их в документации Vue.
<template>
<!-- Hydrate when component becomes visible in viewport -->
<LazyExpensiveComponent hydrate-on-visible />
<!-- Hydrate when browser is idle -->
<LazyHeavyComponent hydrate-on-idle />
<!-- Hydrate on interaction (mouseover in this case) -->
<LazyDropdown hydrate-on-interaction="mouseover" />
<!-- Hydrate when media query matches -->
<LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
<!-- Hydrate after a specific delay in milliseconds -->
<LazyFooter :hydrate-after="2000" />
</template>
Также можно слушать событие @hydrated, когда гидратация завершилась:
<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />
Подробнее о lazy hydration — в документации по компонентам.
🧩 Расширенная конфигурация страниц
Теперь можно точнее настроить, какие файлы Nuxt сканирует как страницы (#31090), получая больше контроля над структурой проекта:
export default defineNuxtConfig({
pages: {
// Filter specific files or directories
pattern: ['**/*.vue'],
}
})
🔍 Отладка
Опция debug стала гибче: можно включать только нужные категории логов (#30578):
export default defineNuxtConfig({
debug: {
// Включить нужные категории отладки
templates: true,
modules: true,
watchers: true,
hooks: {
client: true,
server: true,
},
nitro: true,
router: true,
hydration: true,
}
})
Или включите всё одной опцией: debug: true.
🎨 Поддержка декораторов
Добавлена экспериментальная поддержка декораторов (#27672). Обратная связь по экспериментальным возможностям приветствуется.
export default defineNuxtConfig({
experimental: {
decorators: true
}
})
function something (_method: () => unknown) {
return () => 'decorated'
}
class SomeClass {
@something
public someMethod () {
return 'initial'
}
}
const value = new SomeClass().someMethod()
// вернёт 'decorated'
📛 Именованные алиасы слоёв
Локальные слои из ~~/layers теперь автоматически получают алиасы. Слой ~~/layers/test доступен как #layers/test (#30948) — настраивать ничего не нужно.
Для других слоёв можно задать имя в конфигурации:
export default defineNuxtConfig({
$meta: {
name: 'example-layer',
},
})
Так создаётся алиас #layers/example-layer для вашего слоя — импорты становятся понятнее.
🧪 Обработка ошибок
Улучшены сообщения об ошибках и отслеживание источников (#31144):
- Более понятные предупреждения для неопределённых вызовов
useAsyncDataс указанием файла и места - Страницы ошибок корректно показываются при ошибках island-страниц (#31081)
В терминале используются улучшенная обработка ошибок Nitro (youch) с поддержкой stack trace.
Nitro автоматически подключает source maps без дополнительных опций Node, при рендере страниц ошибок выставляются подходящие заголовки безопасности.
📦 Разработка модулей
Для авторов модулей добавлена возможность дополнять типы Nitro через addTypeTemplate (#31079):
// Внутри вашего Nuxt-модуля
export default defineNuxtModule({
setup(options, nuxt) {
addTypeTemplate({
filename: 'types/my-module.d.ts',
getContents: () => `
declare module 'nitropack' {
interface NitroRouteConfig {
myCustomOption?: boolean
}
}
`
}, { nitro: true })
}
})
⚙️ Обновление до Nitro v2.11
Мы перешли на Nitro v2.11. Улучшений много — полный список в релизных заметках.
👉 Подробности в релизных заметках Nitro v2.11.0.
📦 Новые мажорные версии unjs
В релиз вошли мажорные обновления из экосистемы unjs с упором на производительность и меньший размер за счёт ESM-only:
- unenv обновлён до v2 (полная переработка)
- db0 обновлён до v0.3 (только ESM, нативный node:sql, улучшения)
- ohash обновлён до v2 (только ESM, нативный node:crypto, быстрее)
- untyped обновлён до v2 (только ESM, меньше размер установки)
- unimport обновлён до v4 (улучшения)
- c12 обновлён до v3 (только ESM)
- pathe обновлён до v2 (только ESM)
- cookie-es обновлён до v2 (только ESM)
- esbuild обновлён до v0.25
- chokidar обновлён до v4
✅ Обновление
По-прежнему рекомендуем выполнить:
npx nuxi@latest upgrade --dedupe
Команда обновит lockfile и подтянет актуальные зависимости Nuxt, в том числе из экосистемы unjs.
Полный список изменений
Большое спасибо всем, кто участвовал в этом релизе. ❤️
В этом релизе много серьёзных изменений — если есть замечания или проблемы, напишите нам. 🙏