Learn Nuxt with a Collection of 100+ Tips!
Релиз·  

Nuxt 3.8

Вышел Nuxt 3.8, в который вошли встроенные инструменты разработчика, автоматическая установка Nuxt Images, новый манифест приложения и многое другое.

💻 Улучшения CLI

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

Теперь вы можете установить модуль с помощью nuxi module add <module-name>
Теперь мы используем тот же порт, что и Vite WebSocket, что обеспечивает лучшую поддержку Docker-контейнеров при разработке.
Читайте описание релиза Nuxt CLI v3.9.0.

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

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

Ознакомьтесь с анонсом Nuxt DevTools v1.0.

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

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

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

Мы советуем использовать пакет @nuxt/image, если вы используете изображения на своем сайте; он может применить оптимизацию, чтобы сделать ваш сайт более производительным.

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

Это изменение поведения, поэтому будьте с ним осторожны.

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

ФайлНазвание лейаута
~/layouts/desktop/default.vue'desktop-default'
~/layouts/desktop-base/base.vue'desktop-base'
~/layouts/desktop/index.vue'desktop'
Узнайте больше об Именованных лейаутах.

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

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

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

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

export default defineNuxtConfig({
  routeRules: {
    '/about': { redirect: '/about-us' }
  }
})
Манифест приложения также позволяет вносить будущие улучшения, включая обнаружение нового деплоя путем проверки /_nuxt/builds/latest.json.
Вы можете отключить это поведение, если это необходимо, установив experimental.appManifest в false в файле nuxt.config.

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

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

Это должно исправить пограничный случай с файлами cookie (#23697), а также улучшить управление памятью, например, сторами Pinia (#23650).
Узнайте больше об области действия эффектов Vue.

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

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

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})
Как только у нас появится поддержка кросс-рантайма, мы включим ее по умолчанию.

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

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

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

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

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

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

  1. Теперь вы можете установить deep: false, чтобы предотвратить глубокую реактивность в объекте data, возвращаемом из этих композаблов (#23600). Это должно улучшить производительность, если вы возвращаете большие массивы или объекты. Объект все равно будет обновляться при повторной выборке; он просто не будет вызывать реактивные эффекты, если вы измените свойство глубоко внутри data.
  2. Теперь вы можете использовать опцию getCachedData для управления пользовательским кэшированием для этих композаблов (#20747)
pages/index.vue
<script setup>
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
  // это не будет повторно загружено, если ключ существует в payload
  getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
</script>
Посмотрите видео от Александра Лихтера о кэшировании на клиенте с помощью getCachedData.

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

nuxt.config.ts
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 с множеством улучшений и исправлений ошибок.

🔥 Одно из самых важных заключается в том, что теперь мы экономим 40% размера бандла в продакшене, используя собственный fetch, поддерживаемый в Node 18+ (#1724). Поэтому, если возможно, мы рекомендуем вам обновить версию Node как минимум до 18.
Ознакомьтесь с описанием релиза 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 для этих модулей. Если вы автор модуля, то я также буду рад помочь, если у вас возникнут с этим какие-либо проблемы. Просто отметьте меня, и я посмотрю.

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

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

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

✅ Обновление

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

npx nuxi upgrade

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

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

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

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

← Вернуться к блогу