Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(docs): Актуализация документации в 9b6542 #313

Merged
merged 1 commit into from
Dec 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions docs/1.getting-started/12.upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -237,36 +237,36 @@ export default defineNuxtConfig({
})
```

#### New DOM Location for SPA Loading Screen
#### Новое местоположение DOM для экрана загрузки SPA

🚦 **Impact Level**: Minimal
🚦 **Уровень воздействия**: Минимальный

##### What Changed
##### Что изменилось

When rendering a client-only page (with `ssr: false`), we optionally render a loading screen (from `app/spa-loading-template.html`), within the Nuxt app root:
При рендеринге страницы, предназначенной только для клиента (с `ssr: false`), мы опционально ренденрим экран загрузки (из `app/spa-loading-template.html`) в корне приложения Nuxt:

```html
<div id="__nuxt">
<!-- spa loading template -->
<!-- шаблон загрузки spa -->
</div>
```

Now, we default to rendering the template alongside the Nuxt app root:
Теперь мы по умолчанию рендерим шаблон рядом с корнем приложения Nuxt:

```html
<div id="__nuxt"></div>
<!-- spa loading template -->
<!-- шаблон загрузки spa -->
```

##### Reasons for Change
##### Причины для изменений

This allows the spa loading template to remain in the DOM until the Vue app suspense resolves, preventing a flash of white.
Это позволяет шаблону загрузки spa оставаться в DOM до тех пор, пока не разрешится саспенс Vue приложения, что предотвращает появление белой вспышки.

##### Migration Steps
##### Этапы миграции

If you were targeting the spa loading template with CSS or `document.queryElement` you will need to update your selectors. For this purpose you can use the new `app.spaLoaderTag` and `app.spaLoaderAttrs` configuration options.
Если вы использовали CSS или `document.queryElement` для шаблона загрузки spa, вам необходимо обновить селекторы. Для этого вы можете использовать новые опции конфигурации `app.spaLoaderTag` и `app.spaLoaderAttrs`.

Alternatively, you can revert to the previous behaviour with:
Кроме того, вы можете вернуться к предыдущему поведению с помощью:

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

#### Scan Page Meta After Resolution
#### Сканирование мета-данных страницы после разрешения

🚦 **Impact Level**: Minimal
🚦 **Уровень воздействия**: Минимальный

##### What Changed
##### Что изменилось

We now scan page metadata (defined in `definePageMeta`) _after_ calling the `pages:extend` hook rather than before.
Теперь мы сканируем метаданные страницы (определенные в `definePageMeta`) _после_ вызова хука `pages:extend`, а не до.

##### Reasons for Change
##### Причины для изменений

This was to allow scanning metadata for pages that users wanted to add in `pages:extend`. We still offer an opportunity to change or override page metadata in a new `pages:resolved` hook.
Это было сделано для того, чтобы позволить сканировать метаданные для страниц, которые пользователи хотели добавить в `pages:extend`. Мы по-прежнему предлагаем возможность изменить или переопределить метаданные страницы в новом хуке `pages:resolved`.

##### Migration Steps
##### Этапы миграции

If you want to override page metadata, do that in `pages:resolved` rather than in `pages:extend`.
Если вы хотите переопределить метаданные страницы, сделайте это в `pages:resolved`, а не в `pages:extend`.

```diff
export default defineNuxtConfig({
Expand All @@ -305,7 +305,7 @@ If you want to override page metadata, do that in `pages:resolved` rather than i
})
```

Alternatively, you can revert to the previous behaviour with:
Кроме того, вы можете вернуться к предыдущему поведению с помощью:

```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
Expand Down
10 changes: 5 additions & 5 deletions docs/1.getting-started/4.styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,25 +258,25 @@ export default defineNuxtConfig({

Nuxt использует Vite по умолчанию. Если вы хотите использовать вместо этого webpack, обратитесь к [документации](https://webpack.js.org/loaders/sass-loader) загрузчика нужного препроцессора.

### Preprocessor Workers (Experimental)
### Воркеры препроцессора (экспериментально)

Vite has made available an [experimental option](https://vite.dev/config/shared-options.html#css-preprocessormaxworkers) which can speed up using preprocessors.
Vite сделал доступной [экспериментальную опцию](https://vite.dev/config/shared-options.html#css-preprocessormaxworkers), которая может ускорить использование препроцессоров.

You can enable this in your `nuxt.config`:
Вы можете включить эту функцию в `nuxt.config`:

```ts

export default defineNuxtConfig({
vite: {
css: {
preprocessorMaxWorkers: true // number of CPUs minus 1
preprocessorMaxWorkers: true // количество процессоров минус 1
}
}
})
```

::note
This is an experimental option and you should refer to the Vite documentation and [provide feedback](https://github.com/vitejs/vite/discussions/15835).
Это экспериментальная опция, и вам следует обратиться к документации Vite и [оставить отзыв](https://github.com/vitejs/vite/discussions/15835).
::

## Стилизация однофайловых компонентов (SFC)
Expand Down
46 changes: 23 additions & 23 deletions docs/2.guide/2.directory-structure/1.shared.md
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
---
title: 'shared'
head.title: 'shared/'
description: 'Use the shared/ directory to share functionality between the Vue app and the Nitro server.'
description: 'Используйте директорию shared/ для совместного использования функциональности между приложением Vue и сервером Nitro.'
navigation.icon: 'i-ph-folder'
---

The `shared/` directory allows you to share code that can be used in both the Vue app and the Nitro server.
Директория `shared/` позволяет совместно использовать код, который может быть использован как в приложении Vue, так и на сервере Nitro.

::note
The `shared/` directory is available in Nuxt v3.14+.
Директория `shared/` доступна в Nuxt v3.14+.
::

::important
Code in the `shared/` directory cannot import any Vue or Nitro code.
Код в директории `shared/` не может импортировать код Vue или Nitro.
::

## Usage
## Использование

**Method 1:** Using named export
**Метод 1:** Использование именованного экспорта

```ts twoslash [shared/utils/capitalize.ts]
export const capitalize = (input: string) => {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
```

**Method 2:** Using default export
**Метод 2:** Использование экспорта по умолчанию

```ts twoslash [shared/utils/capitalize.ts]
export default function capitalize (input: string) {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
```

**Usage:** You can now use auto-imported utility functions in `.js`, `.ts` and `.vue` files within your Vue app and the `server/` directory.
**Применение:** Теперь вы можете использовать автоимпортируемые функции-утилиты в файлах `.js`, `.ts` и `.vue` в вашем приложении Vue и директории `server/`.

If you have [set `compatibilityVersion: 4` in your `nuxt.config.ts`](/docs/getting-started/upgrade#opting-in-to-nuxt-4), you can use the auto-imported functions in the `app/` directory. This is part of Nuxt's progressive compatibility features preparing for version 4.
Если вы [установили `compatibilityVersion: 4` в вашем `nuxt.config.ts`](/docs/getting-started/upgrade#opting-in-to-nuxt-4), вы можете использовать автоимпортируемые функции в директории `app/`. Это часть прогрессивной совместимости Nuxt, готовящейся к версии 4.

```vue [app.vue]
<script setup lang="ts">
Expand All @@ -57,42 +57,42 @@ export default defineEventHandler((event) => {
})
```

## Auto Imports
## Автоимпорты

Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported.
Автоимпортируются только файлы из директорий `shared/utils/` и `shared/types/`. Файлы, вложенные в поддиректории этих директорий, не будут автоимпортироваться.

::tip
The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`composables/`](/docs/guide/directory-structure/composables) and [`utils/`](/docs/guide/directory-structure/utils) directories.
Способ работы и сканирования автоимпортов `shared/utils` и `shared/types` идентичен директориям [`composables/`](/docs/guide/directory-structure/composables) и [`utils/`](/docs/guide/directory-structure/utils).
::

:read-more{to="/docs/guide/directory-structure/composables#how-files-are-scanned"}

```bash [Directory Structure]
```bash [Структура директории]
-| shared/
---| capitalize.ts # Not auto-imported
---| capitalize.ts # Не автоимпортируется
---| formatters
-----| lower.ts # Not auto-imported
-----| lower.ts # Не автоимпортируется
---| utils/
-----| lower.ts # Auto-imported
-----| lower.ts # Автоимпортируется
-----| formatters
-------| upper.ts # Not auto-imported
-------| upper.ts # Не автоимпортируется
---| types/
-----| bar.d.ts # Auto-imported
-----| bar.d.ts # Автоимпортируется
```

Any other files you create in the `shared/` folder must be manually imported using the `#shared` alias (automatically configured by Nuxt):
Любые другие файлы, созданные вами в папке `shared/`, должны быть импортированы вручную с помощью алиаса `#shared` (автоматически конфигурируется Nuxt):

```ts
// For files directly in the shared directory
// Для файлов непосредственно в shared директории
import capitalize from '#shared/capitalize'

// For files in nested directories
// Для файлов во вложенных директориях
import lower from '#shared/formatters/lower'

// For files nested in a folder within utils
// Для файлов, вложенных в папку внутри utils
import upper from '#shared/utils/formatters/upper'
```

This alias ensures consistent imports across your application, regardless of the importing file's location.
Этот алиас обеспечивает согласованный импорт в вашем приложении, независимо от местоположения импортируемого файла.

:read-more{to="/docs/guide/concepts/auto-imports"}
20 changes: 10 additions & 10 deletions docs/2.guide/2.directory-structure/3.app-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,16 +142,16 @@ export default defineAppConfig({

::

## Known Limitations
## Известные ограничения

As of Nuxt v3.3, the `app.config.ts` file is shared with Nitro, which results in the following limitations:
Начиная с Nuxt v3.3, файл `app.config.ts` используется совместно с Nitro, что приводит к следующим ограничениям:

1. You cannot import Vue components directly in `app.config.ts`.
2. Some auto-imports are not available in the Nitro context.
1. Вы не можете импортировать компоненты Vue непосредственно в `app.config.ts`.
2. Некоторые автоимпорты недоступны в контексте Nitro.

These limitations occur because Nitro processes the app config without full Vue component support.
Эти ограничения возникают из-за того, что Nitro обрабатывает конфигурацию приложения без полной поддержки компонентов Vue.

While it's possible to use Vite plugins in the Nitro config as a workaround, this approach is not recommended:
Хотя в качестве обходного пути можно использовать плагины Vite в конфигурации Nitro, такой подход не рекомендуется:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
Expand All @@ -164,14 +164,14 @@ export default defineNuxtConfig({
```

::warning
Using this workaround may lead to unexpected behavior and bugs. The Vue plugin is one of many that are not available in the Nitro context.
Использование этого обходного пути может привести к неожиданному поведению и ошибкам. Плагин Vue - один из многих, которые недоступны в контексте Nitro.
::

Related issues:
Похожие issues:
- [Issue #19858](https://github.com/nuxt/nuxt/issues/19858)
- [Issue #19854](https://github.com/nuxt/nuxt/issues/19854)

::info
Nitro v3 will resolve these limitations by removing support for the app config.
You can track the progress in [this pull request](https://github.com/nitrojs/nitro/pull/2521).
В Nitro v3 эти ограничения будут устранены путем отказа от поддержки конфигурации приложения.
Вы можете отслеживать прогресс в [этом pull request](https://github.com/nitrojs/nitro/pull/2521).
::
12 changes: 6 additions & 6 deletions docs/2.guide/3.going-further/1.experimental-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -453,21 +453,21 @@ export default defineNuxtConfig({

## spaLoadingTemplateLocation

When rendering a client-only page (with `ssr: false`), we optionally render a loading screen (from `app/spa-loading-template.html`).
При рендеринге страницы, предназначенной только для клиента (с `ssr: false`), мы опционально ренденрим экран загрузки (из `app/spa-loading-template.html`).

It can be set to `within`, which will render it like this:
Можно установить значение в `within`, что приведет к следующему виду:

```html
<div id="__nuxt">
<!-- spa loading template -->
<!-- шаблон загрузки spa -->
</div>
```

Alternatively, you can render the template alongside the Nuxt app root by setting it to `body`:
Кроме того, вы можете отобразить шаблон рядом с корнем приложения Nuxt, установив для него значение `body`:

```html
<div id="__nuxt"></div>
<!-- spa loading template -->
<!-- шаблон загрузки spa -->
```

This avoids a white flash when hydrating a client-only page.
Это позволяет избежать белой вспышки при гидратации страницы, предназначенной только для клиента.
2 changes: 1 addition & 1 deletion docs/2.guide/3.going-further/7.layers.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default defineNuxtConfig({
::

::warning
Bear in mind that if you are extending a remote source as a layer, you will not be able to access its dependencies outside of Nuxt. For example, if the remote layer depends on an eslint plugin, this will not be usable in your eslint config. That is because these dependencies will be located in a special location (`node_modules/.c12/layer_name/node_modules/`) that is not accessible to your package manager.
Имейте в виду, что если вы расширяете удаленный источник как слой, вы не сможете получить доступ к его зависимостям вне Nuxt. Например, если удаленный слой зависит от плагина eslint, его нельзя будет использовать в конфигурации eslint. Это потому, что эти зависимости будут находиться в специальном месте (`node_modules/.c12/layer_name/node_modules/`), которое недоступно вашему пакетному менеджеру.
::

::note
Expand Down
2 changes: 1 addition & 1 deletion docs/3.api/2.composables/use-lazy-fetch.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ links:
::

::note
Awaiting `useLazyFetch` in this mode only ensures the call is initialized. On client-side navigation, data may not be immediately available, and you should make sure to handle the pending state in your app.
Ожидание `useLazyFetch` в этом режиме только обеспечивает инициализацию вызова. При навигации на клиенте данные могут быть доступны не сразу, и вам следует позаботиться о том, чтобы обработать состояние ожидания в вашем приложении.
::

:read-more{to="/docs/api/composables/use-fetch"}
Expand Down
2 changes: 1 addition & 1 deletion docs/3.api/4.commands/upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ npx nuxi upgrade [--force|-f]
Параметр | По умолчанию | Описание
--------------|--------------|------------------------------------------------------
`--force, -f` | `false` | Удаляет `node_modules` и `.lock-файл` перед обновлением.
`--channel, -ch` | `"stable"` | Specify a channel to install from ("nightly" or "stable")
`--channel, -ch` | `"stable"` | Определяет канал для установки ("nightly" или "stable")
Loading