Nuxt 3.13

🏘️ Группы маршрутов

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

Для примера:

-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

В результате в вашем приложении появятся страницы /, /about и /contact. Группа marketing игнорируется для целей структуры URL.

Подробнее читайте в оригинальном PR.

🏝️ Острова и метаданные Head

Теперь острова серверных компонентов могут манипулировать head, например, добавлять SEO-метаданные при рендеринге.

Подробнее в #27987.

🪝 Пользовательские триггеры предварительной выборки

Теперь мы поддерживаем пользовательские триггеры предварительной выборки для NuxtLink (#27846).

Например:

<template>
  <div>
    <NuxtLink prefetch-on="interaction">
Это приведет к предварительному получению данных при наведении курсора мыши или при получении фокуса
    </NuxtLink>
    <!-- Обратите внимание, что вам, вероятно, не стоит включать оба варианта! -->
    <NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
Это приведет к предварительному получению данных при наведении курсора мыши/фокусе - или когда ссылка станет видимой```
    </NuxtLink>
  </div>
</template>

Также можно включить/выключить эти параметры глобально для вашего приложения и переопределить их для каждой ссылки.

Например:

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: true,
        prefetchOn: { visibility: false, interaction: true }
      }
    }
  }
})

🗺️ Улучшенные исходные карты сервера

При запуске с node --enable-source-maps вы могли заметить, что исходные карты для файлов Vue в вашем серверном билде указывают на выходные данные билда Vite (что-то вроде .nuxt/dist/server/_nuxt/index-O15BBwZ3.js).

Теперь, даже после вашего билда Nitro, исходные карты вашего сервера будут ссылаться на ваши оригинальные исходные файлы (#28521).

Обратите внимание, что один из самых простых способов повысить производительность сборки — отключить карты исходников, если вы их не используете, что можно легко сделать в файле nuxt.config:

export default defineNuxtConfig({
  sourcemap: {
    server: false,
    client: true,
  },
})

🎁 Новые возможности для авторов модулей

В преддверии Nuxt v4 мы работаем над добавлением некоторых ключевых функциональностей для авторов модулей, включая новую утилиту isNuxtMajorVersion, где это необходимо (#27579) , и улучшенные выводимые типы для объединенных опций модуля с использованием нового метода defineNuxtModule().with() (#27520).

✨ Улучшенные предупреждения в режиме разработки

Мы больше не предупреждаем при использовании композаблов для получения данных в middleware (#28604) и предупреждаем, когда имена пользовательских компонентов начинаются с Lazy (#27838).

🚨 Изменения в TypeScript для Vue

В течение некоторого времени мы расширяли @vue/runtime-core в экосистеме Vue, чтобы добавлять к vue пользовательские свойства и многое другое. Однако это непреднамеренно нарушает типы для проектов, которые расширяют vue - что теперь является официально рекомендуемым и документированным способом расширения этих интерфейсов (например, ComponentCustomProperties, GlobalComponents и so on).

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

Мы обновили наши типы в Nuxt в соответствии с этими изменениями, но вы можете столкнуться с проблемами с последней версией vue-router, если она используется с библиотеками, которые еще не сделали этого.

Пожалуйста, создайте issue с воспроизведением — с радостью помогу создать PR для решения проблемы в соответствующей библиотеке. Или вы можете обойти проблему, создав declarations.d.ts в корне вашего проекта со следующим кодом (credit от @BobbieGoede):

import type {
  ComponentCustomOptions as _ComponentCustomOptions,
  ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties extends _ComponentCustomProperties {}
  interface ComponentCustomOptions extends _ComponentCustomOptions {}
}

✅ Обновление

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

npx nuxi@latest upgrade --force

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

Полные примечания к выпуску

Огромное спасибо всем, кто принимал участие в этом релизе — вы те, кто делает Nuxt возможным. ❤️

Не стесняйтесь сообщать нам о любых отзывах или проблемах! 🙏