Nuxt 3.11
Это, возможно, последний минорный релиз перед Nuxt v4, поэтому мы наполнили его множеством функций и улучшений, которые, как мы надеемся, вас порадуют! ✨
🪵 Улучшенное логирование
При разработке приложения Nuxt и использовании console.log в приложении вы могли заметить, что эти логи не отображаются в консоли браузера при обновлении страницы (во время рендеринга на стороне сервера). Это может раздражать, так как затрудняет отладку. Теперь это в прошлом!
Теперь, когда у вас есть логи сервера, связанные с запросом, они будут объединены, переданы клиенту и отображены в консоли браузера. Асинхронный контекст используется для отслеживания и связывания этих логов с запросом, который их вызвал. (#25936).
Например, этот код:
<script setup>
console.log('Лог с индексной страницы')
const { data } = await useAsyncData(() => {
console.log('Лог внутри useAsyncData')
return $fetch('/api/test')
})
</script>
теперь будет выходить в консоль браузера при обновлении страницы:
Лог с индексной страницы
[ssr] Лог внутри useAsyncData
at pages/index.vue
👉 В будущем мы также планируем поддерживать стриминг последующих логов в Nuxt DevTools.
Мы также добавили хук dev:ssr-logs (как в Nuxt, так и в Nitro), который вызывается на сервере и клиенте, что позволяет вам обрабатывать их самостоятельно, если вы этого хотите.
Если у вас возникнут какие-либо проблемы, их можно отключить или запретить им регистрироваться в консоли браузера.
export default defineNuxtConfig({
features: {
devLogs: false
// или 'silent', чтобы позволить вам обработать их самостоятельно с помощью хука `dev:ssr-logs`
},
})
🎨 Режим предварительного просмотра
Новый композабл usePreviewMode призван упростить использование режима предварительного просмотра в приложении Nuxt.
const { enabled, state } = usePreviewMode()
При включении режима предварительного просмотра все композаблы получения данных, такие как useAsyncData и useFetch, будут запущены повторно, что означает, что все кэшированные данные в payload будут пропущены.
💰 Payload с очисткой кэша
Теперь мы автоматически очищаем кэш ваших полезных данных, если вы не отключили манифест приложения Nuxt, а это значит, что вы не застрянете с устаревшими данными после развертывания (#26068).
👮♂️ Middleware routeRules
Теперь можно определить middleware для роутов в части приложения Vue (то есть не в маршрутах Nitro) (#25841).
export default defineNuxtConfig({
routeRules: {
'/admin/**': {
// или appMiddleware: 'auth'
appMiddleware: ['auth']
},
'/admin/login': {
// Вы можете «отключить» middleware, которая в противном случае была бы запущена для страницы
appMiddleware: {
auth: false
}
},
},
})
⌫ Новая утилита для очистки полученных данных
Теперь useAsyncData и useFetch предоставляют утилиту clear. Это функция, которую можно использовать для установки data в значение undefined, установки error в значение null, установки pending в значение false, установки status в значение idle и пометки любых ожидающих в данный момент запросов как отмененных. (#26259)
<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')
const route = useRoute()
watch(() => route.path, (path) => {
if (path === '/') clear()
})
</script>
🕳️ Новая цель #teleports
Nuxt теперь включает новый элемент <div id="teleports"></div> в теге <body>. Он поддерживает телепорты на сервере, то есть вы можете делать это безопасно:
<template>
<Teleport to="#teleports">
<span>
Что-нибудь
</span>
</Teleport>
</template>
🚦 Индикатор загрузки и управление переходами
Теперь можно задать пользовательские тайминги для скрытия индикатора загрузки и принудительного вызова метода finish() при необходимости (#25932).
Также появился новый хук page:view-transition:start для подключения к View Transitions API (#26045), если эта функция у вас включена.
🛍️ Страницы только для сервера или клиента
В этом релизе страницы, предназначенные только для сервера или клиента, попадают в Nuxt! Теперь вы можете добавить суффикс .server.vue или .client.vue к странице, чтобы получить автоматическую обработку.
Страницы только для клиента будут полностью отображаться на стороне клиента и полностью пропускать серверный рендеринг, как если бы вся страница была обернута в <ClientOnly>. Используйте это ответственно. Увеличение загрузки на стороне клиента может повлечь плохой пользовательский опыт, поэтому убедитесь, что вам действительно нужно избегать загрузки на стороне сервера. Также рассмотрите возможность использования <ClientOnly> со слотом fallback для отображения skeleton-загрузчика (#25037).
⚗️ Серверные страницы еще более полезны, поскольку они позволяют вам интегрировать полностью серверный HTML в клиентскую навигацию. Они даже будут предварительно загружены, когда ссылки на них находятся в области просмотра — так что вы получите мгновенную загрузку (#24954).
🤠 "Золотое дно" серверного компонента
При использовании серверных компонентов теперь вы можете использовать атрибут nuxt-client в любом месте вашего дерева (#25479).
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: 'deep'
}
},
})
Вы можете прослушивать событие @error от серверных компонентов, которое будет срабатывать в случае возникновения проблем с загрузкой компонента (#25798).
Наконец, серверные компоненты теперь интеллектуально включаются, если в вашем проекте или любом из его слоев есть серверный компонент или серверная страница (#26223).
прежде чем полагаться на их детали реализации.
🔥 Улучшения производительности
Мы добавили ряд улучшений производительности, включая обновление только измененных виртуальных шаблонов (#26250), используя "многоуровневый" кэш пререндера (#26104), который обращается к файловой системе вместо того, чтобы сохранять все в памяти при пререндеринге - и множество других примеров.
📂 Управление публичными ассетами
Мы выпустили повторную реализацию обработки публичных ассетов Vite, что означает, что публичные ассеты в директории public/ или директориях слоев теперь полностью обрабатываются Nuxt (#26163), поэтому, если вы добавили директории nitro.publicAssets с пользовательским префиксом, они теперь будут работать.
📦 Именование чанков
Мы изменили шаблон имени файла по умолчанию _nuxt/[name].[hash].js для чанков JS. Теперь по умолчанию используется _nuxt/[hash].js. Это необходимо для того, чтобы избежать ложных срабатываний блокировщиков рекламы, которые вызывают имена ваших компонентов или чанков, что может быть очень сложной проблемой для отладки. (#26203)
При желании вы можете легко настроить все так, чтобы вернуться к предыдущему поведению:
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[name].[hash].js',
entryFileNames: '_nuxt/[name].[hash].js'
}
}
}
}
},
})
💪 Исправления типов
Ранее пользователи с shamefully-hoist=false могли столкнуться с проблемами с типами, которые не разрешались или работали неправильно. Вы также могли столкнуться с проблемами избыточного создания экземпляров типов.
Теперь мы пытаемся сообщить TypeScript об определенных типах ключей, чтобы их можно было разрешить, даже если они глубоко вложены (#26158).
Существует целый ряд других исправлений типов, включая некоторые, касающиеся типов импорта (#26218 и #25965) и типизации модулей (#25548).
✅ Обновление
Как обычно, мы рекомендуем выполнить обновление Nuxt следующим образом:
nuxi upgrade --force
Это также обновит ваш lockfile и обеспечит получение обновлений из других зависимостей, на которые опирается Nuxt - особенно в экосистеме unjs.
👉 Полное описание релиза
Спасибо, что дочитали до этого места! Надеемся, вам понравится новый релиз. Пожалуйста, дайте нам знать, если у вас есть какие-либо пожелания или проблемы.
Счастливого Накстинга ✨