Nuxt 3.9

Веселого Рождества вам и вашим близким от всех Накстеров, принявших участие в этом релизе! 🎁🎄

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

⚡️ Vite 5

Этот релиз поставляется с поддержкой Vite 5 и Rollup 4. Авторам модулей может потребоваться проверить, совместимы ли все создаваемые вами плагины Vite с этими последними релизами.

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

✨ Готов к Vue 3.4

Этот релиз протестирован с последним релиз-кандидатом Vue 3.4 и имеет необходимую конфигурацию для использования новых функций Vue 3.4, включая отладку ошибок гидратации в продакшене (просто установите debug: true) в конфигурации Nuxt.

👉 Чтобы воспользоваться преимуществами, просто обновите версию vue после выхода версии 3.4 или попробуйте релиз-кандидат уже сегодня:

{
  "dependencies": {
    "nuxt": "3.9.0",
    "vue": "3.4.0-rc.1",
    "vue-router": "latest"
  }
}

🏝️ Интерактивные серверные компоненты

Это очень экспериментальное обновление, но теперь можно поиграться с интерактивными компонентами в серверных компонентах Nuxt. Вам нужно будет включить эту новую функцию в дополнение к компонентам-островам:

export default defineNuxtConfig({
  experimental: {
    componentIslands: {
      selectiveClient: true
    }
  }
})

Теперь в серверном компоненте вы можете указать компоненты для гидратации с помощью директивы nuxt-client:

<NuxtLink :to="/" nuxt-client />

Мы в восторге от этой функции — так что дайте нам знать, как вы ее используете! 🙏

🔥 Автоматическая оптимизация сервера

Теперь мы используем новый метод Vite 'define', поддерживающий AST, для выполнения более точных замен в коде на стороне сервера, что означает, что такой код больше не будет выдавать ошибку:

<script setup lang="ts">
if (document) {
  console.log(document.querySelector('div'))
}
</script>

До сих пор это было невозможно, поскольку мы не хотели рисковать случайной заменой обычных слов, таких как document, в не-JS-частях ваших приложений. Но новая функциональность define в Vite работает на esbuild и учитывает синтаксис, поэтому мы уверены в том, что включим эту функциональность. Тем не менее, вы можете отказаться, если вам нужно:

export default defineNuxtConfig({
  hooks: {
    'vite:extendConfig' (config) {
      delete config.define!.document
    }
  }
})

🚦 Точечное API загрузки

Теперь у нас есть новая система на основе хуков для <NuxtLoadingIndicator>, включая useLoadingIndicator, который позволяет вам контролировать/останавливать/запускать состояние загрузки. Вы также можете подключиться к page:loading:start и page:loading:end, если хотите.

🏁 Запуск отдельных событий в callOnce

Иногда нужно запустить код только один раз, независимо от того, сколько раз вы загружаете страницу, и вы не хотите запускать его снова на клиенте, если он уже выполнялся на сервере.

Для этого у нас есть новая утилита: callOnce (#24787).

<script setup>
const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('Это будет зарегистрировано только один раз.')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>

Обратите внимание, что эта утилита зависит от контекста, поэтому ее нужно вызывать в функции настройки компонента или плагине Nuxt, как и композаблы Nuxt.

🚨 Типы ошибок

Некоторое время назад ошибки, возвращаемые useAsyncData и useFetch, были типизированы довольно обобщенно как Error. Мы значительно улучшили возможности типов для них, чтобы сделать их более точными с точки зрения того, что вы фактически получите. ("Под капотом" мы нормализуем ошибки с помощью утилиты h3 createError, поэтому, например, их можно сериализовать с сервера на клиент.)

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

🔥 Производительность схемы

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

✅ Обновление

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

npx nuxi upgrade

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

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

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