From 8ee87a4584001738c41981a44a117f2b2ed802b3 Mon Sep 17 00:00:00 2001 From: Evgeniy Gromin Date: Thu, 4 Jul 2024 07:57:18 +0400 Subject: [PATCH] feat(blog): translate content/7.blog/11.v3-4.md (#37) Signed-off-by: Evgeniy Gromin --- content/7.blog/11.v3-4.md | 84 +++++++++++++++++++-------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/content/7.blog/11.v3-4.md b/content/7.blog/11.v3-4.md index b0a793568..062ce3620 100644 --- a/content/7.blog/11.v3-4.md +++ b/content/7.blog/11.v3-4.md @@ -1,6 +1,6 @@ --- title: 'Nuxt 3.4' -description: "Nuxt 3.4.0 is the latest release of Nuxt 3, bringing exciting new features, including support for the View Transitions API, transferring rich JavaScript payloads from server to client - and much more." +description: "Nuxt 3.4.0 — это последняя версия Nuxt 3, предлагающая новые захватывающие функции, включая поддержку View Transitions API, передачу расширенных полезных данных JavaScript с сервера на клиент и многое другое." image: /assets/blog/v3-4.png authors: - name: Дэниел Ро @@ -11,15 +11,15 @@ date: 2023-04-11 category: Релиз --- -## 🪄 View Transitions API Support +## 🪄 Поддержка View Transitions API :video-player{src="https://res.cloudinary.com/nuxt/video/upload/v1681229056/nuxt3/nuxt-view-transitions_cruvma.mp4" poster="https://res.cloudinary.com/nuxt/video/upload/v1681229056/nuxt3/nuxt-view-transitions_cruvma.jpg"} -You can check a demo on https://nuxt-view-transitions.surge.sh and the [source on StackBlitz](https://stackblitz.com/edit/nuxt-view-transitions). +Вы можете ознакомиться с демо-версией на сайте https://nuxt-view-transitions.surge.sh и [исходным кодом на StackBlitz](https://stackblitz.com/edit/nuxt-view-transitions). -You may have noticed that Chromium-based browsers now ship a new web platform API: the [**View Transitions API**](https://developer.chrome.com/docs/web-platform/view-transitions/). This is an exciting new ability for native browser transitions which (among other things) have the ability to transition between unrelated elements on different pages. +Вы могли заметить, что браузеры на базе Chromium теперь поставляют новый API веб-платформы: [**View Transitions API**](https://developer.chrome.com/docs/web-platform/view-transitions/). Это захватывающая новая возможность для собственных переходов браузера, которая (помимо прочего) позволяет осуществлять переходы между несвязанными элементами на разных страницах. -Nuxt now ships with an experimental implementation, which will be under active development during the v3.4 release cycle. See the known issues in the [linked PR](https://github.com/nuxt/nuxt/pull/20092). +Nuxt теперь поставляется с экспериментальной реализацией, которая будет активно разрабатываться в течение цикла выпуска v3.4. См. известные проблемы в [связанном PR](https://github.com/nuxt/nuxt/pull/20092). ```ts export default defineNuxtConfig({ @@ -29,9 +29,9 @@ export default defineNuxtConfig({ }) ``` -## ✨ Payload Enhancements +## ✨ Улучшения полезной нагрузки (payload) -We've merged a **[significant change to how Nuxt handles payloads](https://github.com/nuxt/nuxt/pull/19205)** (under an experimental flag). Payloads are used to send data from the server to the client when doing server-side rendering and avoid double data-fetching during the hydration phase. +Мы слили **[значительное изменение в том, как Nuxt обрабатывает полезные нагрузки](https://github.com/nuxt/nuxt/pull/19205)** (под экспериментальным флагом). Полезные нагрузки используются для отправки данных с сервера клиенту при выполнении рендеринга на стороне сервера и избегания двойной выборки данных во время фазы гидратации. ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -41,13 +41,13 @@ export default defineNuxtConfig({ }) ``` -With this new option enabled, this now means that **various rich JS types are supported out-of-the-box**: regular expressions, dates, Map and Set and BigInt as well as NuxtError - and Vue-specific objects like `ref`, `reactive`, `shallowRef` and `shallowReactive`. +Благодаря включению этой новой опции теперь **прямо из коробки поддерживаются различные расширенные типы JS**: регулярные выражения, даты, Map, Set и BigInt, а также NuxtError и специфичные для Vue объекты, такие как `ref`, `reactive`, `shallowRef` и `shallowReactive`. -You can find [an example](https://github.com/nuxt/nuxt/blob/main/test/fixtures/basic/pages/json-payload.vue) in our test suite. +Вы можете найти [пример](https://github.com/nuxt/nuxt/blob/main/test/fixtures/basic/pages/json-payload.vue) в нашем наборе тестов. -This is all possible due to [Rich-Harris/devalue#58](https://github.com/Rich-Harris/devalue/pull/58). For a long time, Nuxt has been using our own fork of devalue owing to issues serialising Errors and other non-POJO objects, but we now have transitioned back to the original. +Все это стало возможным благодаря [Rich-Harris/devalue#58](https://github.com/Rich-Harris/devalue/pull/58). Долгое время Nuxt использовал нашу собственную ветку devalue из-за проблем с сериализацией Errors и других не-POJO-объектов, но теперь мы вернулись к оригиналу. -You can even register your own custom types with a new object-syntax Nuxt plugin: +Вы даже можете зарегистрировать свои собственные типы с помощью нового плагина объектного синтаксиса Nuxt: ```ts [plugins/custom-payload-type.ts] export default definePayloadPlugin(() => { @@ -56,27 +56,27 @@ export default definePayloadPlugin(() => { }) ``` -You can read more about how this works [here](https://github.com/rich-harris/devalue#custom-types). +Подробнее о том, как это работает, можно прочитать [здесь](https://github.com/rich-harris/devalue#custom-types). -**Note**: this only affects payloads of the Nuxt app, that is, data stored within `useState`, returned from `useAsyncData` or manually injected via `nuxtApp.payload`. It does not affect data fetched from Nitro server routes via `$fetch` or `useFetch` although this is one area I am keen to explore further. +**Примечание**: это влияет только на полезные данные приложения Nuxt, то есть данные, хранящиеся в `useState`, возвращаемые из `useAsyncData` или вручную вводимые через `nuxtApp.payload`. Это не влияет на данные, полученные с маршрутов сервера Nitro через `$fetch` или `useFetch`, хотя это одна из областей, которую я хотел бы исследовать подробнее. -Preliminary testing shows a significant speed-up: **25% faster in total server response time** for a very minimal app with a large JSON payload, but I'd urge you to run your own tests and share the results with us. +Предварительное тестирование показывает значительное ускорение: **на 25% меньше общего времени ответа сервера** для минимального приложения с большой полезной нагрузкой в JSON, но я настоятельно рекомендую вам провести собственные тесты и поделиться с нами результатами. -As mentioned, we're merging this behind a flag so we can test this broadly and gather feedback on the new approach. The most significant potential change is that the payload is now no longer available on `window.__NUXT__` immediately. Instead, we now need to initialise the Nuxt app to parse the payload so any code that accesses `__NUXT__` will need to be run in a plugin or later in the Nuxt app lifecycle. Please feel free to raise an issue if you foresee or encounter issues in your projects. +Как уже упоминалось, мы объединяем это с флагом, чтобы мы могли протестировать это в широком масштабе и собрать отзывы о новом подходе. Наиболее значительным потенциальным изменением является то, что полезная нагрузка теперь больше не доступна в `window.__NUXT__` немедленно. Вместо этого нам теперь нужно инициализировать приложение Nuxt для анализа полезной нагрузки, поэтому любой код, который обращается к `__NUXT__`, должен быть запущен в плагине или позже в жизненном цикле приложения Nuxt. Пожалуйста, не стесняйтесь поднимать вопрос, если вы предвидите или сталкиваетесь с проблемами в своих проектах. -## 🎁 Object-syntax Nuxt plugins +## 🎁 Объектный синтаксис плагинов Nuxt -We now support object-syntax Nuxt plugins for better control over plugin _order_ and easier registration of hooks. +Теперь мы поддерживаем Nuxt-плагины с объектным синтаксисом для лучшего контроля над _порядком_ плагинов и более простой регистрации хуков. ```ts [plugins/my-plugin.ts] export default defineNuxtPlugin({ name: 'my-plugin', - enforce: 'pre', // or 'post' + enforce: 'pre', // или 'post' async setup (nuxtApp) { - // this is the equivalent of a normal functional plugin + // это эквивалент обычного функционального плагина }, hooks: { - // You can directly register Nuxt app hooks here + // Вы можете напрямую зарегистрировать хуки приложения Nuxt здесь 'app:created'() { const nuxtApp = useNuxtApp() // @@ -85,11 +85,11 @@ export default defineNuxtPlugin({ }) ``` -In future we plan to enable build optimizations based on the metadata you pass in your Nuxt plugins. +В будущем мы планируем включить оптимизацию сборки на основе метаданных, которые вы передаете в плагинах Nuxt. -## 🛠️ Easier Devtools Configuration +## 🛠️ Более простая конфигурация Devtools -It's even easier to enable Nuxt DevTools in your project: just set `devtools: true` in your `nuxt.config` file to enable devtools. +Включить Nuxt DevTools в вашем проекте еще проще: просто установите `devtools: true` в файле `nuxt.config`, чтобы включить devtools. ```js [nuxt.config.ts] export default defineNuxtConfig({ @@ -97,40 +97,40 @@ export default defineNuxtConfig({ }) ``` -If it's not already installed, Nuxt will prompt to install it locally. This means you no longer need to have Nuxt DevTools enabled globally. +Если он еще не установлен, Nuxt предложит установить его локально. Это означает, что вам больше не нужно включать Nuxt DevTools глобально. -**Note**: the DevTools is still experimental and under active development, so do be prepared for occasional unexpected behaviour, and please report issues directly to https://github.com/nuxt/devtools 🙏 +**Примечание**: DevTools все еще находится в стадии экспериментальной разработки, поэтому будьте готовы к случайному непредвиденному поведению и, пожалуйста, сообщайте о проблемах напрямую по адресу https://github.com/nuxt/devtools 🙏 -## 📚 Layers Improvements +## 📚 Улучшения слоев -We now support [transforming `~`/`~~`/`@`/`@@` aliases within layers](https://github.com/nuxt/nuxt/pull/19986), meaning you now no longer need to use relative paths when importing within layers. +Теперь мы поддерживаем [преобразование псевдонимов `~`/`~~`/`@`/`@@` внутри слоев](https://github.com/nuxt/nuxt/pull/19986), что означает, что вам больше не нужно использовать относительные пути при импорте внутри слоев. -This should mean it is much easier to use a 'normal' Nuxt project as a [layer](https://nuxt.com/docs/getting-started/layers#layers) without needing to specially write it as one. +Это должно означать, что гораздо проще использовать «обычный» проект Nuxt в качестве [слоя](https://nuxt.com/docs/getting-started/layers#layers) без необходимости специально писать его как таковой. -## 🧸 Better Context Transforms +## 🧸 Улучшение преобразований контекста -We [now transform certain keys](https://github.com/nuxt/nuxt/pull/20182) of `definePageMeta` and `defineNuxtComponent` which means you should have fewer issues with a missing Nuxt instance. This includes support accessing the Nuxt instance after an `await` within `asyncData` and `setup` functions for those still using the Options API. And you no longer need to wrap `middleware` and `validate` with `defineNuxtRouteMiddleware` when using async functions. +Мы [теперь преобразуем определенные ключи](https://github.com/nuxt/nuxt/pull/20182) `definePageMeta` и `defineNuxtComponent`, что означает, что у вас должно быть меньше проблем с отсутствующим экземпляром Nuxt. Это включает поддержку доступа к экземпляру Nuxt после `await` в функциях `asyncData` и `setup` для тех, кто все еще использует Options API. И вам больше не нужно обертывать `middleware` и `validate` с `defineNuxtRouteMiddleware` при использовании асинхронных функций. -## ♻️ Ecosystem Updates +## ♻️ Обновления экосистемы -As usual, this release will pull in upstream improvements, including the new [Consola v3](https://github.com/unjs/consola) and [Nitropack v2.3.3](https://github.com/unjs/nitro) (a new minor is expected shortly). +Как обычно, этот релиз будет включать в себя улучшения основной ветки разработки, включая новые [Consola v3](https://github.com/unjs/consola) и [Nitropack v2.3.3](https://github.com/unjs/nitro) (вскоре ожидается выход новой версии). -## 🚨 'Breaking fixes' +## 🚨 'Исправления ошибок' -We've also taken the opportunity to do some cleanup in this minor release. +Мы также воспользовались возможностью и внесли некоторые исправления в этот небольшой релиз. -1. Previously it was possible to pass the `x-nuxt-no-ssr` header (undocumented) to force SPA rendering. We've now disabled this behaviour by default but you can get it back by setting `experimental.respectNoSSRHeader` to true. Alternatively, you can set `event.context.nuxt.noSSR` on the server to force SPA rendering. -2. We've [removed the (deprecated) `#head` alias](https://github.com/nuxt/nuxt/pull/20111) and also disabled the [polyfill for `@vueuse/head` behaviour](https://github.com/nuxt/nuxt/pull/20131) by default. (It can still be enabled with `experimental.polyfillVueUseHead`.) -3. We've [removed the (deprecated) `experimental.viteNode` option](https://github.com/nuxt/nuxt/pull/20112). It can be configured instead with `vite.devBundler`. -4. We've [deprecated accessing public runtime config without the `public` key](https://github.com/nuxt/nuxt/pull/20082). This was an undocument compatibility measure with Nuxt 2 and we plan to remove it entirely in v3.5. -5. To fix a bug with our vue-router integration, we now generate a slightly different path matching syntax. If you were relying on the exact path generated, have a look at https://github.com/nuxt/nuxt/pull/19902 for more information. +1. Ранее можно было передать заголовок `x-nuxt-no-ssr` (недокументированный) для принудительного рендеринга SPA. Теперь мы отключили это поведение по умолчанию, но вы можете вернуть его, установив `experimental.respectNoSSRHeader` в значение true. В качестве альтернативы вы можете установить `event.context.nuxt.noSSR` на сервере для принудительного рендеринга SPA. +2. Мы [удалили (устаревший) псевдоним `#head`](https://github.com/nuxt/nuxt/pull/20111) и также отключили [полифил для поведения `@vueuse/head`](https://github.com/nuxt/nuxt/pull/20131) по умолчанию. (Его все еще можно включить с помощью `experimental.polyfillVueUseHead`.) +3. Мы [удалили (устаревшую) опцию `experimental.viteNode`](https://github.com/nuxt/nuxt/pull/20112). Вместо этого ее можно настроить с помощью `vite.devBundler`. +4. Мы [пометили deprecated доступ к публичной runtime-конфигурации без ключа `public`](https://github.com/nuxt/nuxt/pull/20082). Это была мера совместимости с Nuxt 2, и мы планируем полностью удалить ее в версии 3.5. +5. Чтобы исправить ошибку с нашей интеграцией vue-router, мы теперь генерируем немного другой синтаксис сопоставления путей. Если вы полагались на точный сгенерированный путь, загляните на страницу https://github.com/nuxt/nuxt/pull/19902 для получения дополнительной информации. -## ✅ Upgrading +## ✅ Обновление -As usual, our recommendation for upgrading is to run: +Как обычно, мы рекомендуем выполнить обновление следующим образом: ```sh npx nuxi upgrade --force ``` -This will refresh your lockfile as well, and ensures that you pull in updates from other dependencies that Nuxt relies on, particularly in the unjs ecosystem. +Это также обновит ваш файл блокировки и обеспечит получение обновлений из других зависимостей, на которые опирается Nuxt, особенно в экосистеме unjs.