Nuxt 3.5

⚡️ Выпущена версия Vue 3.3

Вышел Vue 3.3 с множеством интересных функций, особенно касающихся поддержки типов.

• новый макрос defineOptions
• 'generic'-компоненты
• типизированные слоты и использование внешних типов в defineProps
• ... и многое другое

Также значительно улучшено извлечение данных при навигации между вложенными страницами (#20777), спасибо @antfu и @baiwusanyu-c.

Более подробную информацию читайте в полном анонсе о релизе.

🙌 Nitropack v2.4

Мы работали над множеством улучшений Nitro, и они уже появились в Nitro v2.4. Возможно, у вас уже установлено это обновление, которое содержит множество исправлений ошибок, обновления формата модуля worker для Cloudflare, поддержку Vercel KV и многое другое.

Одно замечание: если вы выполняете деплой на Vercel или Netlify и хотите воспользоваться преимуществами инкрементальной статической регенерации, вам следует обновить правила маршрутизации:

routeRules: {
--  '/blog/**': { swr: 3000 },
++  '/blog/**': { isr: 3000 },
}

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

💖 Улучшенный JSON-payload

Расширенная сериализация полезной нагрузки (payload) в формате JSON теперь включена по умолчанию (#19205, #20770). Это и быстрее, и позволяет сериализовать сложные объекты в полезной нагрузке, передаваемой с сервера Nuxt клиенту (а также при извлечении данных полезной нагрузки для предварительно отрисованных сайтов).

Теперь это означает, что различные расширенные типы 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>')
})

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

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

Эту функцию следует считать в высшей степени экспериментальной, но благодаря отличной работе @huang-julien мы теперь поддерживаем интерактивный контент в серверных компонентах через слоты (#20284).

Вы можете следить за дорожной картой серверных компонентов по адресу #19772.

⏰ Конфигурация окружения

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

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  }
})

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

Подробнее о переопределениях для каждого окружения.

💪 Полностью типизированные страницы

Вы можете воспользоваться преимуществами полностью типизированной маршрутизации в приложении Nuxt с помощью этой экспериментальной интеграции с unplugin-vue-router — спасибо за отличную работу @posva!

Это позволит использовать типизированные navigateTo, <NuxtLink>, router.push() и многое другое из коробки.

Вы даже можете получить типизированные параметры внутри страницы, используя const route = useRoute('route-name').

Включите эту функцию непосредственно в nuxt.config:

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

🔎 Разрешение модуля 'Bundler'

Теперь в Nuxt есть полная поддержка стратегии разрешения модулей bundler.

Мы бы рекомендовали использовать это, если возможно. Например, в нем есть поддержка типов для экспорта вложенных путей, но он более точно соответствует поведению инструментов сборки, таких как Vite и Nuxt, чем разрешение Node16.

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler'
      }
    }
  }
})

Это включает способность TypeScript «следовать» за экспортами подпутей Node. Например, если библиотека имеет экспорт подпутей, например mylib/path, который сопоставлен с mylib/dist/path.mjs, то типы для этого можно извлечь из mylib/dist/path.d.ts, а не требовать от автора библиотеки создания mylib/path.d.ts.

⚗️ Отдельные серверные типы

Мы планируем улучшение ясности в IDE между частями 'nitro' и 'vue' вашего приложения, мы отправили первую часть улучшения с помощью отдельного сгенерированного файла tsconfig.json для директории ~/server (#20559).

Вы можете использовать его, добавив дополнительный ~/server/tsconfig.json со следующим содержимым:

{
  "extends": "../.nuxt/tsconfig.server.json"
}

Хотя сейчас эти значения не будут учитываться при проверке типов (nuxi typecheck), вы должны получить более точные подсказки типов в своей IDE.

💀 Устаревания

Хотя мы не вводили и не документировали хук build.extend из Nuxt 2, мы вызывали его в конструкторе webpack. Теперь мы явно объявляем его устаревшим и удалим его в будущей минорной версии.

✅ Обновление

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

npx nuxi upgrade --force

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

📃 Полный журнал изменений

Полное описание релиза читайте на https://github.com/nuxt/nuxt/releases/tag/v3.5.0