diff --git a/content/7.blog/22.v3-11.md b/content/7.blog/22.v3-11.md index a0ca30527..773eb750c 100644 --- a/content/7.blog/22.v3-11.md +++ b/content/7.blog/22.v3-11.md @@ -1,6 +1,6 @@ --- title: Nuxt 3.11 -description: Nuxt 3.11 is out - with better logging, preview mode, server pages and much more! +description: Вышел Nuxt 3.11 — с улучшенным логированием, режимом предварительного просмотра, серверными страницами и многим другим! navigation: false image: /assets/blog/v3.11.png authors: @@ -12,80 +12,80 @@ date: 2024-03-16T10:00:00.000Z category: Релиз --- -This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨ +Это, возможно, последний минорный релиз перед Nuxt v4, поэтому мы наполнили его множеством функций и улучшений, которые, как мы надеемся, вас порадуют! ✨ -## 🪵 Better logging +## 🪵 Улучшенное логирование -When developing a Nuxt application and using `console.log` in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as it makes it difficult to debug your application. This is now a thing of the past! +При разработке приложения Nuxt и использовании `console.log` в приложении вы могли заметить, что эти логи не отображаются в консоли браузера при обновлении страницы (во время рендеринга на стороне сервера). Это может раздражать, так как затрудняет отладку. Теперь это в прошлом! -Now, when you have server logs associated with a request, they will be bundled up and passed to the client and displayed in your browser console. [Asynchronous context](https://nodejs.org/docs/latest-v20.x/api/async_context.html) is used to track and associate these logs with the request that triggered them. ([#25936](https://github.com/nuxt/nuxt/pull/25936)). +Теперь, когда у вас есть логи сервера, связанные с запросом, они будут объединены, переданы клиенту и отображены в консоли браузера. [Асинхронный контекст](https://nodejs.org/docs/latest-v20.x/api/async_context.html) используется для отслеживания и связывания этих логов с запросом, который их вызвал. ([#25936](https://github.com/nuxt/nuxt/pull/25936)). -For example, this code: +Например, этот код: ```vue [pages/index.vue] ``` -will now log to your browser console when you refresh the page: +теперь будет выходить в консоль браузера при обновлении страницы: ```bash -Log from index page -[ssr] Log inside useAsyncData +Лог с индексной страницы +[ssr] Лог внутри useAsyncData at pages/index.vue ``` -👉 We also plan to support streaming of subsequent logs to the Nuxt DevTools in future. +👉 В будущем мы также планируем поддерживать стриминг последующих логов в Nuxt DevTools. -We've also added a `dev:ssr-logs` hook (both in Nuxt and Nitro) which is called on server and client, allowing you to handle them yourself if you want to. +Мы также добавили хук `dev:ssr-logs` (как в Nuxt, так и в Nitro), который вызывается на сервере и клиенте, что позволяет вам обрабатывать их самостоятельно, если вы этого хотите. -If you encounter any issues with this, it is possible to disable them - or prevent them from logging to your browser console. +Если у вас возникнут какие-либо проблемы, их можно отключить или запретить им регистрироваться в консоли браузера. ```ts [nuxt.config.ts] export default defineNuxtConfig({ features: { devLogs: false - // or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook + // или 'silent', чтобы позволить вам обработать их самостоятельно с помощью хука `dev:ssr-logs` }, }) ``` -## 🎨 Preview mode +## 🎨 Режим предварительного просмотра -A new `usePreviewMode` composable aims to make it simple to use preview mode in your Nuxt app. +Новый композабл `usePreviewMode` призван упростить использование режима предварительного просмотра в приложении Nuxt. ```ts [plugins/test.client.ts] const { enabled, state } = usePreviewMode() ``` -When preview mode is enabled, all your data fetching composables, like `useAsyncData` and `useFetch` will rerun, meaning any cached data in the payload will be bypassed. +При включении режима предварительного просмотра все композаблы получения данных, такие как `useAsyncData` и `useFetch`, будут запущены повторно, что означает, что все кэшированные данные в payload будут пропущены. ::read-more{to="/docs/api/composables/use-preview-mode"} :: -## 💰 Cache-busting payloads +## 💰 Payload с очисткой кэша -We now automatically cache-bust your payloads if you haven't disabled Nuxt's app manifest, meaning you shouldn't be stuck with outdated data after a deployment ([#26068](https://github.com/nuxt/nuxt/pull/26068)). +Теперь мы автоматически очищаем кэш ваших полезных данных, если вы не отключили манифест приложения Nuxt, а это значит, что вы не застрянете с устаревшими данными после развертывания ([#26068](https://github.com/nuxt/nuxt/pull/26068)). ## 👮‍♂️ Middleware `routeRules` -It's now possible to define middleware for page paths within the Vue app part of your application (that is, not your Nitro routes) ([#25841](https://github.com/nuxt/nuxt/pull/25841)). +Теперь можно определить middleware для роутов в части приложения Vue (то есть не в маршрутах Nitro) ([#25841](https://github.com/nuxt/nuxt/pull/25841)). ```ts [nuxt.config.ts] export default defineNuxtConfig({ routeRules: { '/admin/**': { - // or appMiddleware: 'auth' + // или appMiddleware: 'auth' appMiddleware: ['auth'] }, '/admin/login': { - // You can 'turn off' middleware that would otherwise run for a page + // Вы можете «отключить» middleware, которая в противном случае была бы запущена для страницы appMiddleware: { auth: false } @@ -97,9 +97,9 @@ export default defineNuxtConfig({ ::read-more{to="/docs/guide/concepts/rendering#route-rules"} :: -## ⌫ New `clear` data fetching utility +## ⌫ Новая утилита для `очистки` полученных данных -Now, `useAsyncData` and `useFetch` expose a `clear` utility. This is a function that can be used to set `data` to undefined, set `error` to `null`, set `pending` to `false`, set `status` to `idle`, and mark any currently pending requests as cancelled. ([#26259](https://github.com/nuxt/nuxt/pull/26259)) +Теперь `useAsyncData` и `useFetch` предоставляют утилиту `clear`. Это функция, которую можно использовать для установки `data` в значение undefined, установки `error` в значение `null`, установки `pending` в значение `false`, установки `status` в значение `idle` и пометки любых ожидающих в данный момент запросов как отмененных. ([#26259](https://github.com/nuxt/nuxt/pull/26259)) ```vue