Nuxt 3.10

v3.10 довольно близка к версии 3.9, но в ней много новых функций и исправлений. Вот несколько основных моментов.

✨ Экспериментальный общий asyncData при пререндеринге

При предварительном рендеринге маршрутов мы можем снова и снова перезагружать одни и те же данные. В Nuxt 2 можно было создать 'payload', который можно было загрузить один раз, а затем использовать на каждой странице (и это, конечно, можно сделать вручную в Nuxt 3 — см. эту статью).

С #24894 мы теперь можем делать это автоматически при предварительном рендеринге сайта. Ваши вызовы useAsyncData и useFetch будут дедуплицироваться и кэшироваться между рендерами вашего сайта.

export defineNuxtConfig({
  experimental: {
    sharedPrerenderData: true
  }
})

🆔 SSR-безопасное и доступное создание уникального ID

Теперь мы поставляем композабл useId для генерации SSR-безопасных уникальных ID (#23368). Это позволяет создавать более доступные интерфейсы в вашем приложении. Например:

<script setup>
const emailId = useId()
const passwordId = useId()
</script>

<template>
  <form>
    <label :for="emailId">Email</label>
    <input
      :id="emailId"
      name="email"
      type="email"
    >
    <label :for="passwordId">Password</label>
    <input
      :id="passwordId"
      name="password"
      type="password"
    >
  </form>
</template>

✍️ Расширение app/router.options

Теперь авторы модулей могут добавлять свои собственные файлы router.options (#24922). Новый хук pages:routerOptions позволяет авторам модулей выполнять такие действия, как добавление пользовательского scrollBehavior или расширение маршрутов во время выполнения.

Клиентская поддержка Node.js

Теперь мы поддерживаем (экспериментально) полифиллинг ключевых встроенных модулей Node.js (#25028), так же, как мы уже делаем это в Nitro на сервере при развертывании в средах, отличных от Node.

Это означает, что в вашем клиентском коде вы можете выполнять импорт непосредственно из встроенных модулей Node (поддерживаются node: и node-импорт). Однако для вас ничего не внедряется глобально, чтобы избежать ненужного увеличения размера пакета. Вы можете сделать импорты по мере необходимости.

import { Buffer } from 'node:buffer'
import process from 'node:process'

Или предоставьте свой собственный polyfill, например, внутри плагина Nuxt.

import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

Это должно облегчить жизнь пользователям, которые работают с библиотеками без надлежащей поддержки браузера. Однако из-за риска ненужного увеличения вашего пакета мы настоятельно рекомендуем пользователям выбирать другие альтернативы, если это вообще возможно.

🍪 Лучшая реактивность файлов cookie

Теперь мы разрешаем вам выбрать использование CookieStore. Если есть поддержка браузера, то он будет использоваться вместо BroadcastChannel для реактивного обновления значений useCookie при обновлении файлов cookie (#25198).

Это также идет в паре с новым композаблом refreshCookie, который позволяет вручную обновлять значения cookie-файлов, например, после выполнения запроса.

🏥 Обнаружение анти-паттернов

В этом релизе мы также добавили ряд функций для обнаружения потенциальных ошибок и проблем с производительностью.

• Теперь мы выдадим ошибку, если на сервере используется setInterval (#25259).
• Мы предупредим (только в режиме разработки), если композаблы используются неправильно (#25071), например, вне контекста плагина или настройки.
• Мы предупредим (только в режиме разработки), если вы не используете <NuxtPage />, но у вас включена интеграция vue-router (#25490). (<RouterView /> не следует использовать отдельно.)

🧂 Поддержка детальных переходов между представлениями

Теперь можно управлять поддержкой переходов представлений на каждой странице с помощью definePageMeta (#25264).

Сначала вам необходимо включить экспериментальную поддержку переходов между представлениями:

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  },
  app: {
    // При необходимости вы можете отключить их глобально (по умолчанию они включены)
    viewTransition: false
  }
})

И вы можете точечно их включить/выключить:

<script setup lang="ts">
definePageMeta({
  viewTransition: false
})
</script>

Наконец, Nuxt не будет применять View Transitions, если браузер пользователя соответствует prefers-reduced-motion: reduce (#22292). Вы можете установить viewTransition: 'always'; тогда вам придется учитывать предпочтения пользователя.

🏗️ Метаданные маршрута во время сборки

Теперь можно получить доступ к метаданным маршрутизации, определенным в definePageMeta во время сборки, что позволяет модулям и хукам изменять и модифицировать эти значения (#25210).

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

Пожалуйста, поэкспериментируйте с этим и дайте нам знать, как это работает у вас. Мы надеемся улучшить производительность и включить это по умолчанию в будущем релизе, чтобы модули, такие как @nuxtjs/i18n и другие, могли обеспечить более глубокую интеграцию с параметрами маршрутизации, установленными в definePageMeta.

📦 Разрешение модулей Bundler

С #24837 мы теперь выбираем тип разрешения bundler в TypeScript, которое должно больше походить на реальный способ, которым мы разрешаем импорт вложенных путей для модулей в проектах Nuxt.

Разрешение модуля 'Bundler' рекомендуется Vue и Vite, но, к сожалению, все еще есть много пакетов, в которых нет правильных записей в их package.json.

В рамках этой работы мы открыли 85 PR-запросов по всей экосистеме для тестирования переключения по умолчанию, а также выявили и устранили некоторые проблемы.

Если вам нужно отключить это поведение, вы можете это сделать. Однако, пожалуйста, рассмотрите возможность поднять вопрос (не стесняйтесь отмечать меня в нем) в репозитории библиотеки или модуля, чтобы его можно было решить в исходном коде.

export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false
  }
})

✅ Обновление

Как обычно, мы рекомендуем выполнить обновление следующим образом:

npx nuxi upgrade --force

Это также обновит ваш lockfile и обеспечит получение обновлений из других зависимостей, на которые опирается Nuxt, особенно в экосистеме unjs.

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

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

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