From a72e27dd63ac01c81fff3f38368e578037ea664f Mon Sep 17 00:00:00 2001
From: Evgeniy Gromin <evgeniy.gromin@gmail.com>
Date: Tue, 11 Jun 2024 09:08:48 +0400
Subject: [PATCH 1/9] feat(docs): translate docs/1.getting-started/4.styling.md
 (#27)

Signed-off-by: Evgeniy Gromin <evgeniy.gromin@gmail.com>
---
 docs/1.getting-started/4.styling.md | 227 ++++++++++++++--------------
 1 file changed, 113 insertions(+), 114 deletions(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index 455253f5d5a3..f3f32661448a 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -1,27 +1,27 @@
 ---
-title: 'Styling'
-description: 'Learn how to style your Nuxt application.'
+title: 'Стилизация'
+description: 'Узнайте как стилизовать Nuxt приложение.'
 navigation.icon: i-ph-palette-duotone
 ---
 
-Nuxt is highly flexible when it comes to styling. Write your own styles, or reference local and external stylesheets.
-You can use CSS preprocessors, CSS frameworks, UI libraries and Nuxt modules to style your application.
+Nuxt очень гибок в плане стилизации. Пишите собственные стили или ссылайтесь на локальные и внешние таблицы стилей.
+Вы можете использовать препроцессоры CSS, CSS фреймворки, UI библиотеки и модули Nuxt для стилизации приложения.
 
-## Local Stylesheets
+## Локальные таблицы стилей {#Local Stylesheets}
 
-If you're writing local stylesheets, the natural place to put them is the [`assets/` directory](/docs/guide/directory-structure/assets).
+Если вы пишете локальные таблицы стилей, стандартным местом для их размещения является [директория `assets/`](/docs/guide/directory-structure/assets).
 
-### Importing Within Components
+### Импорт внутри компонентов {#Importing Within Components}
 
-You can import stylesheets in your pages, layouts and components directly.
-You can use a javascript import, or a css [`@import` statement](https://developer.mozilla.org/en-US/docs/Web/CSS/@import).
+Вы можете импортировать таблицы стилей напрямую в свои страницы, лейауты и компоненты.
+Вы можете использовать javascript-импорт, или [css оператор `@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import).
 
 ```vue [pages/index.vue]
 <script>
-// Use a static import for server-side compatibility
+// Используйте статический импорт для совместимости на стороне сервера.
 import '~/assets/css/first.css'
 
-// Caution: Dynamic imports are not server-side compatible
+// Внимание: Динамический импорт несовместим со стороной сервера.
 import('~/assets/css/first.css')
 </script>
 
@@ -31,13 +31,13 @@ import('~/assets/css/first.css')
 ```
 
 ::tip
-The stylesheets will be inlined in the HTML rendered by Nuxt.
+Таблицы стилей будут встроены в HTML-код, отрисованный Nuxt.
 ::
 
-### The CSS Property
+### Свойство CSS {#The CSS Property}
 
-You can also use the `css` property in the Nuxt configuration.
-The natural place for your stylesheets is the [`assets/` directory](/docs/guide/directory-structure/assets). You can then reference its path and Nuxt will include it to all the pages of your application.
+Вы также можете использовать свойство `css` в конфигурации Nuxt.
+Стандартным местом для ваших таблиц стилей является [директория `assets/`](/docs/guide/directory-structure/assets). Вы можете указать путь к файлу стилей, и Nuxt включит его во все страницы приложения.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -46,12 +46,12 @@ export default defineNuxtConfig({
 ```
 
 ::tip
-The stylesheets will be inlined in the HTML rendered by Nuxt, injected globally and present in all pages.
+Таблицы стилей будут встроены в HTML-код, отрисованный Nuxt, внедрены глобально и представлены на всех страницах.
 ::
 
-### Working With Fonts
+### Работа со шрифтами {#Working With Fonts}
 
-Place your local fonts files in your `~/public/` directory, for example in `~/public/fonts`. You can then reference them in your stylesheets using `url()`.
+Поместите локальные файлы шрифтов в директорию `~/public/`, например, в `~/public/fonts`. Вы можете ссылаться на них в своих таблицах стилей с помощью `url()`.
 
 ```css [assets/css/main.css]
 @font-face {
@@ -63,7 +63,7 @@ Place your local fonts files in your `~/public/` directory, for example in `~/pu
 }
 ```
 
-Then reference your fonts by name in your stylesheets, pages or components:
+После этого, ссылайтесь на шрифты по имени в таблицах стилей, на страницах или в компонентах:
 
 ```vue
 <style>
@@ -73,15 +73,15 @@ h1 {
 </style>
 ```
 
-### Stylesheets Distributed Through NPM
+### Таблицы стилей, распространяемые через NPM {#Stylesheets Distributed Through NPM}
 
-You can also reference stylesheets that are distributed through npm. Let's use the popular `animate.css` library as an example.
+Вы также можете ссылаться на таблицы стилей, распространяемые через npm. Давайте в качестве примера воспользуемся популярной библиотекой `animate.css`.
 
 ```bash [Terminal]
 npm install animate.css
 ```
 
-Then you can reference it directly in your pages, layouts and components:
+После этого вы можете ссылаться на стили напрямую в своих страницах, лейаутах и ​​компонентах:
 
 ```vue [app.vue]
 <script>
@@ -93,7 +93,7 @@ import 'animate.css'
 </style>
 ```
 
-The package can also be referenced as a string in the css property of your Nuxt configuration.
+На пакет также можно ссылаться как на строку в свойстве css вашей конфигурации Nuxt.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -101,11 +101,11 @@ export default defineNuxtConfig({
 })
 ```
 
-## External Stylesheets
+## Внешние таблицы стилей {#External Stylesheets}
 
-You can include external stylesheets in your application by adding a link element in the head section of your nuxt.config file. You can achieve this result using different methods. Note that local stylesheets can also be included like this.
+Вы можете включить внешние таблицы стилей в приложение, добавив элемент link в раздел head файла nuxt.config. Вы можете достичь этого результата, используя разные методы. Обратите внимание, что локальные таблицы стилей также могут быть включены таким образом.
 
-You can manipulate the head with the [`app.head`](/docs/api/nuxt-config#head) property of your Nuxt configuration:
+Вы можете управлять элементом head с помощью свойства [`app.head`](/docs/api/nuxt-config#head) конфигурации Nuxt:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -117,9 +117,9 @@ export default defineNuxtConfig({
 })
 ```
 
-### Dynamically Adding Stylesheets
+### Динамическое добавление таблиц стилей {#Dynamically Adding Stylesheets}
 
-You can use the useHead composable to dynamically set a value in your head in your code.
+Вы можете использовать композабл useHead для динамической установки значений в элементе head в вашем коде.
 
 :read-more{to="/docs/api/composables/use-head"}
 
@@ -129,13 +129,13 @@ useHead({
 })
 ```
 
-Nuxt uses `unhead` under the hood, and you can refer to its full documentation [here](https://unhead.unjs.io).
+Nuxt использует `unhead` под капотом, и вы можете обратиться к его полной документации [здесь](https://unhead.unjs.io).
 
-### Modifying The Rendered Head With A Nitro Plugin
+### Изменение отрендеренного head с помощью плагина Nitro {#Modifying The Rendered Head With A Nitro Plugin}
 
-If you need more advanced control, you can intercept the rendered html with a hook and modify the head programmatically.
+Если нужен более расширенный контроль, вы можете перехватить HTML-код с помощью хука и изменить head программно.
 
-Create a plugin in `~/server/plugins/my-plugin.ts` like this:
+Создайте плагин в `~/server/plugins/my-plugin.ts` следующим образом:
 
 ```ts twoslash [server/plugins/my-plugin.ts]
 export default defineNitroPlugin((nitro) => {
@@ -145,11 +145,11 @@ export default defineNitroPlugin((nitro) => {
 })
 ```
 
-External stylesheets are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles take longer to render. You can read more about it on [web.dev](https://web.dev/defer-non-critical-css).
+Внешние таблицы стилей являются блокирующими рендеринг ресурсами: они должны быть загружены и обработаны до того, как браузер отобразит страницу. Веб-страницы, содержащие неоправданно большие стили, требуют больше времени для рендеринга. Подробнее об этом можно прочитать на [web.dev](https://web.dev/defer-non-critical-css).
 
-## Using Preprocessors
+## Использование препроцессоров {#Using Preprocessors}
 
-To use a preprocessor like SCSS, Sass, Less or Stylus, install it first.
+Чтобы использовать препроцессор, такой как SCSS, Sass, Less или Stylus, сначала установите его.
 
 ::code-group
 
@@ -167,8 +167,8 @@ npm install -D stylus
 
 ::
 
-The natural place to write your stylesheets is the `assets` directory.
-You can then import your source files in your `app.vue` (or layouts files) using your preprocessor's syntax.
+Обычным местом для написания таблиц стилей является директория `assets`.
+Затем вы можете импортировать исходные файлы в `app.vue` (или файлы лейаутов), используя синтаксис препроцессора.
 
 ```vue [pages/app.vue]
 <style lang="scss">
@@ -176,7 +176,7 @@ You can then import your source files in your `app.vue` (or layouts files) using
 </style>
 ```
 
-Alternatively, you can use the `css` property of your Nuxt configuration.
+В качестве альтернативы вы можете использовать свойство `css` вашей конфигурации Nuxt.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -185,12 +185,12 @@ export default defineNuxtConfig({
 ```
 
 ::tip
-In both cases, the compiled stylesheets will be inlined in the HTML rendered by Nuxt.
+В обоих случаях скомпилированные таблицы стилей будут встроены в HTML-код, отрисованный Nuxt.
 ::
 
-If you need to inject code in pre-processed files, like a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) with color variables, you can do so with the vite [preprocessors options](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions).
+Если вам необходимо внедрить код в предварительно обработанные файлы, такие как [sass партиал](https://sass-lang.com/documentation/at-rules/use#partials) с переменными цветов, вы можете сделать это с помощью [параметров препроцессоров](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions) Vite.
 
-Create some partials in your `assets` directory:
+Создайте несколько фрагментов (partials) в директории `assets`:
 
 ::code-group
 
@@ -206,7 +206,7 @@ $secondary: #E4A79D
 
 ::
 
-Then in your `nuxt.config` :
+Затем в `nuxt.config` :
 
 ::code-group
 
@@ -240,17 +240,17 @@ export default defineNuxtConfig({
 
 ::
 
-Nuxt uses Vite by default. If you wish to use webpack instead, refer to each preprocessor loader [documentation](https://webpack.js.org/loaders/sass-loader).
+Nuxt использует Vite по умолчанию. Если вы хотите использовать вместо этого webpack, обратитесь к [документации](https://webpack.js.org/loaders/sass-loader) загрузчика нужного препроцессора.
 
-## Single File Components (SFC) Styling
+## Стилизация однофайловых компонентов (SFC) {#Single File Components (SFC) Styling}
 
-One of the best things about Vue and SFC is how great it is at naturally dealing with styling. You can directly write CSS or preprocessor code in the style block of your components file, therefore you will have fantastic developer experience without having to use something like CSS-in-JS. However if you wish to use CSS-in-JS, you can find 3rd party libraries and modules that support it, such as [pinceau](https://github.com/Tahul/pinceau).
+Одной из лучших особенностей Vue и SFC является то, насколько они хороши в работе со стилями. Вы можете напрямую писать CSS или код препроцессора в блоке стилей компонента, поэтому у вас будет фантастический опыт разработчика без необходимости использовать что-то вроде CSS-in-JS. Однако, если вы хотите использовать CSS-in-JS, вы можете найти сторонние библиотеки и модули, которые его поддерживают, например [pinceau](https://github.com/Tahul/pinceau).
 
-You can refer to the [Vue docs](https://ru.vuejs.org/api/sfc-css-features.html) for a comprehensive reference about styling components in SFC.
+Подробную справочную информацию о стилизации компонентов в SFC можно найти в [документации Vue](https://ru.vuejs.org/api/sfc-css-features.html).
 
-### Class And Style Bindings
+### Привязки классов и стилей {#Class And Style Bindings}
 
-You can leverage Vue SFC features to style your components with class and style attributes.
+Вы можете использовать возможности Vue SFC для стилизации своих компонентов с помощью атрибутов class и style.
 
 ::code-group
 
@@ -313,12 +313,12 @@ const styleObject = reactive({ color: 'red', fontSize: '13px' })
 
 ::
 
-Refer to the [Vue docs](https://ru.vuejs.org/guide/essentials/class-and-style.html) for more information.
+Более подробную информацию можно найти в [документации Vue](https://ru.vuejs.org/guide/essentials/class-and-style.html).
 
-### Dynamic Styles With `v-bind`
+### Динамические стили с `v-bind` {#Dynamic Styles With `v-bind`}
 
-You can reference JavaScript variable and expression within your style blocks with the v-bind function.
-The binding will be dynamic, meaning that if the variable value changes, the style will be updated.
+Вы можете ссылаться на JavaScript переменные и выражения в блоках стилей с помощью функции v-bind.
+Привязка будет динамической, то есть если значение переменной изменится, стиль будет обновлен.
 
 ```vue
 <script setup lang="ts">
@@ -326,7 +326,7 @@ const color = ref("red")
 </script>
 
 <template>
-  <div class="text">hello</div>
+  <div class="text">привет</div>
 </template>
 
 <style>
@@ -336,13 +336,13 @@ const color = ref("red")
 </style>
 ```
 
-### Scoped Styles
+### Cтили с ограниченной областью видимости {#Scoped Styles}
 
-The scoped attribute allows you to style components in isolation. The styles declared with this attribute will only apply to this component.
+Атрибут scoped позволяет вам стилизовать компоненты изолированно. Стили, объявленные с этим атрибутом, будут применяться только к этому компоненту.
 
 ```vue
 <template>
-  <div class="example">hi</div>
+  <div class="example">хай</div>
 </template>
 
 <style scoped>
@@ -352,13 +352,13 @@ The scoped attribute allows you to style components in isolation. The styles dec
 </style>
 ```
 
-### CSS Modules
+### CSS модули {#CSS Modules}
 
-You can use [CSS Modules](https://github.com/css-modules/css-modules) with the module attribute. Access it with the injected `$style` variable.
+Вы можете использовать [CSS-модули](https://github.com/css-modules/css-modules) с атрибутом module. Доступ к модулю осуществляется с помощью внедренной переменной `$style`.
 
 ```vue
 <template>
-  <p :class="$style.red">This should be red</p>
+  <p :class="$style.red">Это должно быть красным.</p>
 </template>
 
 <style module>
@@ -368,44 +368,44 @@ You can use [CSS Modules](https://github.com/css-modules/css-modules) with the m
 </style>
 ```
 
-### Preprocessors Support
+### Поддержка препроцессоров {#Preprocessors Support}
 
-SFC style blocks support preprocessors syntax. Vite come with built-in support for .scss, .sass, .less, .styl and .stylus files without configuration. You just need to install them first, and they will be available directly in SFC with the lang attribute.
+Блоки стилей SFC поддерживают синтаксис препроцессоров. Vite поставляется со встроенной поддержкой файлов .scss, .sass, .less, .styl и .stylus без конфигурации. Вам просто нужно установить их, и они будут доступны непосредственно в SFC с атрибутом lang.
 
 ::code-group
 
 ```vue [SCSS]
 <style lang="scss">
-  /* Write scss here */
+  /* Пишите scss здесь */
 </style>
 ```
 
 ```vue [Sass]
 <style lang="sass">
-  /* Write sass here */
+  /* Пишите sass здесь */
 </style>
 ```
 
 ```vue [LESS]
 <style lang="less">
-  /* Write less here */
+  /* Пишите less здесь */
 </style>
 ```
 
 ```vue [Stylus]
 <style lang="stylus">
-  /* Write stylus here */
+  /* Пишите stylus здесь */
 </style>
 ```
 
 ::
 
-You can refer to the [Vite CSS docs](https://vitejs.dev/guide/features.html#css) and the [@vitejs/plugin-vue docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
-For webpack users, refer to the [vue loader docs](https://vue-loader.vuejs.org).
+Вы можете обратиться к [документации Vite CSS](https://vitejs.dev/guide/features.html#css) и [документации @vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
+Для пользователей webpack обратитесь к [документации по загрузчику Vue](https://vue-loader.vuejs.org).
 
-## Using PostCSS
+## Использование PostCSS {#Using PostCSS}
 
-Nuxt comes with postcss built-in. You can configure it in your `nuxt.config` file.
+Nuxt поставляется со встроенным postcss. Вы можете настроить его в файле `nuxt.config`.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -418,30 +418,30 @@ export default defineNuxtConfig({
 })
 ```
 
-For proper syntax highlighting in SFC, you can use the postcss lang attribute.
+Для правильной подсветки синтаксиса в SFC можно использовать атрибут lang со значением postcss.
 
 ```vue
 <style lang="postcss">
-  /* Write postcss here */
+  /* Пишите postcss здесь */
 </style>
 ```
 
-By default, Nuxt comes with the following plugins already pre-configured:
+По умолчанию Nuxt поставляется со следующими предварительно настроенными плагинами:
 
-- [postcss-import](https://github.com/postcss/postcss-import): Improves the `@import` rule
-- [postcss-url](https://github.com/postcss/postcss-url): Transforms `url()` statements
-- [autoprefixer](https://github.com/postcss/autoprefixer): Automatically adds vendor prefixes
-- [cssnano](https://cssnano.github.io/cssnano): Minification and purge
+- [postcss-import](https://github.com/postcss/postcss-import): Улучшает правило `@import`
+- [postcss-url](https://github.com/postcss/postcss-url): Преобразует выражения `url()`
+- [autoprefixer](https://github.com/postcss/autoprefixer): Автоматически добавляет вендорные префиксы
+- [cssnano](https://cssnano.github.io/cssnano): Минифицирует и очищает
 
-## Leveraging Layouts For Multiple Styles
+## Использование лейаутов для нескольких стилей {#Leveraging Layouts For Multiple Styles}
 
-If you need to style different parts of your application completely differently, you can use layouts.
-Use different styles for different layouts.
+Если нужно стилизовать разные части приложения совершенно по-разному, вы можете использовать лейауты.
+Используйте разные стили для разных лейаутов.
 
 ```vue
 <template>
   <div class="default-layout">
-    <h1>Default Layout</h1>
+    <h1>Лейаут по умолчанию</h1>
     <slot />
   </div>
 </template>
@@ -455,70 +455,69 @@ Use different styles for different layouts.
 
 :read-more{to="/docs/guide/directory-structure/layouts"}
 
-## Third Party Libraries And Modules
+## Сторонние библиотеки и модули {#Third Party Libraries And Modules}
 
-Nuxt isn't opinionated when it comes to styling and provides you with a wide variety of options. You can use any styling tool that you want, such as popular libraries like [UnoCSS](https://unocss.dev) or [Tailwind CSS](https://tailwindcss.com).
+Nuxt не отличается категоричностью в вопросе стилизации, и предоставляет вам широкий спектр опций. Вы можете использовать любой инструмент для стилизации, который вам нужен, например, популярные библиотеки, такие как [UnoCSS](https://unocss.dev) или [Tailwind CSS](https://tailwindcss.com).
 
-The community and the Nuxt team have developed plenty of Nuxt modules to make the integration easier.
-You can discover them on the [modules section](/modules) of the website.
-Here are a few modules to help you get started:
+Сообщество и команда Nuxt разработали множество модулей, которые упрощают интеграцию.
+Вы можете ознакомиться с ними в разделе [модули](/modules) веб-сайта.
+Вот несколько модулей, которые помогут вам начать работу:
 
-- [UnoCSS](/modules/unocss): Instant on-demand atomic CSS engine
-- [Tailwind CSS](/modules/tailwindcss): Utility-first CSS framework
-- [Fontaine](https://github.com/nuxt-modules/fontaine): Font metric fallback
-- [Pinceau](https://github.com/Tahul/pinceau): Adaptable styling framework
-- [Nuxt UI](https://ui.nuxt.com): A UI Library for Modern Web Apps
-- [Panda CSS](https://panda-css.com/docs/installation/nuxt): CSS-in-JS engine that generates atomic CSS at build time
+- [UnoCSS](/modules/uno css): Атомарный CSS-движок
+- [Tailwind CSS](/modules/tailwindcss): CSS-фреймворк, основанный на утилитах
+- [Fontaine](https://github.com/nuxt-modules/fontaine): реализация fallback метрики шрифтов
+- [Pinceau](https://github.com/Tahul/pinceau): Адаптивный фреймворк для стилизации
+- [Nuxt UI](https://ui.nuxt.com): Библиотека пользовательского интерфейса для современных веб-приложений
+- [Panda CSS](https://panda-css.com/docs/installation/nuxt): движок CSS-in-JS, который генерирует атомарный CSS во время сборки
 
-Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/guide/directory-structure/plugins) and/or [make your own module](/docs/guide/going-further/modules). Share them with the [community](/modules) if you do!
+Модули Nuxt предоставляют вам хороший опыт разработки из коробки, но помните, что если ваш любимый инструмент не имеет модуля, это не значит, что вы не можете использовать его с Nuxt! Вы можете настроить его самостоятельно для своего проекта. В зависимости от инструмента вам может потребоваться использовать [плагин Nuxt](/docs/guide/directory-structure/plugins) и/или [создать свой собственный модуль](/docs/guide/going-further/modules). Поделитесь ими с [сообществом](/modules), если вы это сделаете!
 
-### Easily Load Webfonts
+### Простая загрузка веб-шрифтов {#Easily Load Webfonts}
 
-You can use [the Nuxt Google Fonts module](https://github.com/nuxt-modules/google-fonts) to load Google Fonts.
+Вы можете использовать [модуль Nuxt Google Fonts](https://github.com/nuxt-modules/google-fonts) для загрузки Google Fonts.
 
-If you are using [UnoCSS](https://unocss.dev/integrations/nuxt), note that it comes with a [web fonts presets](https://unocss.dev/presets/web-fonts) to conveniently load fonts from common providers, including Google Fonts and more.
+Если вы используете [UnoCSS](https://unocss.dev/integrations/nuxt), обратите внимание, что он поставляется с [предустановками веб-шрифтов](https://unocss.dev/presets/web-fonts) для удобной загрузки шрифтов от распространенных поставщиков, включая Google Fonts и другие.
 
-## Advanced
+## Продвинутый уровень {#Advanced}
 
-### Transitions
+### Переходы {#Transitions}
 
-Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/getting-started/transitions#view-transitions-api-experimental).
+Nuxt поставляется с тем же компонентом `<Transition>`, что и Vue, а также поддерживает экспериментальный [View Transitions API](/docs/getting-started/transitions#view-transitions-api-experimental).
 
 :read-more{to="/docs/getting-started/transitions"}
 
-### Font Advanced Optimization
+### Продвинутая оптимизация шрифтов {#Font Advanced Optimization}
 
-We would recommend using [Fontaine](https://github.com/nuxt-modules/fontaine) to reduce your [CLS](https://web.dev/cls). If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime.
+Мы рекомендуем использовать [Fontaine](https://github.com/nuxt-modules/fontaine) для сокращения вашего [CLS](https://web.dev/cls). Если вам нужно что-то более продвинутое, рассмотрите возможность создания модуля Nuxt для расширения процесса сборки или рантайма Nuxt.
 
 ::tip
-Always remember to take advantage of the various tools and techniques available in the Web ecosystem at large to make styling your application easier and more efficient. Whether you're using native CSS, a preprocessor, postcss, a UI library or a module, Nuxt has got you covered. Happy styling!
+Всегда помните о необходимости использовать различные инструменты и методы, доступные в экосистеме Web в целом, чтобы сделать стилизацию вашего приложения проще и эффективнее. Используете ли вы собственный CSS, препроцессор, postcss, библиотеку пользовательского интерфейса или модуль, Nuxt поможет вам. Счастливой стилизации!
 ::
 
-### LCP Advanced optimizations
+### Продвинутая оптимизация LCP {#LCP Advanced optimizations}
 
-You can do the following to speed-up the download of your global CSS files:
+Вы можете сделать следующее, чтобы ускорить загрузку ваших глобальных CSS-файлов:
 
-- Use a CDN so the files are physically closer to your users
-- Compress your assets, ideally using Brotli
-- Use HTTP2/HTTP3 for delivery
-- Host your assets on the same domain (do not use a different subdomain)
+- Используйте CDN, чтобы файлы были физически ближе к вашим пользователям
+- Сжимайте ваши ассеты, в идеале с помощью Brotli
+- Используйте HTTP2/HTTP3 для доставки
+- Размещайте ваши ассеты на том же домене (не используйте другой поддомен)
 
-Most of these things should be done for you automatically if you're using modern platforms like Cloudflare, Netlify or Vercel.
-You can find an LCP optimization guide on [web.dev](https://web.dev/optimize-lcp).
+Большинство из этих вещей могут быть сделаны для вас автоматически, если вы используете современные платформы, такие как Cloudflare, Netlify или Vercel.
+Вы можете найти руководство по оптимизации LCP на [web.dev](https://web.dev/optimize-lcp).
 
-If all of your CSS is inlined by Nuxt, you can (experimentally) completely stop external CSS files from being referenced in your rendered HTML.
-You can achieve that with a hook, that you can place in a module, or in your Nuxt configuration file.
+Если весь ваш CSS встроен инлайн с помощью Nuxt, вы можете (экспериментально) полностью запретить внешние CSS файлы в отрисованном HTML. Вы можете добиться этого с помощью хука, который вы можете поместить в модуль или в файл конфигурации Nuxt.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   hooks: {
     'build:manifest': (manifest) => {
-      // find the app entry, css list
+      // ищем список файлов css в точке входа в приложение
       const css = manifest['node_modules/nuxt/dist/app/entry.js']?.css
       if (css) {
-        // start from the end of the array and go to the beginning
+        // начинаем с конца массива и двигаемся к его началу
         for (let i = css.length - 1; i >= 0; i--) {
-          // if it starts with 'entry', remove it from the list
+          // если css начинается с «entry», удаляем его из списка
           if (css[i].startsWith('entry')) css.splice(i, 1)
         }
       }

From 18c5c1dacb45133fd3a938b302a01c06e1ded7ef Mon Sep 17 00:00:00 2001
From: Evgeniy Gromin <evgeniy.gromin@gmail.com>
Date: Tue, 11 Jun 2024 09:25:08 +0400
Subject: [PATCH 2/9] fix(docs): fix link fragments in 4.styling.md (#28)

Signed-off-by: Evgeniy Gromin <evgeniy.gromin@gmail.com>
---
 docs/1.getting-started/4.styling.md | 46 ++++++++++++++---------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index f3f32661448a..5e4542107733 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -7,11 +7,11 @@ navigation.icon: i-ph-palette-duotone
 Nuxt очень гибок в плане стилизации. Пишите собственные стили или ссылайтесь на локальные и внешние таблицы стилей.
 Вы можете использовать препроцессоры CSS, CSS фреймворки, UI библиотеки и модули Nuxt для стилизации приложения.
 
-## Локальные таблицы стилей {#Local Stylesheets}
+## Локальные таблицы стилей {#local-stylesheets}
 
 Если вы пишете локальные таблицы стилей, стандартным местом для их размещения является [директория `assets/`](/docs/guide/directory-structure/assets).
 
-### Импорт внутри компонентов {#Importing Within Components}
+### Импорт внутри компонентов {#importing-within-components}
 
 Вы можете импортировать таблицы стилей напрямую в свои страницы, лейауты и компоненты.
 Вы можете использовать javascript-импорт, или [css оператор `@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import).
@@ -34,7 +34,7 @@ import('~/assets/css/first.css')
 Таблицы стилей будут встроены в HTML-код, отрисованный Nuxt.
 ::
 
-### Свойство CSS {#The CSS Property}
+### Свойство CSS {#the-css-property}
 
 Вы также можете использовать свойство `css` в конфигурации Nuxt.
 Стандартным местом для ваших таблиц стилей является [директория `assets/`](/docs/guide/directory-structure/assets). Вы можете указать путь к файлу стилей, и Nuxt включит его во все страницы приложения.
@@ -49,7 +49,7 @@ export default defineNuxtConfig({
 Таблицы стилей будут встроены в HTML-код, отрисованный Nuxt, внедрены глобально и представлены на всех страницах.
 ::
 
-### Работа со шрифтами {#Working With Fonts}
+### Работа со шрифтами {#working-with-fonts}
 
 Поместите локальные файлы шрифтов в директорию `~/public/`, например, в `~/public/fonts`. Вы можете ссылаться на них в своих таблицах стилей с помощью `url()`.
 
@@ -73,7 +73,7 @@ h1 {
 </style>
 ```
 
-### Таблицы стилей, распространяемые через NPM {#Stylesheets Distributed Through NPM}
+### Таблицы стилей, распространяемые через NPM {#stylesheets-distributed-through-npm}
 
 Вы также можете ссылаться на таблицы стилей, распространяемые через npm. Давайте в качестве примера воспользуемся популярной библиотекой `animate.css`.
 
@@ -101,7 +101,7 @@ export default defineNuxtConfig({
 })
 ```
 
-## Внешние таблицы стилей {#External Stylesheets}
+## Внешние таблицы стилей {#external-stylesheets}
 
 Вы можете включить внешние таблицы стилей в приложение, добавив элемент link в раздел head файла nuxt.config. Вы можете достичь этого результата, используя разные методы. Обратите внимание, что локальные таблицы стилей также могут быть включены таким образом.
 
@@ -117,7 +117,7 @@ export default defineNuxtConfig({
 })
 ```
 
-### Динамическое добавление таблиц стилей {#Dynamically Adding Stylesheets}
+### Динамическое добавление таблиц стилей {#dynamically-adding-stylesheets}
 
 Вы можете использовать композабл useHead для динамической установки значений в элементе head в вашем коде.
 
@@ -131,7 +131,7 @@ useHead({
 
 Nuxt использует `unhead` под капотом, и вы можете обратиться к его полной документации [здесь](https://unhead.unjs.io).
 
-### Изменение отрендеренного head с помощью плагина Nitro {#Modifying The Rendered Head With A Nitro Plugin}
+### Изменение отрендеренного head с помощью плагина Nitro {#modifying-the-rendered-head-with-a-nitro-plugin}
 
 Если нужен более расширенный контроль, вы можете перехватить HTML-код с помощью хука и изменить head программно.
 
@@ -147,7 +147,7 @@ export default defineNitroPlugin((nitro) => {
 
 Внешние таблицы стилей являются блокирующими рендеринг ресурсами: они должны быть загружены и обработаны до того, как браузер отобразит страницу. Веб-страницы, содержащие неоправданно большие стили, требуют больше времени для рендеринга. Подробнее об этом можно прочитать на [web.dev](https://web.dev/defer-non-critical-css).
 
-## Использование препроцессоров {#Using Preprocessors}
+## Использование препроцессоров {#using-preprocessors}
 
 Чтобы использовать препроцессор, такой как SCSS, Sass, Less или Stylus, сначала установите его.
 
@@ -242,13 +242,13 @@ export default defineNuxtConfig({
 
 Nuxt использует Vite по умолчанию. Если вы хотите использовать вместо этого webpack, обратитесь к [документации](https://webpack.js.org/loaders/sass-loader) загрузчика нужного препроцессора.
 
-## Стилизация однофайловых компонентов (SFC) {#Single File Components (SFC) Styling}
+## Стилизация однофайловых компонентов (SFC) {#single-file-components-sfc-styling}
 
 Одной из лучших особенностей Vue и SFC является то, насколько они хороши в работе со стилями. Вы можете напрямую писать CSS или код препроцессора в блоке стилей компонента, поэтому у вас будет фантастический опыт разработчика без необходимости использовать что-то вроде CSS-in-JS. Однако, если вы хотите использовать CSS-in-JS, вы можете найти сторонние библиотеки и модули, которые его поддерживают, например [pinceau](https://github.com/Tahul/pinceau).
 
 Подробную справочную информацию о стилизации компонентов в SFC можно найти в [документации Vue](https://ru.vuejs.org/api/sfc-css-features.html).
 
-### Привязки классов и стилей {#Class And Style Bindings}
+### Привязки классов и стилей {#class-and-style-bindings}
 
 Вы можете использовать возможности Vue SFC для стилизации своих компонентов с помощью атрибутов class и style.
 
@@ -315,7 +315,7 @@ const styleObject = reactive({ color: 'red', fontSize: '13px' })
 
 Более подробную информацию можно найти в [документации Vue](https://ru.vuejs.org/guide/essentials/class-and-style.html).
 
-### Динамические стили с `v-bind` {#Dynamic Styles With `v-bind`}
+### Динамические стили с `v-bind` {#dynamic-styles-with-v-bind}
 
 Вы можете ссылаться на JavaScript переменные и выражения в блоках стилей с помощью функции v-bind.
 Привязка будет динамической, то есть если значение переменной изменится, стиль будет обновлен.
@@ -336,7 +336,7 @@ const color = ref("red")
 </style>
 ```
 
-### Cтили с ограниченной областью видимости {#Scoped Styles}
+### Cтили с ограниченной областью видимости {#scoped-styles}
 
 Атрибут scoped позволяет вам стилизовать компоненты изолированно. Стили, объявленные с этим атрибутом, будут применяться только к этому компоненту.
 
@@ -352,7 +352,7 @@ const color = ref("red")
 </style>
 ```
 
-### CSS модули {#CSS Modules}
+### CSS модули {#css-modules}
 
 Вы можете использовать [CSS-модули](https://github.com/css-modules/css-modules) с атрибутом module. Доступ к модулю осуществляется с помощью внедренной переменной `$style`.
 
@@ -368,7 +368,7 @@ const color = ref("red")
 </style>
 ```
 
-### Поддержка препроцессоров {#Preprocessors Support}
+### Поддержка препроцессоров {#preprocessors-support}
 
 Блоки стилей SFC поддерживают синтаксис препроцессоров. Vite поставляется со встроенной поддержкой файлов .scss, .sass, .less, .styl и .stylus без конфигурации. Вам просто нужно установить их, и они будут доступны непосредственно в SFC с атрибутом lang.
 
@@ -403,7 +403,7 @@ const color = ref("red")
 Вы можете обратиться к [документации Vite CSS](https://vitejs.dev/guide/features.html#css) и [документации @vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
 Для пользователей webpack обратитесь к [документации по загрузчику Vue](https://vue-loader.vuejs.org).
 
-## Использование PostCSS {#Using PostCSS}
+## Использование PostCSS {#using-postcss}
 
 Nuxt поставляется со встроенным postcss. Вы можете настроить его в файле `nuxt.config`.
 
@@ -433,7 +433,7 @@ export default defineNuxtConfig({
 - [autoprefixer](https://github.com/postcss/autoprefixer): Автоматически добавляет вендорные префиксы
 - [cssnano](https://cssnano.github.io/cssnano): Минифицирует и очищает
 
-## Использование лейаутов для нескольких стилей {#Leveraging Layouts For Multiple Styles}
+## Использование лейаутов для нескольких стилей {#leveraging-layouts-for-multiple-styles}
 
 Если нужно стилизовать разные части приложения совершенно по-разному, вы можете использовать лейауты.
 Используйте разные стили для разных лейаутов.
@@ -455,7 +455,7 @@ export default defineNuxtConfig({
 
 :read-more{to="/docs/guide/directory-structure/layouts"}
 
-## Сторонние библиотеки и модули {#Third Party Libraries And Modules}
+## Сторонние библиотеки и модули {#third-party-libraries-and-modules}
 
 Nuxt не отличается категоричностью в вопросе стилизации, и предоставляет вам широкий спектр опций. Вы можете использовать любой инструмент для стилизации, который вам нужен, например, популярные библиотеки, такие как [UnoCSS](https://unocss.dev) или [Tailwind CSS](https://tailwindcss.com).
 
@@ -472,21 +472,21 @@ Nuxt не отличается категоричностью в вопросе
 
 Модули Nuxt предоставляют вам хороший опыт разработки из коробки, но помните, что если ваш любимый инструмент не имеет модуля, это не значит, что вы не можете использовать его с Nuxt! Вы можете настроить его самостоятельно для своего проекта. В зависимости от инструмента вам может потребоваться использовать [плагин Nuxt](/docs/guide/directory-structure/plugins) и/или [создать свой собственный модуль](/docs/guide/going-further/modules). Поделитесь ими с [сообществом](/modules), если вы это сделаете!
 
-### Простая загрузка веб-шрифтов {#Easily Load Webfonts}
+### Простая загрузка веб-шрифтов {#easily-load-webfonts}
 
 Вы можете использовать [модуль Nuxt Google Fonts](https://github.com/nuxt-modules/google-fonts) для загрузки Google Fonts.
 
 Если вы используете [UnoCSS](https://unocss.dev/integrations/nuxt), обратите внимание, что он поставляется с [предустановками веб-шрифтов](https://unocss.dev/presets/web-fonts) для удобной загрузки шрифтов от распространенных поставщиков, включая Google Fonts и другие.
 
-## Продвинутый уровень {#Advanced}
+## Продвинутый уровень {#advanced}
 
-### Переходы {#Transitions}
+### Переходы {#transitions}
 
 Nuxt поставляется с тем же компонентом `<Transition>`, что и Vue, а также поддерживает экспериментальный [View Transitions API](/docs/getting-started/transitions#view-transitions-api-experimental).
 
 :read-more{to="/docs/getting-started/transitions"}
 
-### Продвинутая оптимизация шрифтов {#Font Advanced Optimization}
+### Продвинутая оптимизация шрифтов {#font-advanced-optimization}
 
 Мы рекомендуем использовать [Fontaine](https://github.com/nuxt-modules/fontaine) для сокращения вашего [CLS](https://web.dev/cls). Если вам нужно что-то более продвинутое, рассмотрите возможность создания модуля Nuxt для расширения процесса сборки или рантайма Nuxt.
 
@@ -494,7 +494,7 @@ Nuxt поставляется с тем же компонентом `<Transition
 Всегда помните о необходимости использовать различные инструменты и методы, доступные в экосистеме Web в целом, чтобы сделать стилизацию вашего приложения проще и эффективнее. Используете ли вы собственный CSS, препроцессор, postcss, библиотеку пользовательского интерфейса или модуль, Nuxt поможет вам. Счастливой стилизации!
 ::
 
-### Продвинутая оптимизация LCP {#LCP Advanced optimizations}
+### Продвинутая оптимизация LCP {#lcp-advanced-optimizations}
 
 Вы можете сделать следующее, чтобы ускорить загрузку ваших глобальных CSS-файлов:
 

From f03b4924bdb6720557ddb9ca50617aaaa58e64ce Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Tue, 11 Jun 2024 18:39:50 +0600
Subject: [PATCH 3/9] Update docs/1.getting-started/4.styling.md

Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com>
---
 docs/1.getting-started/4.styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index 5e4542107733..ecb52c1bf45c 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -465,7 +465,7 @@ Nuxt не отличается категоричностью в вопросе
 
 - [UnoCSS](/modules/uno css): Атомарный CSS-движок
 - [Tailwind CSS](/modules/tailwindcss): CSS-фреймворк, основанный на утилитах
-- [Fontaine](https://github.com/nuxt-modules/fontaine): реализация fallback метрики шрифтов
+- [Fontaine](https://github.com/nuxt-modules/fontaine): реализация fallback-метрики шрифтов
 - [Pinceau](https://github.com/Tahul/pinceau): Адаптивный фреймворк для стилизации
 - [Nuxt UI](https://ui.nuxt.com): Библиотека пользовательского интерфейса для современных веб-приложений
 - [Panda CSS](https://panda-css.com/docs/installation/nuxt): движок CSS-in-JS, который генерирует атомарный CSS во время сборки

From 10193b74c56d9cebae405a9838ff687bbed5ba3a Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Tue, 11 Jun 2024 18:39:56 +0600
Subject: [PATCH 4/9] Update docs/1.getting-started/4.styling.md

Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com>
---
 docs/1.getting-started/4.styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index ecb52c1bf45c..d0a12fbbc2a7 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -1,6 +1,6 @@
 ---
 title: 'Стилизация'
-description: 'Узнайте как стилизовать Nuxt приложение.'
+description: 'Узнайте, как стилизовать Nuxt-приложение.'
 navigation.icon: i-ph-palette-duotone
 ---
 

From 3fa0b48900e46e446acd39d2080a6f7ad3f8e559 Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Tue, 11 Jun 2024 18:40:02 +0600
Subject: [PATCH 5/9] Update docs/1.getting-started/4.styling.md

Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com>
---
 docs/1.getting-started/4.styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index d0a12fbbc2a7..b8cad986bd68 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -5,7 +5,7 @@ navigation.icon: i-ph-palette-duotone
 ---
 
 Nuxt очень гибок в плане стилизации. Пишите собственные стили или ссылайтесь на локальные и внешние таблицы стилей.
-Вы можете использовать препроцессоры CSS, CSS фреймворки, UI библиотеки и модули Nuxt для стилизации приложения.
+Вы можете использовать препроцессоры CSS, CSS-фреймворки, UI-библиотеки и модули Nuxt для стилизации приложения.
 
 ## Локальные таблицы стилей {#local-stylesheets}
 

From 277785af41827a7f6c239b2a2084dc716ac089e1 Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Tue, 11 Jun 2024 18:40:09 +0600
Subject: [PATCH 6/9] Update docs/1.getting-started/4.styling.md

Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com>
---
 docs/1.getting-started/4.styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index b8cad986bd68..3c55e6e3864d 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -188,7 +188,7 @@ export default defineNuxtConfig({
 В обоих случаях скомпилированные таблицы стилей будут встроены в HTML-код, отрисованный Nuxt.
 ::
 
-Если вам необходимо внедрить код в предварительно обработанные файлы, такие как [sass партиал](https://sass-lang.com/documentation/at-rules/use#partials) с переменными цветов, вы можете сделать это с помощью [параметров препроцессоров](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions) Vite.
+Если вам необходимо внедрить код в предварительно обработанные файлы, такие как [sass-фрагменты](https://sass-lang.com/documentation/at-rules/use#partials) с переменными цветов, вы можете сделать это с помощью [параметров препроцессоров](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions) Vite.
 
 Создайте несколько фрагментов (partials) в директории `assets`:
 

From 49db1fa241b4b82c0a10794711d5fc73dee26105 Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Tue, 11 Jun 2024 18:40:15 +0600
Subject: [PATCH 7/9] Update docs/1.getting-started/4.styling.md

Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com>
---
 docs/1.getting-started/4.styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index 3c55e6e3864d..43d31b5b991f 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -14,7 +14,7 @@ Nuxt очень гибок в плане стилизации. Пишите со
 ### Импорт внутри компонентов {#importing-within-components}
 
 Вы можете импортировать таблицы стилей напрямую в свои страницы, лейауты и компоненты.
-Вы можете использовать javascript-импорт, или [css оператор `@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import).
+Вы можете использовать javascript-импорт или [css-выражение `@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import).
 
 ```vue [pages/index.vue]
 <script>

From 7f5144032ab9461d28f28af92e9608aab741337f Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Tue, 11 Jun 2024 18:40:19 +0600
Subject: [PATCH 8/9] Update docs/1.getting-started/4.styling.md

Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com>
---
 docs/1.getting-started/4.styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index 43d31b5b991f..4cb65d5c4d98 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -352,7 +352,7 @@ const color = ref("red")
 </style>
 ```
 
-### CSS модули {#css-modules}
+### CSS-модули {#css-modules}
 
 Вы можете использовать [CSS-модули](https://github.com/css-modules/css-modules) с атрибутом module. Доступ к модулю осуществляется с помощью внедренной переменной `$style`.
 

From 9555257e5aff638b24ff49de84e283dd9587f501 Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Tue, 11 Jun 2024 18:40:24 +0600
Subject: [PATCH 9/9] Update docs/1.getting-started/4.styling.md

Co-authored-by: Artem <90565172+Hekikai@users.noreply.github.com>
---
 docs/1.getting-started/4.styling.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index 4cb65d5c4d98..24ff83389813 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -463,7 +463,7 @@ Nuxt не отличается категоричностью в вопросе
 Вы можете ознакомиться с ними в разделе [модули](/modules) веб-сайта.
 Вот несколько модулей, которые помогут вам начать работу:
 
-- [UnoCSS](/modules/uno css): Атомарный CSS-движок
+- [UnoCSS](/modules/unocss): Атомарный CSS-движок
 - [Tailwind CSS](/modules/tailwindcss): CSS-фреймворк, основанный на утилитах
 - [Fontaine](https://github.com/nuxt-modules/fontaine): реализация fallback-метрики шрифтов
 - [Pinceau](https://github.com/Tahul/pinceau): Адаптивный фреймворк для стилизации