vuejs-translations · matrunchyk · Sep 19, 2023 · Sep 18, 2023 · Sep 19, 2023 · Sep 19, 2023
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -57,7 +57,7 @@ const nav: ThemeConfig['nav'] = [
  text: 'Офіційні бібліотеки',
  items: [
  { text: 'Vue Router', link: 'https://router.vuejs.org/' },
- { text: 'Pinia', link: 'https://pinia.vuejs.org/' },
+ { text: 'Pinia', link: 'https://pinia-ua.netlify.app/uk/' },
  { text: 'Tooling Guide', link: '/guide/scaling-up/tooling.html' }
  ]
  },
@@ -663,6 +663,11 @@ export default defineConfigWithTheme<ThemeConfig>({
  text: 'Português',
  repo: 'https://github.com/vuejs-translations/docs-pt'
  },
+ {
+ link: 'https://bn.vuejs.org',
+ text: 'বাংলা',
+ repo: 'https://github.com/vuejs-translations/docs-bn'
+ },
  {
  link: '/translations/',
  text: 'Допоможіть нам перекласти!',

diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js
@@ -8,6 +8,6 @@
  restore('vue-docs-prefer-composition', 'prefer-composition', true)
  restore('vue-docs-prefer-sfc', 'prefer-sfc', true)
 
- // window.__VUE_BANNER_ID__ = ''
- // restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
+ window.__VUE_BANNER_ID__ = 'vt2023'
+ restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed')
 })()
diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue
@@ -34,16 +34,30 @@ function dismiss() {
 <!-- -webkit-linear-gradient(315deg, #42d392 25%, #647eff) -->
 <template>
  <div class="banner" v-if="open">
- <a target="_blank"></a>
+ <p class="vt-banner-text">
+ <span class="vt-text-primary">VueConf Торонто</span>
+ <span class="vt-tagline"> - Приєднуйтесь до головної конференції Vue.js</span>
+ | 9-10 листопада 2023 <span class="vt-place"> - Торонто, Канада</span>
+ <a
+ target="_blank"
+ class="vt-primary-action"
+ href="https://vuetoronto.com?utm_source=vuejs&utm_content=top_banner"
+ >Реєструйся <span class="vt-time-now">Вже</span></a
+ >
+ </p>
  <button @click="dismiss">
  <VTIconPlus class="close" />
  </button>
+ <p class="vt-banner-text vt-coupon">
+ <span class="vt-text-primary">Використовуй код</span> VUEJS
+ <span class="vt-text-primary">і отримай знижку 15%</span>
+ </p>
  </div>
 </template>
 
 <style>
 html:not(.banner-dismissed) {
- --vt-banner-height: 30px;
+ --vt-banner-height: 60px;
 }
 </style>
 
@@ -62,12 +76,10 @@ html:not(.banner-dismissed) {
  font-weight: 600;
  color: #fff;
  background-color: var(--vt-c-green);
- background: linear-gradient(
- 90deg,
- rgba(66, 184, 131, 1) 0%,
- rgba(39, 179, 137, 1) 19%,
- rgba(100, 126, 255, 1) 100%
- );
+ background: #11252b;
+ display: flex;
+ justify-content: center;
+ align-items: center;
 }
 
 @media (min-width: 1280px) {
@@ -87,7 +99,7 @@ button {
  position: absolute;
  right: 0;
  top: 0;
- padding: 5px;
+ padding: 20px 10px;
 }
 
 .close {
@@ -96,10 +108,59 @@ button {
  fill: #fff;
  transform: rotate(45deg);
 }
-/*
-@media (max-width: 720px) {
- a > span {
+
+.vt-banner-text {
+ color: #fff;
+ font-size: 16px;
+}
+
+.vt-text-primary {
+ color: #75c05e;
+}
+
+.vt-primary-action {
+ background: #75c05e;
+ color: #121c1a;
+ padding: 8px 15px;
+ border-radius: 5px;
+ font-size: 14px;
+ text-decoration: none;
+ margin: 0 20px;
+ font-weight: bold;
+}
+.vt-primary-action:hover {
+ text-decoration: none;
+ background: #5a9f45;
+}
+
+@media (max-width: 1280px) {
+ .banner .vt-banner-text {
+ font-size: 14px;
+ }
+ .vt-tagline {
+ display: none;
+ }
+}
+
+@media (max-width: 780px) {
+ .vt-tagline {
+ display: none;
+ }
+ .vt-coupon {
+ display: none;
+ }
+ .vt-primary-action {
+ margin: 0 10px;
+ padding: 7px 10px;
+ }
+ .vt-time-now {
+ display: none;
+ }
+}
+
+@media (max-width: 560px) {
+ .vt-place {
  display: none;
  }
-} */
+}
 </style>
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
@@ -9,14 +9,14 @@ import {
 } from './components/preferences'
 import SponsorsAside from './components/SponsorsAside.vue'
 import VueSchoolLink from './components/VueSchoolLink.vue'
-// import Banner from './components/Banner.vue'
+import Banner from './components/Banner.vue'
 // import TextAd from './components/TextAd.vue'
 
 export default Object.assign({}, VPTheme, {
  Layout: () => {
  // @ts-ignore
  return h(VPTheme.Layout, null, {
- // banner: () => h(Banner),
+ banner: () => h(Banner),
  'sidebar-top': () => h(PreferenceSwitch),
  'aside-mid': () => h(SponsorsAside)
  })

diff --git a/src/api/built-in-special-attributes.md b/src/api/built-in-special-attributes.md
@@ -95,7 +95,7 @@
 
  Коли атрибут `is` використовується в рідному елементі HTML, він інтерпретуватиметься як [користувацький вбудований елемент](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), це є рідною можливістю вебплатформи.
 
- Але є випадки, коли може знадобитися, щоб Vue замінив рідний елемент на компонент Vue, як пояснюється у [застереженні щодо аналізу шаблону DOM](/guide/essentials/component-basics#dom-template-parsing-caveats). У такому разі можна додати до значення атрибуту `is` префікс `vue:` щоб Vue замість елемента відрендерив компонент Vue:
+ Але є випадки, коли може знадобитися, щоб Vue замінив рідний елемент на компонент Vue, як пояснюється у [застереженні щодо аналізу шаблону DOM](/guide/essentials/component-basics#in-dom-template-parsing-caveats). У такому разі можна додати до значення атрибуту `is` префікс `vue:` щоб Vue замість елемента відрендерив компонент Vue:
 
  ```vue-html
  <table>

diff --git a/src/examples/ExampleRepl.vue b/src/examples/ExampleRepl.vue
@@ -2,7 +2,7 @@
 import { Repl, ReplStore } from '@vue/repl'
 import '@vue/repl/style.css'
 import { data } from './examples.data'
-import { inject, watchEffect, version, Ref, onMounted, ref } from 'vue'
+import { inject, watchEffect, version, Ref, onMounted, ref, onUnmounted } from 'vue'
 import {
  resolveSFCExample,
  resolveNoBuildExample,
@@ -49,6 +49,10 @@ onMounted(() => {
  }
  set()
  window.addEventListener('resize', set)
+
+ onUnmounted(() => {
+ window.removeEventListener('resize', set)
+ })
 })
 </script>
 

diff --git a/src/glossary/index.md b/src/glossary/index.md
@@ -168,7 +168,7 @@ Typically, an in-DOM template starts off as HTML markup written directly in the
 
 For more details see:
 - [Guide - Creating an Application - In-DOM Root Component Template](/guide/essentials/application.html#in-dom-root-component-template)
-- [Guide - Component Basics - DOM Template Parsing Caveats](/guide/essentials/component-basics.html#dom-template-parsing-caveats)
+- [Guide - Component Basics - in-DOM Template Parsing Caveats](/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)
 - [Options: Rendering - template](/api/options-rendering.html#template)
 
 ## inject {#inject}

diff --git a/src/guide/built-ins/keep-alive.md b/src/guide/built-ins/keep-alive.md
@@ -47,7 +47,7 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 </div>
 
 :::tip
-У разі використання в [шаблонах DOM](/guide/essentials/component-basics#dom-template-parsing-caveats) на нього слід посилатися як `<keep-alive>`.
+У разі використання в [шаблонах DOM](/guide/essentials/component-basics#in-dom-template-parsing-caveats) на нього слід посилатися як `<keep-alive>`.
 :::
 
 ## Включити / Виключити {#include-exclude}

diff --git a/src/guide/built-ins/transition-group.md b/src/guide/built-ins/transition-group.md
@@ -21,7 +21,7 @@ import ListStagger from './transition-demos/ListStagger.vue'
 - Класи переходу CSS будуть застосовані до окремих елементів у списку, а **не** до самої групи/контейнера.
 
 :::tip
-У разі використання в [шаблонах DOM](/guide/essentials/component-basics#dom-template-parsing-caveats) на нього слід посилатися як `<transition-group>`.
+У разі використання в [шаблонах DOM](/guide/essentials/component-basics#in-dom-template-parsing-caveats) на нього слід посилатися як `<transition-group>`.
 :::
 
 ## Вхід / вихід з переходів {#enter-leave-transitions}

diff --git a/src/guide/components/props.md b/src/guide/components/props.md
@@ -148,7 +148,7 @@ export default {
 <span>{{ greetingMessage }}</span>
 ```
 
-Технічно ви також можете використовувати camelCase під час передачі реквізитів дочірньому компоненту (за винятком [шаблонів DOM](/guide/essentials/component-basics.html#dom-template-parsing-caveats)). Однак, угода передбачає використання kebab-case у всіх випадках для узгодження з атрибутами HTML:
+Технічно ви також можете використовувати camelCase під час передачі реквізитів дочірньому компоненту (за винятком [шаблонів DOM](/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)). Однак, угода передбачає використання kebab-case у всіх випадках для узгодження з атрибутами HTML:
 
 ```vue-html
 <MyComponent greeting-message="привіт" />

diff --git a/src/guide/components/registration.md b/src/guide/components/registration.md
@@ -136,6 +136,6 @@ export default {
 
 2. `<PascalCase />` робить більш очевидним, що це компонент Vue, а не рідний елемент HTML у шаблонах. Він також відрізняє компоненти Vue від спеціальних елементів (веб-компонентів).
 
-Це рекомендований стиль під час роботи з SFC або строковими шаблонами. Однак, як зазначено в [Застереженнях щодо парсингу шаблонів DOM](/guide/essentials/component-basics#dom-template-parsing-caveats), теги PascalCase не можна використовувати в шаблонах DOM.
+Це рекомендований стиль під час роботи з SFC або строковими шаблонами. Однак, як зазначено в [Застереженнях щодо парсингу шаблонів DOM](/guide/essentials/component-basics#in-dom-template-parsing-caveats), теги PascalCase не можна використовувати в шаблонах DOM.
 
 На щастя, Vue підтримує розпізнавання тегів kebab-case до компонентів, зареєстрованих за допомогою PascalCase. Це означає, що на компонент, зареєстрований як `MyComponent`, можна посилатися в шаблоні через `<MyComponent>` і `<my-component>`. Це дозволяє нам використовувати той самий код реєстрації компонента JavaScript незалежно від джерела шаблону.
diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md
@@ -21,8 +21,8 @@
 
 ```vue-html
 <CustomInput
- :modelValue="searchText"
- @update:modelValue="newValue => searchText = newValue"
+ :model-value="searchText"
+ @update:model-value="newValue => searchText = newValue"
 />
 ```
 

diff --git a/src/guide/essentials/class-and-style.md b/src/guide/essentials/class-and-style.md
@@ -95,7 +95,13 @@ data() {
 <div :class="classObject"></div>
 ```
 
-Результат рендеру буде таким же самим, як і у прикладі вище. Ви також можете прив'язувати й [обчислювані властивості](./computed), які повертають об'єкт. Це поширена і досить потужна модель:
+Результат рендеру буде:
+
+```vue-html
+<div class="active"></div>
+```
+
+Ви також можете прив'язувати й [обчислювані властивості](./computed), які повертають об'єкт. Це поширена і досить потужна модель:
 
 <div class="composition-api">
 

diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md
@@ -174,7 +174,7 @@ import ButtonCounter from './ButtonCounter.vue'
 <button-counter></button-counter>
 ```
 
-Дивіться [застереження щодо аналізу шаблону DOM](#dom-template-parsing-caveats) для отримання додаткової інформації.
+Дивіться [застереження щодо аналізу шаблону DOM](#in-dom-template-parsing-caveats) для отримання додаткової інформації.
 
 ## Передавання реквізитів {#passing-props}
 
@@ -541,7 +541,7 @@ export default {
 
 Під час перемикання між декількома компонентами за допомогою `<component :is="...">` компонент буде демонтовано, коли з нього буде перемкнуто. Ми можемо змусити неактивні компоненти залишатися «живими» за допомогою вбудованого [компонента `<KeepAlive>`](/guide/built-ins/keep-alive).
 
-## Застереження щодо аналізу шаблону DOM {#dom-template-parsing-caveats}
+## Застереження щодо аналізу шаблону DOM {#in-dom-template-parsing-caveats}
 
 Якщо ви пишете свої шаблони Vue безпосередньо в DOM, Vue доведеться отримати рядок шаблону з DOM. Це призводить до деяких застережень через власну поведінку браузерів під час аналізу HTML.
 

diff --git a/src/guide/scaling-up/ssr.md b/src/guide/scaling-up/ssr.md
@@ -285,7 +285,7 @@ export function createApp() {
 }
 ```
 
-Бібліотеки керування станом, такі як Pinia, розроблені з урахуванням цього. Зверніться до [посібника Pinia з SSR](https://pinia.vuejs.org/ssr/), щоб дізнатися більше.
+Бібліотеки керування станом, такі як Pinia, розроблені з урахуванням цього. Зверніться до [посібника Pinia з SSR](https://pinia-ua.netlify.app/uk/ssr/), щоб дізнатися більше.
 
 ### Невідповідність гідрації {#hydration-mismatch}
 

diff --git a/src/guide/scaling-up/state-management.md b/src/guide/scaling-up/state-management.md
@@ -234,7 +234,7 @@ export function useCount() {
 - Гаряча заміна модулів
 - Підтримка рендерінгу на стороні сервера
 
-[Pinia](https://pinia.vuejs.org) - це бібліотека керування станом, яка реалізує все вищезгадане. Вона підтримується основною командою Vue, та працює як з Vue 2, так і з Vue 3.
+[Pinia](https://pinia-ua.netlify.app/uk/) - це бібліотека керування станом, яка реалізує все вищезгадане. Вона підтримується основною командою Vue, та працює як з Vue 2, так і з Vue 3.
 
 Існуючі користувачі можуть бути знайомі з [Vuex](https://vuex.vuejs.org/), попередньою офіційною бібліотекою керування станом для Vue. Оскільки Pinia виконує ту саму роль в екосистемі, Vuex тепер у режимі обслуговування. Вона все ще працює, але більше не отримуватиме нових функцій. Для нових додатків рекомендується використовувати Pinia.
 

diff --git a/src/style-guide/rules-strongly-recommended.md b/src/style-guide/rules-strongly-recommended.md
@@ -87,7 +87,7 @@ These components lay the foundation for consistent styling and behavior in your
 - other base components, and
 - 3rd-party UI components.
 
-But they'll **never** contain global state (e.g. from a [Pinia](https://pinia.vuejs.org/) store).
+But they'll **never** contain global state (e.g. from a [Pinia](https://pinia-ua.netlify.app/uk/) store).
 
 Their names often include the name of an element they wrap (e.g. `BaseButton`, `BaseTable`), unless no element exists for their specific purpose (e.g. `BaseIcon`). If you build similar components for a more specific context, they will almost always consume these components (e.g. `BaseButton` may be used in `ButtonSubmit`).
 
@@ -337,7 +337,7 @@ components/
 
 ## Self-closing components {#self-closing-components}
 
-**Components with no content should be self-closing in [Single-File Components](/guide/scaling-up/sfc), string templates, and [JSX](/guide/extras/render-function#jsx-tsx) - but never in DOM templates.**
+**Components with no content should be self-closing in [Single-File Components](/guide/scaling-up/sfc), string templates, and [JSX](/guide/extras/render-function#jsx-tsx) - but never in in-DOM templates.**
 
 Components that self-close communicate that they not only have no content, but are **meant** to have no content. It's the difference between a blank page in a book and one labeled "This page intentionally left blank." Your code is also cleaner without the unnecessary closing tag.
 
@@ -375,15 +375,15 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
 
 ## Component name casing in templates {#component-name-casing-in-templates}
 
-**In most projects, component names should always be PascalCase in [Single-File Components](/guide/scaling-up/sfc) and string templates - but kebab-case in DOM templates.**
+**In most projects, component names should always be PascalCase in [Single-File Components](/guide/scaling-up/sfc) and string templates - but kebab-case in in-DOM templates.**
 
 PascalCase has a few advantages over kebab-case:
 
 - Editors can autocomplete component names in templates, because PascalCase is also used in JavaScript.
 - `<MyComponent>` is more visually distinct from a single-word HTML element than `<my-component>`, because there are two character differences (the two capitals), rather than just one (a hyphen).
 - If you use any non-Vue custom elements in your templates, such as a web component, PascalCase ensures that your Vue components remain distinctly visible.
 
-Unfortunately, due to HTML's case insensitivity, DOM templates must still use kebab-case.
+Unfortunately, due to HTML's case insensitivity, in-DOM templates must still use kebab-case.
 
 Also note that if you've already invested heavily in kebab-case, consistency with HTML conventions and being able to use the same casing across all your projects may be more important than the advantages listed above. In those cases, **using kebab-case everywhere is also acceptable.**
 
@@ -401,7 +401,7 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
 ```
 
 ```vue-html
-<!-- In DOM templates -->
+<!-- In in-DOM templates -->
 <MyComponent></MyComponent>
 ```
 
@@ -416,7 +416,7 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
 ```
 
 ```vue-html
-<!-- In DOM templates -->
+<!-- In in-DOM templates -->
 <my-component></my-component>
 ```