Nuxt mid-level certification launch date announced!
Релиз·  

Nuxt 3.10

Вышел Nuxt 3.10 — наполненный возможностями и исправленями. Вот несколько основных моментов.

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

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

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

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

nuxt.config.ts
export defineNuxtConfig({
  experimental: {
    sharedPrerenderData: true
  }
})
Особенно важно убедиться, что любой уникальный ключ ваших данных всегда разрешается в те же данные. Например, если вы используете useAsyncData для получения данных, относящихся к определенной странице, вы должны предоставить ключ, который уникально соответствует этим данным. (useFetch должен делать это автоматически.)
Узнать больше Docs > Guide > Going Further > Experimental Features#sharedprerenderdata.

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

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

components/MyForm.vue
<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>
Узнать больше Docs > API > Composables > Use Id.

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

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

Узнать больше Docs > Guide > Going Further > Custom Routing#router Options.

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

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

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

some-file.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'

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

plugins/node.client.ts
import { Buffer } from 'node:buffer'
import process from 'node:process'

globalThis.Buffer = Buffer
globalThis.process = process

export default defineNuxtPlugin({})

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

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

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

Узнать больше Docs > API > Utils > Refresh Cookie.

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

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

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

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

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

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

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

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

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

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

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

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

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    scanPageMeta: true
  }
})

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

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

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

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

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

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

nuxt.config.ts
export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false
  }
})

✅ Обновление

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

npx nuxi upgrade --force

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

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

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

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

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

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