Nuxt 3.8

💻 Улучшения CLI

Напоминаем, что теперь мы используем новый Nuxt CLI, который теперь имеет отдельную версию.

✨ Встроенные инструменты разработчика Nuxt

Вышел Nuxt DevTools v1.0.0, и теперь мы считаем, что он готов к выпуску в качестве прямой зависимости Nuxt.

📸 Автоматическая установка Nuxt Image

<NuxtImg> и <NuxtPicture> - встроенные компоненты первого класса.

Теперь мы автоматически устанавливаем @nuxt/image при первом использовании (#23717).

📂 Более глубокое сканирование лейаутов

Теперь мы поддерживаем сканирование лейаутов внутри поддиректорий в ~/layouts так же, как и в ~/components.

📊 Манифест приложения

Теперь мы поддерживаем встроенный манифест приложения (см. PR #21641), который генерирует манифест в /_nuxt/builds/meta/<buildId>.json.

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

Он также включает правила маршрутизации на клиенте. На данный момент поддерживаются только правила маршрутизации redirect; теперь они будут перенаправлять при выполнении навигации на клиенте.

export default defineNuxtConfig({
  routeRules: {
    '/about': { redirect: '/about-us' }
  }
})

🤝 Улучшения области действия и контекста

Теперь мы определяем 'область действия' для композаблов Nuxt, выполняемых в плагинах (#23667), что позволяет запускать синхронную очистку перед уходом с сайта, используя метод жизненного цикла Vue onScopeDispose.

Теперь мы также поддерживаем собственный асинхронный контекст для Vue composition API (#23526). Если вы не в курсе, мы поддерживаем собственный асинхронный контекст в Node и Bun, включенный с помощью experimental.asyncContext.

Если у вас возникли проблемы с Nuxt instance unavailable, включение этой опции может решить их:

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

🔗 Настройки NuxtLink по умолчанию

Вы можете определить собственные компоненты <NuxtLink> с помощью утилиты defineNuxtLink.

Сегодня вы можете настраивать параметры встроенного <NuxtLink> непосредственно в файле nuxt.config (#23724).

Например, это позволит вам принудительно применять завершающий слеш на всем сайте:

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})

⚡️ Улучшения получения данных

У нас есть две очень важные новые функции для useAsyncData и useFetch:

1. Теперь вы можете установить deep: false, чтобы предотвратить глубокую реактивность в объекте data, возвращаемом из этих композаблов (#23600). Это должно улучшить производительность, если вы возвращаете большие массивы или объекты. Объект все равно будет обновляться при повторной выборке; он просто не будет вызывать реактивные эффекты, если вы измените свойство глубоко внутри data.
2. Теперь вы можете использовать опцию getCachedData для управления пользовательским кэшированием для этих композаблов (#20747)

<script setup>
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
  // это не будет повторно загружено, если ключ существует в payload
  getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
</script>

Мы также поддерживаем настройку некоторых значений по умолчанию для этих композаблов на уровне всего приложения (#23725):

export default defineNuxtConfig({
  experimental: {
    defaults: {
      useAsyncData: {
        deep: false
      },
      useFetch: {
        retry: false,
        retryDelay: 100,
        retryStatusCodes: [500],
        timeout: 100
      }
    }
  }
})

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

Теперь мы более осторожно загружаем плагины слоев (#22889 и #23148) и middleware (#22925 и #23552) в порядке слоев, всегда загружая ваши собственные плагины и middleware в последнюю очередь. Это должно означать, что вы можете положиться на утилиты, которые могут внедрять слои.

И, возможно, одно из самых значительных изменений — если вы используете удаленные слои, мы теперь клонируем их в директорию node_modules/ (#109), чтобы слои могли использовать зависимости вашего проекта. Подробности см. в описании релиза c12.

😴 Канал ночных релизов

Каждый коммит в main ветку Nuxt автоматически развертывается в новый релиз для более легкого тестирования перед релизами. Мы переименовали это из 'edge release channel' в 'nightly release channel', чтобы избежать путаницы с edge deployments. И, вероятно, также с Microsoft Edge (хотя я не слышал, чтобы кто-то путал его с ним!)

• nuxt3 теперь nuxt-nightly
• nuxi-edge теперь nuxi-nightly
• @​nuxt/kit-edge теперь @​nuxt/kit-nightly
• ... и так далее.

⚗️ Nitro v2.7

Вышла версия Nitro v2.7 с множеством улучшений и исправлений ошибок.

💪 Изменения импорта типов

Vue требует, чтобы импорт типов был явным (чтобы компилятор Vue мог правильно оптимизировать и разрешать импорт типов для свойств и т.д.). См. core Vue tsconfig.json.

Поэтому мы приняли решение включить verbatimModuleSyntax по умолчанию в проектах Nuxt, что приведет к ошибке типа, если типы импортируются без явного импорта type. Чтобы решить эту проблему, вам нужно будет обновить ваши импорты:

- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'

Вы также можете столкнуться с модулями в экосистеме Nuxt, которые необходимо обновить; пожалуйста, создайте issue для этих модулей. Если вы автор модуля, то я также буду рад помочь, если у вас возникнут с этим какие-либо проблемы. Просто отметьте меня, и я посмотрю.

Если по какой-либо причине вам нужно отменить это изменение в вашем проекте, вы можете установить следующую конфигурацию:

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

Однако мы рекомендуем делать это только временно, поскольку Vue необходимо, чтобы эта опция была установлена ​​для достижения наилучших результатов.

✅ Обновление

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

npx nuxi upgrade

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

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

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