diff --git a/content/7.blog/17.v3-8.md b/content/7.blog/17.v3-8.md index 5eeef48da..2e758be79 100644 --- a/content/7.blog/17.v3-8.md +++ b/content/7.blog/17.v3-8.md @@ -1,6 +1,6 @@ --- title: 'Nuxt 3.8' -description: "Nuxt 3.8 is out, bringing built-in DevTools, automatic Nuxt Image install, a new app manifest and much more." +description: "Вышел Nuxt 3.8, в который вошли встроенные инструменты разработчика, автоматическая установка Nuxt Images, новый манифест приложения и многое другое." navigation: false image: /assets/blog/v3.8.png authors: @@ -12,35 +12,35 @@ date: 2023-10-19 category: Релиз --- -### 💻 CLI Improvements +### 💻 Улучшения CLI -Just to remind you, we're now using [the new Nuxt CLI](https://github.com/nuxt/cli) which is now versioned separately. +Напоминаем, что теперь мы используем [новый Nuxt CLI](https://github.com/nuxt/cli), который теперь имеет отдельную версию. ::tip -You can now install a module with `nuxi module add ` +Теперь вы можете установить модуль с помощью `nuxi module add ` :: ::note{icon="i-ph-rocket-launch-duotone"} -We now share the same port with the Vite websocket, meaning better support for docker containers in development. +Теперь мы используем тот же порт, что и Vite WebSocket, что обеспечивает лучшую поддержку Docker-контейнеров при разработке. :: ::read-more{to="https://github.com/nuxt/cli/releases/tag/v3.9.0" icon="i-simple-icons-github" color="gray" target="_blank"} -Read the Nuxt CLI `v3.9.0` release notes. +Читайте описание релиза Nuxt CLI `v3.9.0`. :: -### ✨ Built-in Nuxt DevTools +### ✨ Встроенные инструменты разработчика Nuxt -Nuxt DevTools v1.0.0 is out and we now think it's ready to be shipped as a direct dependency of Nuxt. +Вышел Nuxt DevTools v1.0.0, и теперь мы считаем, что он готов к выпуску в качестве прямой зависимости Nuxt. ::read-more{to="/blog/nuxt-devtools-v1-0" icon="i-simple-icons-github" color="gray"} -Check out Nuxt DevTools v1.0 announcement. +Ознакомьтесь с анонсом Nuxt DevTools v1.0. :: -### 📸 Nuxt Image Auto-install +### 📸 Автоматическая установка Nuxt Image -[``](/docs/api/components/nuxt-img) and [``](/docs/api/components/nuxt-picture) first-class built-in components. +[``](/docs/api/components/nuxt-img) и [``](/docs/api/components/nuxt-picture) - встроенные компоненты первого класса. -We now auto-installing `@nuxt/image` the first time that they are used ([#23717](https://github.com/nuxt/nuxt/pull/23717)). +Теперь мы автоматически устанавливаем `@nuxt/image` при первом использовании ([#23717](https://github.com/nuxt/nuxt/pull/23717)). ::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1697721767/nuxt3/nuxt-image-auto-install_uqkptq.jpg" controls class="rounded dark:border dark:border-gray-700"} :source{src="https://res.cloudinary.com/nuxt/video/upload/v1697721767/nuxt3/nuxt-image-auto-install_uqkptq.webm" type="video/webm"} @@ -49,34 +49,34 @@ We now auto-installing `@nuxt/image` the first time that they are used ([#23717] :: ::tip -We advise using [`@nuxt/image`](https://image.nuxt.com) if you're using images in your site; it can apply optimisations to make your site more performant. +Мы советуем использовать пакет [`@nuxt/image`](https://image.nuxt.com), если вы используете изображения на своем сайте; он может применить оптимизацию, чтобы сделать ваш сайт более производительным. :: -### 📂 Deeper Layout Scanning +### 📂 Более глубокое сканирование лейаутов ::caution -This is a behaviour change so do take care with this one. +Это изменение поведения, поэтому будьте с ним осторожны. :: -We now support scanning layouts within subfolders in [`~/layouts`](/docs/guide/directory-structure/layouts) in the same way as we do with [`~/components`](/docs/guide/directory-structure/components). +Теперь мы поддерживаем сканирование лейаутов внутри поддиректорий в [`~/layouts`](/docs/guide/directory-structure/layouts) так же, как и в [`~/components`](/docs/guide/directory-structure/components). -File | Layout name +Файл | Название лейаута -- | -- ~/layouts/desktop/default.vue | 'desktop-default' ~/layouts/desktop-base/base.vue | 'desktop-base' ~/layouts/desktop/index.vue | 'desktop' ::read-more{to="/docs/guide/directory-structure/layouts#named-layout"} -Read more about **Named Layouts**. +Узнайте больше об **Именованных лейаутах**. :: -### 📊 App Manifest +### 📊 Манифест приложения -We now support a built-in app manifest (see [PR #21641](https://github.com/nuxt/nuxt/pull/21641)), which generates a manifest at `/_nuxt/builds/meta/.json`. +Теперь мы поддерживаем встроенный манифест приложения (см. [PR #21641](https://github.com/nuxt/nuxt/pull/21641)), который генерирует манифест в `/_nuxt/builds/meta/.json`. -It enables loading payloads **only for prerendered routes**, if a site is generated with `nuxt generate`, preventing 404s in the console. +Позволяет загружать полезные данные **только для предварительно отрендеренных маршрутов**, если сайт создан с помощью `nuxt generate`, предотвращая появление ошибок 404 в консоли. -It also enables **client-side route rules**. Only `redirect` route rules is supported for now; they will now redirect when performing client-side navigation. +Он также включает **правила маршрутизации на клиенте**. На данный момент поддерживаются только правила маршрутизации `redirect`; теперь они будут перенаправлять при выполнении навигации на клиенте. ::code-group ```ts [nuxt.config.ts] @@ -89,7 +89,7 @@ export default defineNuxtConfig({ ```vue [pages/index.vue] @@ -97,28 +97,28 @@ export default defineNuxtConfig({ :: ::tip{icon="i-ph-rocket-launch"} -The app manifest also enables future enhancements including detection of a new deployment by checking `/_nuxt/builds/latest.json`. +Манифест приложения также позволяет вносить будущие улучшения, включая обнаружение нового деплоя путем проверки `/_nuxt/builds/latest.json`. :: ::note -You can **opt-on from this behaviour if you need to** by setting `experimental.appManifest` to `false` in your `nuxt.config` file. +Вы можете **отключить это поведение, если это необходимо**, установив `experimental.appManifest` в `false` в файле `nuxt.config`. :: -### 🤝 Scope and Context Improvements +### 🤝 Улучшения области действия и контекста -We now define a 'scope' for Nuxt composables executed in plugins ([#23667](https://github.com/nuxt/nuxt/pull/23667)), which allows running synchronous cleanup before navigating away from your site, using the Vue [`onScopeDispose`](https://ru.vuejs.org/api/reactivity-advanced.html#onscopedispose) lifecycle method. +Теперь мы определяем 'область действия' для композаблов Nuxt, выполняемых в плагинах ([#23667](https://github.com/nuxt/nuxt/pull/23667)), что позволяет запускать синхронную очистку перед уходом с сайта, используя метод жизненного цикла Vue [`onScopeDispose`](https://ru.vuejs.org/api/reactivity-advanced.html#onscopedispose). ::note -This should fix an edge case with cookies ([#23697](https://github.com/nuxt/nuxt/pull/23697)) and also improves memory management such as Pinia stores ([#23650](https://github.com/nuxt/nuxt/issues/23650)). +Это должно исправить пограничный случай с файлами cookie ([#23697](https://github.com/nuxt/nuxt/pull/23697)), а также улучшить управление памятью, например, сторами Pinia ([#23650](https://github.com/nuxt/nuxt/issues/23650)). :: ::read-more{to="https://ru.vuejs.org/api/reactivity-advanced.html#effectscope" icon="i-simple-icons-vuedotjs" target="_blank"} -Read more about Vue effect scopes. +Узнайте больше об области действия эффектов Vue. :: -We also now support [**native async context**](https://nodejs.org/api/async_context.html) for the _Vue composition API_ ([#23526](https://github.com/nuxt/nuxt/pull/23526)). In case you're unaware, we support native async context on Node and Bun, enabled with [`experimental.asyncContext`](/docs/guide/going-further/experimental-features#asynccontext). +Теперь мы также поддерживаем [**собственный асинхронный контекст**](https://nodejs.org/api/async_context.html) для _Vue composition API_ ([#23526](https://github.com/nuxt/nuxt/pull/23526)). Если вы не в курсе, мы поддерживаем собственный асинхронный контекст в Node и Bun, включенный с помощью [`experimental.asyncContext`](/docs/guide/going-further/experimental-features#asynccontext). -If you experience issues with `Nuxt instance unavailable`, enabling this option may solve your issues: +Если у вас возникли проблемы с `Nuxt instance unavailable`, включение этой опции может решить их: ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -129,16 +129,17 @@ export default defineNuxtConfig({ ``` ::note -Once we have cross-runtime support, we will enable it by default. +Как только у нас появится поддержка кросс-рантайма, мы включим ее по умолчанию. :: -### 🔗 NuxtLink Defaults +### 🔗 Настройки NuxtLink по умолчанию -You can define your own [``](/docs/api/components/nuxt-link) components with the [`defineNuxtLink`](/docs/api/components/nuxt-link#definenuxtlink-signature) utility. +Вы можете определить собственные компоненты [``](/docs/api/components/nuxt-link) с помощью утилиты [`defineNuxtLink`](/docs/api/components/nuxt-link#definenuxtlink-signature). -Today, you can cutomize the options for the built-in [``](/docs/api/components/nuxt-link), directly in your `nuxt.config` file ([#23724](https://github.com/nuxt/nuxt/pull/23724)). +Сегодня вы можете настраивать параметры встроенного [``](/docs/api/components/nuxt-link) непосредственно в файле `nuxt.config` ([#23724](https://github.com/nuxt/nuxt/pull/23724)). + +Например, это позволит вам принудительно применять завершающий слеш на всем сайте: -This can enable you to enforce trailing slash behaviour across your entire site, for example: ```ts [nuxt.config.ts] export default defineNuxtConfig({ experimental: { @@ -152,28 +153,28 @@ export default defineNuxtConfig({ }) ``` -### ⚡️ Data Fetching Improvements +### ⚡️ Улучшения получения данных -We have two very significant new features for [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch): +У нас есть две очень важные новые функции для [`useAsyncData`](/docs/api/composables/use-async-data) и [`useFetch`](/docs/api/composables/use-fetch): -1. You can now set `deep: false` to prevent deep reactivity on the `data` object returned from these composables ([#23600](https://github.com/nuxt/nuxt/pull/23600)). It should be a performance improvement if you are returning large arrays or objects. The object will still update when refetched; it just won't trigger reactive effects if you change a property deep within the `data`. -2. You can now use the `getCachedData` option to handle custom caching for these composables ([#20747](https://github.com/nuxt/nuxt/pull/20747)) +1. Теперь вы можете установить `deep: false`, чтобы предотвратить глубокую реактивность в объекте `data`, возвращаемом из этих композаблов ([#23600](https://github.com/nuxt/nuxt/pull/23600)). Это должно улучшить производительность, если вы возвращаете большие массивы или объекты. Объект все равно будет обновляться при повторной выборке; он просто не будет вызывать реактивные эффекты, если вы измените свойство глубоко внутри `data`. +2. Теперь вы можете использовать опцию `getCachedData` для управления пользовательским кэшированием для этих композаблов ([#20747](https://github.com/nuxt/nuxt/pull/20747)) ```vue [pages/index.vue] ``` ::tip{to="https://www.youtube.com/watch?v=aQPR0xn-MMk" icon="i-logos-youtube-icon" target="_blank"} -Watch the video from Alexander Lichter about **Client-side caching with getCachedData**. +Посмотрите видео от Александра Лихтера о **кэшировании на клиенте с помощью getCachedData**. :: -We also support configuring some default values for these composables in an app-wide way ([#23725](https://github.com/nuxt/nuxt/pull/20747)): +Мы также поддерживаем настройку некоторых значений по умолчанию для этих композаблов на уровне всего приложения ([#23725](https://github.com/nuxt/nuxt/pull/20747)): ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -193,51 +194,51 @@ export default defineNuxtConfig({ }) ``` -### 🔢 Layer Improvements +### 🔢 Улучшения слоев -We now more carefully load layer plugins ([#22889](https://github.com/nuxt/nuxt/pull/22889) and [#23148](https://github.com/nuxt/nuxt/pull/23148)) and middleware ([#22925](https://github.com/nuxt/nuxt/pull/22925) and [#23552](https://github.com/nuxt/nuxt/pull/23552)) in the order of the layers, always loading your own plugins and middleware last. This should mean you can rely on utilities that layers may inject. +Теперь мы более осторожно загружаем плагины слоев ([#22889](https://github.com/nuxt/nuxt/pull/22889) и [#23148](https://github.com/nuxt/nuxt/pull/23148)) и middleware ([#22925](https://github.com/nuxt/nuxt/pull/22925) и [#23552](https://github.com/nuxt/nuxt/pull/23552)) в порядке слоев, всегда загружая ваши собственные плагины и middleware в последнюю очередь. Это должно означать, что вы можете положиться на утилиты, которые могут внедрять слои. -And probably one of the most significant changes - if you are using remote layers we now clone these within your [`node_modules/`](/docs/guide/directory-structure/node_modules) folder ([#109](https://github.com/unjs/c12/pull/109)) so layers can use dependencies with your project. See [`c12` release notes](https://github.com/unjs/c12/releases/tag/v1.5.1) for full details. +И, возможно, одно из самых значительных изменений — если вы используете удаленные слои, мы теперь клонируем их в директорию [`node_modules/`](/docs/guide/directory-structure/node_modules) ([#109](https://github.com/unjs/c12/pull/109)), чтобы слои могли использовать зависимости вашего проекта. Подробности см. в [описании релиза `c12`](https://github.com/unjs/c12/releases/tag/v1.5.1). ::tip{icon="i-ph-check-circle-duotone"} -We've also added a test suite to cover these layer resolution changes. +Мы также добавили набор тестов для проверки изменений разрешения слоев. :: -### 😴 Nightly Release Channel +### 😴 Канал ночных релизов -Every commit to the `main` branch of Nuxt is automatically deployed to a new release, for easier testing before releases. We've renamed this from the 'edge release channel' to the 'nightly release channel' to avoid confusion with _edge deployments_. And probably also with Microsoft Edge (though I haven't heard that anyone was confused with that one!) +Каждый коммит в `main` ветку Nuxt автоматически развертывается в новый релиз для более легкого тестирования перед релизами. Мы переименовали это из 'edge release channel' в 'nightly release channel', чтобы избежать путаницы с _edge deployments_. И, вероятно, также с Microsoft Edge (хотя я не слышал, чтобы кто-то путал его с ним!) -- `nuxt3` is now `nuxt-nightly` -- `nuxi-edge` is now `nuxi-nightly` -- `@​nuxt/kit-edge` is now `@​nuxt/kit-nightly` -- ... and so on. +- `nuxt3` теперь `nuxt-nightly` +- `nuxi-edge` теперь `nuxi-nightly` +- `@​nuxt/kit-edge` теперь `@​nuxt/kit-nightly` +- ... и так далее. ::read-more{to="/docs/guide/going-further/nightly-release-channel#nightly-release-channel"} -Read more about the **Nighly Release Channel**. +Узнайте больше о **Канале ночных релизов**. :: ### ⚗️ Nitro v2.7 -Nitro v2.7 has been released with lots of improvements and bug fixes. +Вышла версия Nitro v2.7 с множеством улучшений и исправлений ошибок. ::tip{icon="i-ph-rocket-launch-duotone"} -🔥 One of the most significant is that we now save **40% of bundle size in production** by using native `fetch` supported in Node 18+ ([#1724](https://github.com/unjs/nitro/pull/1724)). So if possible, we'd recommend you update your Node version to at least 18. +🔥 Одно из самых важных заключается в том, что теперь мы экономим **40% размера бандла в продакшене**, используя собственный `fetch`, поддерживаемый в Node 18+ ([#1724](https://github.com/unjs/nitro/pull/1724)). Поэтому, если возможно, мы рекомендуем вам обновить версию Node как минимум до 18. :: ::read-more{to="https://github.com/unjs/nitro/releases/tag/v2.7.0" icon="i-simple-icons-github" color="gray" target="_blank"} -Check out Nitro v2.7 release note. +Ознакомьтесь с описанием релиза Nitro v2.7. :: -### 💪 Type Import Changes +### 💪 Изменения импорта типов ::warning -This is likely to need code changes in your project. +Вероятно, это потребует внесения изменений в код вашего проекта. :: -Vue requires that type imports be explicit (so that the Vue compiler can correctly optimise and resolve type imports for props and so on). See [core Vue `tsconfig.json`](https://github.com/vuejs/tsconfig/blob/main/tsconfig.json#L30-L33). +Vue требует, чтобы импорт типов был явным (чтобы компилятор Vue мог правильно оптимизировать и разрешать импорт типов для свойств и т.д.). См. [core Vue `tsconfig.json`](https://github.com/vuejs/tsconfig/blob/main/tsconfig.json#L30-L33). -We've therefore taken the decision to turn on `verbatimModuleSyntax` by default in Nuxt projects, which will throw a type error if types are imported without an explicit `type` import. To resolve it you will need to update your imports: +Поэтому мы приняли решение включить `verbatimModuleSyntax` по умолчанию в проектах Nuxt, что приведет к ошибке типа, если типы импортируются без явного импорта `type`. Чтобы решить эту проблему, вам нужно будет обновить ваши импорты: ```diff - import { someFunction, SomeOptions } from 'some-library' @@ -245,9 +246,9 @@ We've therefore taken the decision to turn on `verbatimModuleSyntax` by default + import type { SomeOptions } from 'some-library' ``` -You may also encounter modules in the Nuxt ecosystem that need to be updated; please open an issue for those modules. I'm also very happy to help if you're encountering any problems with this, if you're a module author. Just tag me and I'll take a look. +Вы также можете столкнуться с модулями в экосистеме Nuxt, которые необходимо обновить; пожалуйста, создайте issue для этих модулей. Если вы автор модуля, то я также буду рад помочь, если у вас возникнут с этим какие-либо проблемы. Просто отметьте меня, и я посмотрю. -If for whatever reason you need to undo this change in your project you can set the following configuration: +Если по какой-либо причине вам нужно отменить это изменение в вашем проекте, вы можете установить следующую конфигурацию: ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -261,23 +262,23 @@ export default defineNuxtConfig({ }) ``` -However, we'd recommend only doing that temporarily, as Vue does need this option to be set for best results. +Однако мы рекомендуем делать это только временно, поскольку Vue необходимо, чтобы эта опция была установлена ​​для достижения наилучших результатов. -## ✅ Upgrading +## ✅ Обновление -As usual, our recommendation for upgrading is to run: +Как обычно, мы рекомендуем выполнить обновление следующим образом: ```sh npx nuxi upgrade ``` -## Full Release Notes +## Полный список изменений ::read-more{to="https://github.com/nuxt/nuxt/releases/tag/v3.8.0" icon="i-simple-icons-github" color="gray"} -Read the full release notes of Nuxt `v3.8.0`. +Читайте полное описание релиза Nuxt `v3.8.0`. :: -Thank you for reading this far! We hope you enjoy the new release. Please do let us know if you have any feedback or issues. +Спасибо, что дочитали до этого места! Надеемся, вам понравится новый релиз. Пожалуйста, дайте нам знать, если у вас есть какие-либо отзывы или проблемы. -**Happy Nuxting ✨** +**Счастливого Накстинга ✨**