Learn Nuxt with a Collection of 100+ Tips!
Релиз·  

Nuxt 3.11

Вышел Nuxt 3.11 — с улучшенным логированием, режимом предварительного просмотра, серверными страницами и многим другим!

Это, возможно, последний минорный релиз перед Nuxt v4, поэтому мы наполнили его множеством функций и улучшений, которые, как мы надеемся, вас порадуют! ✨

🪵 Улучшенное логирование

При разработке приложения Nuxt и использовании console.log в приложении вы могли заметить, что эти логи не отображаются в консоли браузера при обновлении страницы (во время рендеринга на стороне сервера). Это может раздражать, так как затрудняет отладку. Теперь это в прошлом!

Теперь, когда у вас есть логи сервера, связанные с запросом, они будут объединены, переданы клиенту и отображены в консоли браузера. Асинхронный контекст используется для отслеживания и связывания этих логов с запросом, который их вызвал. (#25936).

Например, этот код:

pages/index.vue
<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), который вызывается на сервере и клиенте, что позволяет вам обрабатывать их самостоятельно, если вы этого хотите.

Если у вас возникнут какие-либо проблемы, их можно отключить или запретить им регистрироваться в консоли браузера.

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    devLogs: false
    // или 'silent', чтобы позволить вам обработать их самостоятельно с помощью хука `dev:ssr-logs`
  },
})

🎨 Режим предварительного просмотра

Новый композабл usePreviewMode призван упростить использование режима предварительного просмотра в приложении Nuxt.

plugins/test.client.ts
const { enabled, state } = usePreviewMode()

При включении режима предварительного просмотра все композаблы получения данных, такие как useAsyncData и useFetch, будут запущены повторно, что означает, что все кэшированные данные в payload будут пропущены.

Узнать больше Docs > API > Composables > Use Preview Mode.

💰 Payload с очисткой кэша

Теперь мы автоматически очищаем кэш ваших полезных данных, если вы не отключили манифест приложения Nuxt, а это значит, что вы не застрянете с устаревшими данными после развертывания (#26068).

👮‍♂️ Middleware routeRules

Теперь можно определить middleware для роутов в части приложения Vue (то есть не в маршрутах Nitro) (#25841).

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/admin/**': {
      // или appMiddleware: 'auth'
      appMiddleware: ['auth']
    },
    '/admin/login': {
      // Вы можете «отключить» middleware, которая в противном случае была бы запущена для страницы
      appMiddleware: {
        auth: false
      }
    },
  },
})
Узнать больше Docs > Guide > Concepts > Rendering#route Rules.

⌫ Новая утилита для очистки полученных данных

Теперь 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>
Узнать больше Docs > Getting Started > Data Fetching.

🕳️ Новая цель #teleports

Nuxt теперь включает новый элемент <div id="teleports"></div> в теге <body>. Он поддерживает телепорты на сервере, то есть вы можете делать это безопасно:

app.vue
<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).

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: 'deep'
    }
  },
})

Вы можете прослушивать событие @error от серверных компонентов, которое будет срабатывать в случае возникновения проблем с загрузкой компонента (#25798).

Наконец, серверные компоненты теперь интеллектуально включаются, если в вашем проекте или любом из его слоев есть серверный компонент или серверная страница (#26223).

Серверные компоненты остаются экспериментальными, и их API может измениться, поэтому будьте осторожны,
прежде чем полагаться на их детали реализации.

🔥 Улучшения производительности

Мы добавили ряд улучшений производительности, включая обновление только измененных виртуальных шаблонов (#26250), используя "многоуровневый" кэш пререндера (#26104), который обращается к файловой системе вместо того, чтобы сохранять все в памяти при пререндеринге - и множество других примеров.

📂 Управление публичными ассетами

Мы выпустили повторную реализацию обработки публичных ассетов Vite, что означает, что публичные ассеты в директории public/ или директориях слоев теперь полностью обрабатываются Nuxt (#26163), поэтому, если вы добавили директории nitro.publicAssets с пользовательским префиксом, они теперь будут работать.

📦 Именование чанков

Мы изменили шаблон имени файла по умолчанию _nuxt/[name].[hash].js для чанков JS. Теперь по умолчанию используется _nuxt/[hash].js. Это необходимо для того, чтобы избежать ложных срабатываний блокировщиков рекламы, которые вызывают имена ваших компонентов или чанков, что может быть очень сложной проблемой для отладки. (#26203)

При желании вы можете легко настроить все так, чтобы вернуться к предыдущему поведению:

nuxt.config.ts
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.

👉 Полное описание релиза

Читайте полное описание релиза Nuxt v3.11.0.

Спасибо, что дочитали до этого места! Надеемся, вам понравится новый релиз. Пожалуйста, дайте нам знать, если у вас есть какие-либо пожелания или проблемы.

Счастливого Накстинга ✨

← Вернуться к блогу