Skip to content

Commit

Permalink
feat(blog): translate content/7.blog/20.v3-10.md
Browse files Browse the repository at this point in the history 
Signed-off-by: Evgeniy Gromin <[email protected]>
  • Loading branch information
@JonikUl
JonikUl committed Jul 11, 2024
1 parent abde541 commit 75389f0
Showing 1 changed file with 44 additions and 44 deletions.
88 changes: 44 additions & 44 deletions content/7.blog/20.v3-10.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Nuxt 3.10
description: Nuxt 3.10 is out - packed with features and fixes. Here are a few highlights.
description: Вышел Nuxt 3.10 — наполненный возможностями и исправленями. Вот несколько основных моментов.
navigation: false
image: /assets/blog/v3.10.png
authors:
Expand All @@ -12,13 +12,13 @@ date: 2024-01-30T00:00:00.000Z
category: Релиз
---

v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights.
v3.10 довольно близка к версии 3.9, но в ней много новых функций и исправлений. Вот несколько основных моментов.

### ✨ Experimental shared `asyncData` when prerendering
### ✨ Экспериментальный общий `asyncData` при пререндеринге

When prerendering routes, we can end up refetching the same data over and over again. In Nuxt 2 it was possible to create a 'payload' which could be fetched once and then accessed in every page (and this is of course possible to do manually in Nuxt 3 - see [this article](https://roe.dev/blog/shared-data-nuxt-generate)).
При предварительном рендеринге маршрутов мы можем снова и снова перезагружать одни и те же данные. В Nuxt 2 можно было создать 'payload', который можно было загрузить один раз, а затем использовать на каждой странице (и это, конечно, можно сделать вручную в Nuxt 3 — см. [эту статью](https://roe.dev/blog/shared-data-nuxt-generate)).

With [#24894](https://github.com/nuxt/nuxt/pull/24894), we are now able to do this automatically for you when prerendering your site. Your [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) calls will be deduplicated and cached between renders of your site.
С [#24894](https://github.com/nuxt/nuxt/pull/24894) мы теперь можем делать это автоматически при предварительном рендеринге сайта. Ваши вызовы [`useAsyncData`](/docs/api/composables/use-async-data) и [`useFetch`](/docs/api/composables/use-fetch) будут дедуплицироваться и кэшироваться между рендерами вашего сайта.

```ts [nuxt.config.ts]
export defineNuxtConfig({
Expand All @@ -29,7 +29,7 @@ export defineNuxtConfig({
```

::important
It is particularly important to make sure that any unique key of your data is always resolvable to the same data. For example, if you are using `useAsyncData` to fetch data related to a particular page, you should provide a key that uniquely matches that data. (`useFetch` should do this automatically.)
Особенно важно убедиться, что любой уникальный ключ ваших данных всегда разрешается в те же данные. Например, если вы используете `useAsyncData` для получения данных, относящихся к определенной странице, вы должны предоставить ключ, который уникально соответствует этим данным. (`useFetch` должен делать это автоматически.)
::

::read-more
Expand All @@ -38,9 +38,9 @@ to: /docs/guide/going-further/experimental-features#sharedprerenderdata
---
::

### 🆔 SSR-safe accessible unique ID creation
### 🆔 SSR-безопасное и доступное создание уникального ID

We now ship a `useId` composable for generating SSR-safe unique IDs ([#23368](https://github.com/nuxt/nuxt/pull/23368)). This allows creating more accessible interfaces in your app. For example:
Теперь мы поставляем композабл `useId` для генерации SSR-безопасных уникальных ID ([#23368](https://github.com/nuxt/nuxt/pull/23368)). Это позволяет создавать более доступные интерфейсы в вашем приложении. Например:

```vue [components/MyForm.vue]
<script setup>
Expand Down Expand Up @@ -69,25 +69,25 @@ const passwordId = useId()
::read-more{to="/docs/api/composables/use-id"}
::

### ✍️ Extending `app/router.options`
### ✍️ Расширение `app/router.options`

It's now possible for module authors to inject their own `router.options` files ([#24922](https://github.com/nuxt/nuxt/pull/24922)). The new `pages:routerOptions` hook allows module authors to do things like add custom `scrollBehavior` or add runtime augmenting of routes.
Теперь авторы модулей могут добавлять свои собственные файлы `router.options` ([#24922](https://github.com/nuxt/nuxt/pull/24922)). Новый хук `pages:routerOptions` позволяет авторам модулей выполнять такие действия, как добавление пользовательского `scrollBehavior` или расширение маршрутов во время выполнения.

::read-more{to="/docs/guide/going-further/custom-routing#router-options"}
::

### :icon{name="i-vscode-icons-file-type-node"} Client-side Node.js support
### :icon{name="i-vscode-icons-file-type-node"} Клиентская поддержка Node.js

We now support (experimentally) polyfilling key Node.js built-ins ([#25028](https://github.com/nuxt/nuxt/pull/25028)), just as we already do via Nitro on the server when deploying to non-Node environments.
Теперь мы поддерживаем (экспериментально) полифиллинг ключевых встроенных модулей Node.js ([#25028](https://github.com/nuxt/nuxt/pull/25028)), так же, как мы уже делаем это в Nitro на сервере при развертывании в средах, отличных от Node.

That means that, within your client-side code, you can import directly from Node built-ins (`node:` and node imports are supported). However, nothing is globally injected for you, to avoid increasing your bundle size unnecessarily. You can either import them where needed.
Это означает, что в вашем клиентском коде вы можете выполнять импорт непосредственно из встроенных модулей Node (поддерживаются `node:` и node-импорт). Однако для вас ничего не внедряется глобально, чтобы избежать ненужного увеличения размера пакета. Вы можете сделать импорты по мере необходимости.

```ts [some-file.ts]
import { Buffer } from 'node:buffer'
import process from 'node:process'
```

Or provide your own polyfill, for example, inside a Nuxt plugin.
Или предоставьте свой собственный polyfill, например, внутри плагина Nuxt.

```ts [plugins/node.client.ts]
import { Buffer } from 'node:buffer'
Expand All @@ -99,44 +99,44 @@ globalThis.process = process
export default defineNuxtPlugin({})
```

This should make life easier for users who are working with libraries without proper browser support. However, because of the risk in increasing your bundle unnecessarily, we would strongly urge users **to choose other alternatives** if at all possible.
Это должно облегчить жизнь пользователям, которые работают с библиотеками без надлежащей поддержки браузера. Однако из-за риска ненужного увеличения вашего пакета мы настоятельно рекомендуем пользователям **выбирать другие альтернативы**, если это вообще возможно.

### 🍪 Better cookie reactivity
### 🍪 Лучшая реактивность файлов cookie

We now allow you to opt-in to using the [CookieStore](https://developer.mozilla.org/en-US/docs/Web/API/CookieStore). If browser support is present, this will then be used instead of a BroadcastChannel to update `useCookie` values reactively when the cookies are updated ([#25198](https://github.com/nuxt/nuxt/pull/25198)).
Теперь мы разрешаем вам выбрать использование [CookieStore](https://developer.mozilla.org/en-US/docs/Web/API/CookieStore). Если есть поддержка браузера, то он будет использоваться вместо BroadcastChannel для реактивного обновления значений `useCookie` при обновлении файлов cookie ([#25198](https://github.com/nuxt/nuxt/pull/25198)).

This also comes paired with a new composable, `refreshCookie` which allows manually refreshing cookie values, such as after performing a request.
Это также идет в паре с новым композаблом `refreshCookie`, который позволяет вручную обновлять значения cookie-файлов, например, после выполнения запроса.

::read-more{to="/docs/api/utils/refresh-cookie"}
::

### 🏥 Detecting anti-patterns
### 🏥 Обнаружение анти-паттернов

In this release, we've also shipped a range of features to detect potential bugs and performance problems.
В этом релизе мы также добавили ряд функций для обнаружения потенциальных ошибок и проблем с производительностью.

- We now will throw an error if `setInterval` is used on server ([#25259](https://github.com/nuxt/nuxt/pull/25259)).
- We warn (in development only) if data fetch composables are used wrongly ([#25071](https://github.com/nuxt/nuxt/pull/25071)), such as outside of a plugin or setup context.
- We warn (in development only) if you are not using `<NuxtPage />` but have the `vue-router` integration enabled ([#25490](https://github.com/nuxt/nuxt/pull/25490)). (`<RouterView />` should not be used on its own.)
- Теперь мы выдадим ошибку, если на сервере используется `setInterval` ([#25259](https://github.com/nuxt/nuxt/pull/25259)).
- Мы предупредим (только в режиме разработки), если композаблы используются неправильно ([#25071](https://github.com/nuxt/nuxt/pull/25071)), например, вне контекста плагина или настройки.
- Мы предупредим (только в режиме разработки), если вы не используете `<NuxtPage />`, но у вас включена интеграция `vue-router` ([#25490](https://github.com/nuxt/nuxt/pull/25490)). (`<RouterView />` не следует использовать отдельно.)

### 🧂 Granular view transitions support
### 🧂 Поддержка детальных переходов между представлениями

It's now possible to control view transitions support on a per-page basis, using `definePageMeta` ([#25264](https://github.com/nuxt/nuxt/pull/25264)).
Теперь можно управлять поддержкой переходов представлений на каждой странице с помощью `definePageMeta` ([#25264](https://github.com/nuxt/nuxt/pull/25264)).

You need to have experimental view transitions support enabled first:
Сначала вам необходимо включить экспериментальную поддержку переходов между представлениями:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
viewTransition: true
},
app: {
// you can disable them globally if necessary (they are enabled by default)
// При необходимости вы можете отключить их глобально (по умолчанию они включены)
viewTransition: false
}
})
```

And you can opt in/out granularly:
И вы можете точечно их включить/выключить:

```vue [pages/index.vue]
<script setup lang="ts">
Expand All @@ -146,11 +146,11 @@ definePageMeta({
</script>
```

Finally, Nuxt will not apply View Transitions if the user's browser matches `prefers-reduced-motion: reduce` ([#22292](https://github.com/nuxt/nuxt/pull/22292)). You can set `viewTransition: 'always'`; it will then be up to you to respect the user's preference.
Наконец, Nuxt не будет применять View Transitions, если браузер пользователя соответствует `prefers-reduced-motion: reduce` ([#22292](https://github.com/nuxt/nuxt/pull/22292)). Вы можете установить `viewTransition: 'always'`; тогда вам придется учитывать предпочтения пользователя.

### 🏗️ Build-time route metadata
### 🏗️ Метаданные маршрута во время сборки

It's now possible to access routing metadata defined in `definePageMeta` at build-time, allowing modules and hooks to modify and change these values ([#25210](https://github.com/nuxt/nuxt/pull/25210)).
Теперь можно получить доступ к метаданным маршрутизации, определенным в `definePageMeta` во время сборки, что позволяет модулям и хукам изменять и модифицировать эти значения ([#25210](https://github.com/nuxt/nuxt/pull/25210)).

```ts [nuxt.config.ts]
export default defineNuxtConfig({
Expand All @@ -160,17 +160,17 @@ export default defineNuxtConfig({
})
```

Please, experiment with this and let us know how it works for you. We hope to improve performance and enable this by default in a future release so modules like `@nuxtjs/i18n` and others can provide a deeper integration with routing options set in `definePageMeta`.
Пожалуйста, поэкспериментируйте с этим и дайте нам знать, как это работает у вас. Мы надеемся улучшить производительность и включить это по умолчанию в будущем релизе, чтобы модули, такие как `@nuxtjs/i18n` и другие, могли обеспечить более глубокую интеграцию с параметрами маршрутизации, установленными в `definePageMeta`.

### 📦 Bundler module resolution
### 📦 Разрешение модулей Bundler

With [#24837](https://github.com/nuxt/nuxt/pull/24837), we are now opting in to the TypeScript `bundler` resolution which should more closely resemble the actual way that we resolve subpath imports for modules in Nuxt projects.
С [#24837](https://github.com/nuxt/nuxt/pull/24837) мы теперь выбираем тип разрешения `bundler` в TypeScript, которое должно больше походить на реальный способ, которым мы разрешаем импорт вложенных путей для модулей в проектах Nuxt.

'Bundler' module resolution is [recommended by Vue](https://github.com/vuejs/tsconfig/blob/mainz/tsconfig.json#L24-L26) and [by Vite](https://vitejs.dev/guide/performance.html#reduce-resolve-operations), but unfortunately there are still many packages that do not have the correct entries in their `package.json`.
Разрешение модуля 'Bundler' [рекомендуется Vue](https://github.com/vuejs/tsconfig/blob/mainz/tsconfig.json#L24-L26) и [Vite](https://vitejs.dev/guide/performance.html#reduce-resolve-operations), но, к сожалению, все еще есть много пакетов, в которых нет правильных записей в их `package.json`.

As part of this, we opened 85 PRs across the ecosystem to test switching the default, and identified and fixed some issues.
В рамках этой работы мы открыли 85 PR-запросов по всей экосистеме для тестирования переключения по умолчанию, а также выявили и устранили некоторые проблемы.

If you need to switch off this behaviour, you can do so. However, please consider raising an issue (feel free to tag me in it) in the library or module's repo so it can be resolved at source.
Если вам нужно отключить это поведение, вы можете это сделать. Однако, пожалуйста, рассмотрите возможность поднять вопрос (не стесняйтесь отмечать меня в нем) в репозитории библиотеки или модуля, чтобы его можно было решить в исходном коде.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
Expand All @@ -180,17 +180,17 @@ export default defineNuxtConfig({
})
```

## ✅ 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.
Это также обновит ваш lockfile и обеспечит получение обновлений из других зависимостей, на которые опирается Nuxt, особенно в экосистеме unjs.

## Full Release Notes
## Полный список изменений

::read-more
---
Expand All @@ -199,9 +199,9 @@ color: gray
icon: i-simple-icons-github
target: _blank
---
Read the full release notes of Nuxt `v3.10.0`.
Читайте полное описание релиза Nuxt `v3.10.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 ✨**
**Счастливого Накстинга ✨**

0 comments on commit 75389f0

Please sign in to comment.