Skip to content

Commit

Permalink
Merge pull request #278 from JonikUl/update-translations
Browse files Browse the repository at this point in the history
Обновление перевода
  • Loading branch information
Ibochkarev authored Aug 6, 2024
2 parents 8a8db84 + 2d62d02 commit a25901a
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 19 deletions.
20 changes: 10 additions & 10 deletions docs/3.api/1.components/1.client-only.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
---
title: '<ClientOnly>'
description: Отрисовка компонентов только на стороне клиента с помощью компонента ClientOnly.
description: Отрисовка компонентов только на клиенте с помощью компонента ClientOnly.
links:
- label: Исходники
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/client-only.ts
size: xs
---

Компонент ClientOnly используется с целью рендеринга компонента только на стороне клиента.
Компонент ClientOnly используется с целью рендеринга компонента только на клиенте.

::note
Содержимое слота по умолчанию будет удалено из сборки сервера. (Это означает, что любой CSS, используемый компонентами внутри него, может не быть встроен при рендеринге исходного HTML.)
::

## Входные параметры

- `placeholderTag` | `fallbackTag`: укажите тег, который будет отображаться на стороне сервера.
- `placeholder` | `fallback`: укажите контент, который будет отображаться на стороне сервера.
- `placeholderTag` | `fallbackTag`: укажите тег, который будет отображаться на сервере.
- `placeholder` | `fallback`: укажите контент, который будет отображаться на сервере.

```vue
<template>
<div>
<Sidebar />
<!-- Компонент <Comment> будет отображаться только на стороне клиента -->
<ClientOnly fallback-tag="span" fallback="Loading comments...">
<!-- Компонент <Comment> будет отображаться только на клиенте -->
<ClientOnly fallback-tag="span" fallback="Загрузка комментариев...">
<Comment />
</ClientOnly>
</div>
Expand All @@ -39,13 +39,13 @@ links:
<template>
<div>
<Sidebar />
<!-- Это отображает элемент «span» на стороне сервера -->.
<!-- Это отображает элемент «span» на сервере -->
<ClientOnly fallbackTag="span">
<!-- этот компонент будет отображаться только на стороне клиента -->
<!-- этот компонент будет отображаться только на клиенте -->
<Comments />
<template #fallback>
<!-- это будет отображаться на стороне сервера -->
<p>Loading comments...</p>
<!-- это будет отображаться на сервере -->
<p>Загрузка комментариев...</p>
</template>
</ClientOnly>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/3.api/1.components/1.dev-only.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Nuxt предоставляет компонент `DevOnly` для рендер
<LazyDebugBar />
<!-- если вам когда-нибудь понадобится замена в продакшене -->
<!-- обязательно проверьте их с помощью `nuxt preview` -->.
<!-- обязательно протестируйте их с помощью `nuxt preview` -->.
<template #fallback>
<div><!-- пустой div для flex.justify-between --></div>
</template>
Expand All @@ -41,7 +41,7 @@ Nuxt предоставляет компонент `DevOnly` для рендер
<DevOnly>
<!-- этот компонент будет отображаться только во время разработки -->
<LazyDebugBar />
<!-- обязательно проверьте их с помощью `nuxt preview` -->.
<!-- обязательно протестируйте их с помощью `nuxt preview` -->.
<template #fallback>
<div><!-- пустой div для flex.justify-between --></div>
</template>
Expand Down
14 changes: 7 additions & 7 deletions docs/3.api/1.components/2.nuxt-page.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ links:

## Входные параметры

- `name`: инструктирует `RouterView` для рендера компонента с соответствующим именем в опции components записи соответствующего маршрута.
- `name`: указывает `RouterView` отобразить компонент с соответствующим именем в опции components записи соответствующего маршрута.
- тип: `string`
- `route`: местоположение маршрута, в котором есть все его компоненты.
- тип: `RouteLocationNormalized`
Expand All @@ -33,12 +33,12 @@ links:
- тип: `boolean` или `KeepAliveProps`

::tip
Nuxt автоматически определяет `name` and `route`, сканируя и отображая все файлы компонентов Vue, найденные в директории `/pages`.
Nuxt автоматически определяет `name` и `route`, сканируя и отображая все файлы компонентов Vue, найденные в директории `/pages`.
::

## Пример

Например, при передаче `static` ключа, компонент `NuxtPage` рендерится только один раз при монтировании.
Например, при передаче ключа `static`, компонент `NuxtPage` рендерится только один раз при монтировании.

```vue [app.vue]
<template>
Expand All @@ -56,7 +56,7 @@ Nuxt автоматически определяет `name` and `route`, ска
Не используйте здесь объект `$route`, так как это может вызвать проблемы с тем, как `<NuxtPage>` рендерит страницы с `<Suspense>`.
::

В качестве альтернативы можно передать `pageKey` в качестве значения `key` через [`definePageMeta`](/docs/api/utils/define-page-meta) из тега `<script>` вашего компонента Vue в директории
В качестве альтернативы можно передать `pageKey` в качестве значения `key` через [`definePageMeta`](/docs/api/utils/define-page-meta) из тега `<script>` компонента Vue в директории
`/pages`.

```vue [pages/my-page.vue]
Expand Down Expand Up @@ -90,7 +90,7 @@ function logFoo () {
````vue [my-page.vue]
<script setup lang="ts">
const foo = () => {
console.log('foo method called')
console.log('вызван метод foo')
}
defineExpose({
Expand All @@ -101,9 +101,9 @@ defineExpose({

## Пользовательские входные параметры

Кроме того, `<NuxtPage>` также принимает пользовательские входные параметры, которые вам, возможно, потребуется передать ниже по иерархии..
Кроме того, `<NuxtPage>` также принимает пользовательские входные параметры, которые вам, возможно, потребуется передать ниже по иерархии.

Эти пользовательские входные параметры доступны через `attrs` в Nuxt app.
Эти пользовательские входные параметры доступны в приложении Nuxt через `attrs`.

```html
<NuxtPage :foobar="123" />
Expand Down

0 comments on commit a25901a

Please sign in to comment.