Nuxt 3.17

📊 Загрузка данных

Слой загрузки данных в Nuxt переработан: улучшены useAsyncData и useFetch.

Обратная совместимость сохранена; breaking changes скрыты за флагом experimental.granularCachedData (по умолчанию выключен). Всё же рекомендуем после обновления прогнать тесты. Если нужны старые поведение и бессрочный кэш после размонтирования компонентов с useAsyncData, отключите experimental.purgeCachedData.

Единое состояние данных в компонентах

Все вызовы useAsyncData или useFetch с одним ключом используют одни и те же refs — данные согласованы по приложению:

<!-- ComponentA.vue -->
<script setup>
const { data: users, pending } = useAsyncData('users', fetchUsers)
</script>

<!-- ComponentB.vue -->
<script setup>
// Те же данные, что и в ComponentA
const { data: users, status } = useAsyncData('users', fetchUsers)
// При refresh в любом компоненте оба обновятся одинаково
</script>

Так устраняются рассинхроны данных между компонентами.

Реактивные ключи

В качестве ключа можно использовать computed refs, обычные refs или getter-функции:

const userId = ref('123')
const { data: user } = useAsyncData(
  computed(() => `user-${userId.value}`),
  () => fetchUser(userId.value)
)

// Смена userId автоматически запустит новый запрос
// и очистит старые данные, если их больше никто не использует
userId.value = '456'

Оптимизированный перезапрос

Несколько компонентов с одним источником данных при изменении зависимостей вызывают один общий запрос:

// In multiple components:
const { data } = useAsyncData(
  'users',
  () => $fetch(`/api/users?page=${route.query.page}`),
  { watch: [() => route.query.page] }
)

// При смене route.query.page выполнится один запрос,
// все компоненты с этим ключом обновятся одновременно

🎭 Встроенные компоненты Nuxt

<NuxtTime> — безопасный вывод времени

Добавлен компонент <NuxtTime> для безопасного вывода времени при SSR и устранения расхождений при гидрации (#31876):

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

Компонент поддерживает разные форматы времени и корректно работает и на клиенте, и на сервере.

Улучшенный <NuxtErrorBoundary>

<NuxtErrorBoundary> переведён в SFC и теперь экспортирует error и clearError из компонента и в типах слота #error — удобнее обрабатывать ошибки в шаблонах и через useTemplateRef (#31847):

<NuxtErrorBoundary @error="handleError">
  <template #error="{ error, clearError }">
    <div>
      <p>{{ error.message }}</p>
      <button @click="clearError">Попробовать снова</button>
    </div>
  </template>

  <!-- Контент, который может выбросить ошибку -->
  <MyComponent />
</NuxtErrorBoundary>

🔗 Улучшения роутера

У <NuxtLink> появился проп trailingSlash для управления форматом URL (#31820):

<NuxtLink to="/about" trailing-slash>О нас</NuxtLink>
<!-- Отрисуется <a href="/about/"> -->

🔄 Настройка индикатора загрузки

Индикатор загрузки настраивается новыми пропами (#31532):

• hideDelay — задержка перед скрытием полосы загрузки
• resetDelay — задержка перед сбросом состояния индикатора

<template>
  <NuxtLoadingIndicator :hide-delay="500" :reset-delay="300" />
</template>

📚 Документация как npm-пакет

Документация Nuxt доступна как пакет: установите @nuxt/docs для доступа к markdown и YAML, из которых собирается сайт документации (#31353).

💻 Удобство разработки

Добавлены предупреждения для типичных ошибок:

• Серверные компоненты без корневого элемента #31365
• Использование зарезервированного пространства имён runtimeConfig.app #31774
• Переопределение базовых пресетов автоимпорта #29971
• Ошибка при повторном вызове definePageMeta в одном файле #31634

🔌 Разработка модулей

Для авторов модулей:

• Опция experimental.enforceModuleCompatibility — Nuxt выбросит ошибку при загрузке несовместимого модуля (#31657). В Nuxt v4 будет включена по умолчанию.
• Регистрация всех компонентов из named exports файла через addComponentExports #27155

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

• Переход на tinyglobby для быстрого glob #31668
• Директория .data исключена из type-check для ускорения сборки #31738
• Улучшен tree-shaking за счёт выноса проверки purgeCachedData #31785

✅ Обновление

Рекомендуем выполнить:

npx nuxi@latest upgrade --dedupe

Команда обновит lockfile и подтянет зависимости Nuxt, в том числе из экосистемы unjs.

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

Большое спасибо всем, кто участвовал в релизе. ❤️