Nuxt 3.4

🪄 Поддержка View Transitions API

Вы можете ознакомиться с демо-версией на сайте https://nuxt-view-transitions.surge.sh и исходным кодом на StackBlitz.

Вы могли заметить, что браузеры на базе Chromium теперь поставляют новый API веб-платформы: View Transitions API. Это захватывающая новая возможность для собственных переходов браузера, которая (помимо прочего) позволяет осуществлять переходы между несвязанными элементами на разных страницах.

Nuxt теперь поставляется с экспериментальной реализацией, которая будет активно разрабатываться в течение цикла выпуска v3.4. См. известные проблемы в связанном PR.

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

✨ Улучшения полезной нагрузки (payload)

Мы слили значительное изменение в том, как Nuxt обрабатывает полезные нагрузки (под экспериментальным флагом). Полезные нагрузки используются для отправки данных с сервера клиенту при выполнении рендеринга на стороне сервера и избегания двойной выборки данных во время фазы гидратации.

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

Благодаря включению этой новой опции теперь прямо из коробки поддерживаются различные расширенные типы JS: регулярные выражения, даты, Map, Set и BigInt, а также NuxtError и специфичные для Vue объекты, такие как ref, reactive, shallowRef и shallowReactive.

Вы можете найти пример в нашем наборе тестов.

Все это стало возможным благодаря Rich-Harris/devalue#58. Долгое время Nuxt использовал нашу собственную ветку devalue из-за проблем с сериализацией Errors и других не-POJO-объектов, но теперь мы вернулись к оригиналу.

Вы даже можете зарегистрировать свои собственные типы с помощью нового плагина объектного синтаксиса Nuxt:

export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})

Подробнее о том, как это работает, можно прочитать здесь.

Примечание: это влияет только на полезные данные приложения Nuxt, то есть данные, хранящиеся в useState, возвращаемые из useAsyncData или вручную вводимые через nuxtApp.payload. Это не влияет на данные, полученные с маршрутов сервера Nitro через $fetch или useFetch, хотя это одна из областей, которую я хотел бы исследовать подробнее.

Предварительное тестирование показывает значительное ускорение: на 25% меньше общего времени ответа сервера для минимального приложения с большой полезной нагрузкой в JSON, но я настоятельно рекомендую вам провести собственные тесты и поделиться с нами результатами.

Как уже упоминалось, мы объединяем это с флагом, чтобы мы могли протестировать это в широком масштабе и собрать отзывы о новом подходе. Наиболее значительным потенциальным изменением является то, что полезная нагрузка теперь больше не доступна в window.__NUXT__ немедленно. Вместо этого нам теперь нужно инициализировать приложение Nuxt для анализа полезной нагрузки, поэтому любой код, который обращается к __NUXT__, должен быть запущен в плагине или позже в жизненном цикле приложения Nuxt. Пожалуйста, не стесняйтесь поднимать вопрос, если вы предвидите или сталкиваетесь с проблемами в своих проектах.

🎁 Объектный синтаксис плагинов Nuxt

Теперь мы поддерживаем Nuxt-плагины с объектным синтаксисом для лучшего контроля над порядком плагинов и более простой регистрации хуков.

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // или 'post'
  async setup (nuxtApp) {
    // это эквивалент обычного функционального плагина
  },
  hooks: {
    // Вы можете напрямую зарегистрировать хуки приложения Nuxt здесь
    'app:created'() {
      const nuxtApp = useNuxtApp()
      //
    }
  }
})

В будущем мы планируем включить оптимизацию сборки на основе метаданных, которые вы передаете в плагинах Nuxt.

🛠️ Более простая конфигурация Devtools

Включить Nuxt DevTools в вашем проекте еще проще: просто установите devtools: true в файле nuxt.config, чтобы включить devtools.

export default defineNuxtConfig({
  devtools: true
})

Если он еще не установлен, Nuxt предложит установить его локально. Это означает, что вам больше не нужно включать Nuxt DevTools глобально.

Примечание: DevTools все еще находится в стадии экспериментальной разработки, поэтому будьте готовы к случайному непредвиденному поведению и, пожалуйста, сообщайте о проблемах напрямую по адресу https://github.com/nuxt/devtools 🙏

📚 Улучшения слоев

Теперь мы поддерживаем преобразование псевдонимов ~/~~/@/@@ внутри слоев, что означает, что вам больше не нужно использовать относительные пути при импорте внутри слоев.

Это должно означать, что гораздо проще использовать «обычный» проект Nuxt в качестве слоя без необходимости специально писать его как таковой.

🧸 Улучшение преобразований контекста

Мы теперь преобразуем определенные ключи definePageMeta и defineNuxtComponent, что означает, что у вас должно быть меньше проблем с отсутствующим экземпляром Nuxt. Это включает поддержку доступа к экземпляру Nuxt после await в функциях asyncData и setup для тех, кто все еще использует Options API. И вам больше не нужно обертывать middleware и validate с defineNuxtRouteMiddleware при использовании асинхронных функций.

♻️ Обновления экосистемы

Как обычно, этот релиз будет включать в себя улучшения основной ветки разработки, включая новые Consola v3 и Nitropack v2.3.3 (вскоре ожидается выход новой версии).

🚨 'Исправления ошибок'

Мы также воспользовались возможностью и внесли некоторые исправления в этот небольшой релиз.

1. Ранее можно было передать заголовок x-nuxt-no-ssr (недокументированный) для принудительного рендеринга SPA. Теперь мы отключили это поведение по умолчанию, но вы можете вернуть его, установив experimental.respectNoSSRHeader в значение true. В качестве альтернативы вы можете установить event.context.nuxt.noSSR на сервере для принудительного рендеринга SPA.
2. Мы удалили (устаревший) псевдоним #head и также отключили полифил для поведения @vueuse/head по умолчанию. (Его все еще можно включить с помощью experimental.polyfillVueUseHead.)
3. Мы удалили (устаревшую) опцию experimental.viteNode. Вместо этого ее можно настроить с помощью vite.devBundler.
4. Мы пометили deprecated доступ к публичной runtime-конфигурации без ключа public. Это была мера совместимости с Nuxt 2, и мы планируем полностью удалить ее в версии 3.5.
5. Чтобы исправить ошибку с нашей интеграцией vue-router, мы теперь генерируем немного другой синтаксис сопоставления путей. Если вы полагались на точный сгенерированный путь, загляните на страницу https://github.com/nuxt/nuxt/pull/19902 для получения дополнительной информации.

✅ Обновление

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

npx nuxi upgrade --force

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