Skip to content

Commit

Permalink
Merge pull request #312 from JonikUl/update-v3
Browse files Browse the repository at this point in the history
Обновление документации Nuxt v3
  • Loading branch information
Ibochkarev authored Nov 14, 2024
2 parents 41d8647 + c8e98aa commit 99928f1
Show file tree
Hide file tree
Showing 9 changed files with 51 additions and 68 deletions.
1 change: 0 additions & 1 deletion docs/1.getting-started/12.upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -699,7 +699,6 @@ const importName = genSafeVariableName

В таблице ниже приведено краткое сравнение между 3 версиями Nuxt:


| Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3+ |
| --------------------------- | ------------- | ------------- |---------------|
| Vue | 2 | 2 | 3 |
Expand Down
4 changes: 2 additions & 2 deletions docs/1.getting-started/3.configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ export default defineNuxtConfig({
})
```

To select an environment when running a Nuxt CLI command, simply pass the name to the `--envName` flag, like so: `nuxi build --envName myCustomName`.
Чтобы выбрать окружение при запуске команды Nuxt CLI, просто передайте его имя во флаг `--envName`, например: `nuxi build --envName myCustomName`.

To learn more about the mechanism behind these overrides, please refer to the `c12` documentation on [environment-specific configuration](https://github.com/unjs/c12?tab=readme-ov-file#environment-specific-configuration).
Чтобы узнать больше о механизме, лежащем в основе этих переопределений, обратитесь к документации `c12` по [конфигурации, зависящей от окружения](https://github.com/unjs/c12?tab=readme-ov-file#environment-specific-configuration).

::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=DFZI2iVCrNc" target="_blank"}
Посмотрите видео от Александра Лихтера о переменных окружения в `nuxt.config.ts`.
Expand Down
24 changes: 12 additions & 12 deletions docs/1.getting-started/6.data-fetching.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ You can add the [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-ind

## `$fetch`

Nuxt использует библиотеку [ofetch](https://github.com/unjs/ofetch), которая автоматически импортируется как псевдоним `$fetch` во всем приложении.
Nuxt использует библиотеку [ofetch](https://github.com/unjs/ofetch), которая автоматически импортируется как псевдоним `$fetch` во всем приложении.

```vue twoslash [pages/todos.vue]
<script setup lang="ts">
Expand All @@ -81,21 +81,21 @@ async function addTodo() {
```

::warning
Помните, что использование только `$fetch` не обеспечит [дедупликацию сетевых вызовов и предотвращение навигации](#зачем-использовать-специальные-композаблы-для-получения-данных). :br
Помните, что использование только `$fetch` не обеспечит дедупликацию сетевых вызовов и предотвращение навигации. :br
Рекомендуется использовать `$fetch` для взаимодействия на стороне клиента (на основе событий) или в сочетании с [`useAsyncData`](#useasyncdata) при получении исходных данных компонента.
::

::read-more{to="/docs/api/utils/dollarfetch"}
Узнайте больше о `$fetch`.
::

### Pass Client Headers to the API
### Передача клиентских заголовков в API

During server-side-rendering, since the `$fetch` request takes place 'internally' within the server, it won't include the user's browser cookies.
Во время рендеринга на сервере, поскольку запрос `$fetch` выполняется "внутри" сервера, он не будет включать файлы cookie браузера пользователя.

We can use [`useRequestHeaders`](/docs/api/composables/use-request-headers) to access and proxy cookies to the API from server-side.
Мы можем использовать [`useRequestHeaders`](/docs/api/composables/use-request-headers) для доступа и проксирования файлов cookie в API со стороны сервера.

The example below adds the request headers to an isomorphic `$fetch` call to ensure that the API endpoint has access to the same `cookie` header originally sent by the user.
В приведенном ниже примере заголовки запроса добавляются к изоморфному вызову `$fetch`, чтобы гарантировать, что эндпоинт API имеет доступ к тому же заголовку `cookie`, который изначально был отправлен пользователем.

```vue
<script setup lang="ts">
Expand All @@ -108,7 +108,7 @@ async function getCurrentUser() {
```

::caution
Be very careful before proxying headers to an external API and just include headers that you need. Not all headers are safe to be bypassed and might introduce unwanted behavior. Here is a list of common headers that are NOT to be proxied:
Будьте очень осторожны, прежде чем проксировать заголовки на внешний API, и включайте только те заголовки, которые вам нужны. Не все заголовки безопасны, некоторые могут привести к нежелательному поведению. Вот список распространенных заголовков, которые НЕ следует проксировать:

- `host`, `accept`
- `content-length`, `content-md5`, `content-type`
Expand All @@ -117,27 +117,27 @@ Be very careful before proxying headers to an external API and just include head
::

::tip
You can also use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers to the call automatically.
Вы также можете использовать [`useRequestFetch`](/docs/api/composables/use-request-fetch) для автоматической передачи заголовков вызову.
::

## `useFetch`

The [`useFetch`](/docs/api/composables/use-fetch) composable uses `$fetch` under-the-hood to make SSR-safe network calls in the setup function.
Композабл [`useFetch`](/docs/api/composables/use-fetch) использует `$fetch` под капотом для выполнения SSR-безопасных сетевых вызовов в функции setup.

```vue twoslash [app.vue]
<script setup lang="ts">
const { data: count } = await useFetch('/api/count')
</script>
<template>
<p>Page visits: {{ count }}</p>
<p>Посещения страницы: {{ count }}</p>
</template>
```

This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
Этот композабл представляет собой обертку вокруг композабла [`useAsyncData`](/docs/api/composables/use-async-data) и утилиты `$fetch`.

::tip{icon="i-ph-video" to="https://www.youtube.com/watch?v=njsGVmcWviY" target="_blank"}
Watch the video from Alexander Lichter to avoid using `useFetch` the wrong way!
Посмотрите видео от Александра Лихтера, чтобы избежать неправильного использования `useFetch`!
::

:read-more{to="/docs/api/composables/use-fetch"}
Expand Down
26 changes: 6 additions & 20 deletions docs/2.guide/2.directory-structure/1.pages.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: "pages"
description: "Nuxt предоставляет маршрутизацию на основе файлов в вашем приложении."
description: "Nuxt предоставляет маршрутизацию на основе файлов в приложении."
head.title: "pages/"
navigation.icon: i-ph-folder
---
Expand Down Expand Up @@ -226,35 +226,21 @@ definePageMeta({

:link-example{to="/docs/examples/routing/pages"}

## Route Groups
## Группы маршрутов

In some cases, you may want to group a set of routes together in a way which doesn't affect file-based routing. For this purpose, you can put files in a folder which is wrapped in parentheses - `(` and `)`.
В некоторых случаях вам может понадобиться сгруппировать набор маршрутов таким образом, чтобы это не повлияло на маршрутизацию на основе файлов. Для этой цели вы можете поместить файлы в директорию, заключенную в скобки - `(` и `)`.

For example:

```bash [Directory structure]
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
```

This will produce `/`, `/about` and `/contact` pages in your app. The `marketing` group is ignored for purposes of your URL structure.

## Page Metadata

For example:
Например:

```bash [Directory structure]
```bash [Структура директории]
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
```

This will produce `/`, `/about` and `/contact` pages in your app. The `marketing` group is ignored for purposes of your URL structure.
Это создаст в приложении страницы `/`, `/about` и `/contact`. Группа `marketing` игнорируется в структуре URL-адреса.

## Мета-данные страницы

Expand Down
2 changes: 1 addition & 1 deletion docs/2.guide/2.directory-structure/1.server.md
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ export default defineEventHandler((event) => {
```

::note
Заголовки, которые **не предназначены** для передачи, **не будут включены** в запрос. К таким заголовкам относятся, например:
Заголовки, которые **не предназначены** для передачи, **не будут включены** в запрос. К таким заголовкам относятся, например:
`transfer-encoding`, `connection`, `keep-alive`, `upgrade`, `expect`, `host`, `accept`
::

Expand Down
33 changes: 16 additions & 17 deletions docs/2.guide/3.going-further/1.experimental-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,16 @@ export default defineNuxtConfig({

## emitRouteChunkError

Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
Вызывает хук `app:chunkError`, когда происходит ошибка загрузки чанков vite/webpack. Поведение по умолчанию — выполнить перезагрузку нового маршрута при переходе на новый маршрут, когда чанк не загружается.

If you set this to `'automatic-immediate'` Nuxt will reload the current route immediatly, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
Если вы установите для этого параметра значение `'automatic-immediate'`, Nuxt немедленно перезагрузит текущий маршрут, вместо того чтобы ждать перехода. Это полезно при ошибках чанков, которые не вызваны навигацией, например, когда приложению Nuxt не удается загрузить [ленивый компонент](/docs/guide/directory-structure/components#dynamic-imports). Потенциальным недостатком такого поведения является нежелательная перезагрузка, например, когда приложению не нужен фрагмент, вызвавший ошибку.

Вы можете отключить автоматическую обработку, установив значение `false`, или обрабатывать ошибки чанков вручную, установив значение `manual`.

```ts twoslash [nuxt.config.ts]
export default defineNuxtConfig({
experimental: {
emitRouteChunkError: 'automatic' // или 'automatic-immediate', 'manual' или false
emitRouteChunkError: 'automatic' // 'automatic-immediate', 'manual' или false
}
})
```
Expand Down Expand Up @@ -336,7 +336,7 @@ globalThis.Buffer = globalThis.Buffer || Buffer

Это работает только со статическими данными или строками/массивами, а не с переменными или условными присваиваниями. Дополнительную информацию и контекст см. в [оригинальном issue](https://github.com/nuxt/nuxt/issues/24770).

It is also possible to scan page metadata only after all routes have been registered in `pages:extend`. Then another hook, `pages:resolved` will be called. To enable this behavior, set `scanPageMeta: 'after-resolve'`.
Также возможно сканировать метаданные страницы только после того, как все маршруты зарегистрированы в `pages:extend`. Затем будет вызван другой хук, `pages:resolved`. Чтобы включить это поведение, установите `scanPageMeta: 'after-resolve'`.

Вы можете отключить эту возможность, если она вызывает проблемы в вашем проекте.

Expand Down Expand Up @@ -366,7 +366,7 @@ export default defineNuxtConfig({

## buildCache

Caches Nuxt build artifacts based on a hash of the configuration and source files.
Кэширует артефакты сборки Nuxt на основе хэша конфигурационных и исходных файлов.

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

When enabled, changes to the following files will trigger a full rebuild:
Если эта функция включена, изменения в следующих файлах вызовут полную пересборку:

```bash [Directory structure]
```bash [Структура директории]
.nuxtrc
.npmrc
package.json
Expand All @@ -389,16 +389,16 @@ tsconfig.json
bun.lockb
```

In addition, any changes to files within `srcDir` will trigger a rebuild of the Vue client/server bundle. Nitro will always be rebuilt (though work is in progress to allow Nitro to announce its cacheable artifacts and their hashes).
Кроме того, любые изменения файлов в `srcDir` вызовут пересборку клиент/сервер бандла Vue. Nitro всегда будет пересобираться (хотя сейчас ведется работа над тем, чтобы Nitro мог объявлять свои кэшируемые артефакты и их хэши).

::note
A maximum of 10 cache tarballs are kept.
A Сохраняется не более 10 tarball'ов кэша.
::

## normalizeComponentNames

Ensure that auto-generated Vue component names match the full component name
you would use to auto-import the component.
Убедитесь, что автогенерируемые имена компонентов Vue совпадают с полным именем компонента,
которое вы используете для автоимпорта компонента.

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

By default, if you haven't set it manually, Vue will assign a component name that matches
the filename of the component.
По умолчанию, если вы не задали это вручную, Vue присвоит компоненту имя, соответствующее имени файла компонента.

```bash [Directory structure]
```bash [Структура директории]
├─ components/
├─── SomeFolder/
├───── MyComponent.vue
```

In this case, the component name would be `MyComponent`, as far as Vue is concerned. If you wanted to use `<KeepAlive>` with it, or identify it in the Vue DevTools, you would need to use this component.
Что касается Vue, в этом случае имя компонента будет `MyComponent`. Если бы вы хотели использовать с ним `<KeepAlive>` или идентифицировать его во Vue DevTools, вам нужно было бы использовать это имя.

But in order to auto-import it, you would need to use `SomeFolderMyComponent`.
Но чтобы автоимпортировать его, вам нужно использовать `SomeFolderMyComponent`.

By setting `experimental.normalizeComponentNames`, these two values match, and Vue will generate a component name that matches the Nuxt pattern for component naming.
Если установить `experimental.normalizeComponentNames`, эти два значения совпадут, и Vue сгенерирует имя компонента, соответствующее паттерну Nuxt для именования компонентов.
1 change: 0 additions & 1 deletion docs/2.guide/3.going-further/3.modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ bun x nuxi init -t module my-module
```
::


Это создаст проект `my-module` со всем необходимым кодом для разработки и публикации вашего модуля.

**Дальнейшие шаги:**
Expand Down
Loading

0 comments on commit 99928f1

Please sign in to comment.