From eba914e68eacceab35826e4aa8d017c80ad0ab49 Mon Sep 17 00:00:00 2001 From: Jilson Thomas Date: Mon, 18 Sep 2023 08:52:39 -0400 Subject: [PATCH 01/10] feat: add vuetoronto23 banner (#2506) --- .../inlined-scripts/restorePreference.js | 4 +- .vitepress/theme/components/Banner.vue | 87 ++++++++++++++++--- .vitepress/theme/index.ts | 4 +- 3 files changed, 78 insertions(+), 17 deletions(-) diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js index 5e18b50f..17bc775d 100644 --- 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 index 6730fcd4..64000f1b 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -22,16 +22,30 @@ function dismiss() { @@ -50,12 +64,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; } .banner-dismissed .banner { @@ -70,7 +82,7 @@ button { position: absolute; right: 0; top: 0; - padding: 5px; + padding: 20px 10px; } .close { @@ -79,10 +91,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; } -} */ +} diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 7084831a..11dd6756 100644 --- 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) }) From 1ab68f62f1cc830ae93d09ea45f17b29c8810a90 Mon Sep 17 00:00:00 2001 From: Mahmudun Nabi Kajal Date: Tue, 19 Sep 2023 14:45:08 +0600 Subject: [PATCH 02/10] Add translation link for bn.vuejs.org (#2508) * add translation link for bn.vuejs.org * add indent as old file --- .vitepress/config.ts | 5 +++++ src/translations/index.md | 1 + 2 files changed, 6 insertions(+) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 61fa23bb..f73de238 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -646,6 +646,11 @@ export default defineConfigWithTheme({ 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: 'Help Us Translate!', diff --git a/src/translations/index.md b/src/translations/index.md index 1a5e2661..ec1d44c7 100644 --- a/src/translations/index.md +++ b/src/translations/index.md @@ -13,6 +13,7 @@ aside: false - [Français / French](https://fr.vuejs.org) [[source](https://github.com/vuejs-translations/docs-fr)] - [한국어 / Korean](https://ko.vuejs.org) [[source](https://github.com/vuejs-translations/docs-ko)] - [Português / Portuguese](https://pt.vuejs.org) [[source](https://github.com/vuejs-translations/docs-pt)] +- [বাংলা / Bengali](https://bn.vuejs.org) [[source](https://github.com/vuejs-translations/docs-bn)] From 369bc0e8e53619803e12b18cfa71fbc063b74be4 Mon Sep 17 00:00:00 2001 From: wxsm Date: Tue, 19 Sep 2023 19:08:20 +0800 Subject: [PATCH 03/10] docs: consist usage of in-DOM template (#2487) * docs: consist usage of in-DOM template * docs: consist usage of in-DOM template --- src/api/built-in-special-attributes.md | 2 +- src/glossary/index.md | 2 +- src/guide/built-ins/keep-alive.md | 2 +- src/guide/built-ins/transition-group.md | 2 +- src/guide/components/props.md | 2 +- src/guide/components/registration.md | 2 +- src/guide/essentials/component-basics.md | 8 ++++---- src/style-guide/rules-strongly-recommended.md | 10 +++++----- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/api/built-in-special-attributes.md b/src/api/built-in-special-attributes.md index ed1e048d..3dfb7523 100644 --- a/src/api/built-in-special-attributes.md +++ b/src/api/built-in-special-attributes.md @@ -95,7 +95,7 @@ Used for binding [dynamic components](/guide/essentials/component-basics#dynamic When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature. - There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [DOM Template Parsing Caveats](/guide/essentials/component-basics#dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead: + There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [in-DOM Template Parsing Caveats](/guide/essentials/component-basics#in-dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead: ```vue-html diff --git a/src/glossary/index.md b/src/glossary/index.md index 9b6a0883..6125b5f5 100644 --- 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 index 167347d6..c4fbec72 100644 --- a/src/guide/built-ins/keep-alive.md +++ b/src/guide/built-ins/keep-alive.md @@ -47,7 +47,7 @@ Now, the state will be persisted across component switches: :::tip -When used in [DOM templates](/guide/essentials/component-basics#dom-template-parsing-caveats), it should be referenced as ``. +When used in [in-DOM templates](/guide/essentials/component-basics#in-dom-template-parsing-caveats), it should be referenced as ``. ::: ## Include / Exclude {#include-exclude} diff --git a/src/guide/built-ins/transition-group.md b/src/guide/built-ins/transition-group.md index 7b808518..8668d015 100644 --- 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 transition classes will be applied to individual elements in the list, **not** to the group / container itself. :::tip -When used in [DOM templates](/guide/essentials/component-basics#dom-template-parsing-caveats), it should be referenced as ``. +When used in [in-DOM templates](/guide/essentials/component-basics#in-dom-template-parsing-caveats), it should be referenced as ``. ::: ## Enter / Leave Transitions {#enter-leave-transitions} diff --git a/src/guide/components/props.md b/src/guide/components/props.md index 869db5b5..9cb983b4 100644 --- a/src/guide/components/props.md +++ b/src/guide/components/props.md @@ -148,7 +148,7 @@ export default { {{ greetingMessage }} ``` -Technically, you can also use camelCase when passing props to a child component (except in [DOM templates](/guide/essentials/component-basics#dom-template-parsing-caveats)). However, the convention is using kebab-case in all cases to align with HTML attributes: +Technically, you can also use camelCase when passing props to a child component (except in [in-DOM templates](/guide/essentials/component-basics#in-dom-template-parsing-caveats)). However, the convention is using kebab-case in all cases to align with HTML attributes: ```vue-html diff --git a/src/guide/components/registration.md b/src/guide/components/registration.md index 66a31a5b..bc7329c9 100644 --- a/src/guide/components/registration.md +++ b/src/guide/components/registration.md @@ -136,6 +136,6 @@ Throughout the guide, we are using PascalCase names when registering components. 2. `` makes it more obvious that this is a Vue component instead of a native HTML element in templates. It also differentiates Vue components from custom elements (web components). -This is the recommended style when working with SFC or string templates. However, as discussed in [DOM Template Parsing Caveats](/guide/essentials/component-basics#dom-template-parsing-caveats), PascalCase tags are not usable in DOM templates. +This is the recommended style when working with SFC or string templates. However, as discussed in [in-DOM Template Parsing Caveats](/guide/essentials/component-basics#in-dom-template-parsing-caveats), PascalCase tags are not usable in DOM templates. Luckily, Vue supports resolving kebab-case tags to components registered using PascalCase. This means a component registered as `MyComponent` can be referenced in the template via both `` and ``. This allows us to use the same JavaScript component registration code regardless of template source. diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md index 782e5855..fe306d4d 100644 --- a/src/guide/essentials/component-basics.md +++ b/src/guide/essentials/component-basics.md @@ -174,7 +174,7 @@ If you are authoring your templates directly in a DOM (e.g. as the content of a ``` -See [DOM template parsing caveats](#dom-template-parsing-caveats) for more details. +See [in-DOM template parsing caveats](#in-dom-template-parsing-caveats) for more details. ## Passing Props {#passing-props} @@ -541,7 +541,7 @@ You can also use the `is` attribute to create regular HTML elements. When switching between multiple components with ``, a component will be unmounted when it is switched away from. We can force the inactive components to stay "alive" with the built-in [`` component](/guide/built-ins/keep-alive). -## DOM Template Parsing Caveats {#dom-template-parsing-caveats} +## in-DOM Template Parsing Caveats {#in-dom-template-parsing-caveats} If you are writing your Vue templates directly in the DOM, Vue will have to retrieve the template string from the DOM. This leads to some caveats due to browsers' native HTML parsing behavior. @@ -583,7 +583,7 @@ We have been using self-closing tags for components in previous code samples: This is because Vue's template parser respects `/>` as an indication to end any tag, regardless of its type. -In DOM templates, however, we must always include explicit closing tags: +In in-DOM templates, however, we must always include explicit closing tags: ```vue-html @@ -628,6 +628,6 @@ The custom component `` will be hoisted out as invalid content, c When used on native HTML elements, the value of `is` must be prefixed with `vue:` in order to be interpreted as a Vue component. This is required to avoid confusion with native [customized built-in elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example). ::: -That's all you need to know about DOM template parsing caveats for now - and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself - build something fun, or check out some of the [Examples](/examples/) if you haven't already. +That's all you need to know about in-DOM template parsing caveats for now - and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself - build something fun, or check out some of the [Examples](/examples/) if you haven't already. Once you feel comfortable with the knowledge you've just digested, move on with the guide to learn more about components in depth. diff --git a/src/style-guide/rules-strongly-recommended.md b/src/style-guide/rules-strongly-recommended.md index 4a28ee65..8ba22c2b 100644 --- a/src/style-guide/rules-strongly-recommended.md +++ b/src/style-guide/rules-strongly-recommended.md @@ -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,7 +375,7 @@ 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: @@ -383,7 +383,7 @@ PascalCase has a few advantages over kebab-case: - `` is more visually distinct from a single-word HTML element than ``, 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 - + ``` @@ -416,7 +416,7 @@ Also note that if you've already invested heavily in kebab-case, consistency wit ``` ```vue-html - + ``` From 6d12f2c8b8f4170fe8c6dcf58196f339db699527 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= Date: Tue, 19 Sep 2023 19:08:50 +0800 Subject: [PATCH 04/10] perf: remove `resize` event listener when `unmounted` (#2495) --- src/examples/ExampleRepl.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/examples/ExampleRepl.vue b/src/examples/ExampleRepl.vue index a5cd5028..98edcd4c 100644 --- 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) + }) }) From 644416a55004bb3c9976346635d02788151be5f1 Mon Sep 17 00:00:00 2001 From: Leo <3853621+leoelz@users.noreply.github.com> Date: Tue, 19 Sep 2023 08:10:45 -0300 Subject: [PATCH 05/10] Update class-and-style.md (#2496) It says that it will render the same result, and the last result was: ```vue-html
``` But `static` is not present on this example --- src/guide/essentials/class-and-style.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/guide/essentials/class-and-style.md b/src/guide/essentials/class-and-style.md index 975b74b9..6808b1cd 100644 --- a/src/guide/essentials/class-and-style.md +++ b/src/guide/essentials/class-and-style.md @@ -95,7 +95,13 @@ data() {
``` -This will render the same result. We can also bind to a [computed property](./computed) that returns an object. This is a common and powerful pattern: +This will render: + +```vue-html +
+``` + +We can also bind to a [computed property](./computed) that returns an object. This is a common and powerful pattern:
From 7f299d98443efc489115d5f6b64d02094660dbd0 Mon Sep 17 00:00:00 2001 From: Leonard Choo Date: Tue, 19 Sep 2023 20:20:47 +0900 Subject: [PATCH 06/10] Update v-model.md naming convention (#2504) * Update v-model.md naming convention kebab-case should be used when event is being listened to inside parent's template. * Update v-model.md --- src/guide/components/v-model.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md index 80ba6418..91a648c4 100644 --- a/src/guide/components/v-model.md +++ b/src/guide/components/v-model.md @@ -21,8 +21,8 @@ When used on a component, `v-model` instead expands to this: ```vue-html ``` From f64e00f35a287244dff26727466a7b77da52b7ed Mon Sep 17 00:00:00 2001 From: Serhii Matrunchyk <2089828+matrunchyk@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:24:40 +0300 Subject: [PATCH 07/10] fix: In-DOM template links --- src/api/built-in-special-attributes.md | 2 +- src/guide/built-ins/keep-alive.md | 2 +- src/guide/components/props.md | 2 +- src/guide/components/registration.md | 2 +- src/guide/essentials/component-basics.md | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/api/built-in-special-attributes.md b/src/api/built-in-special-attributes.md index 233c03e0..e353516e 100644 --- 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
diff --git a/src/guide/built-ins/keep-alive.md b/src/guide/built-ins/keep-alive.md index 3d5e249c..c2cae84e 100644 --- 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' :::tip -У разі використання в [шаблонах DOM](/guide/essentials/component-basics#dom-template-parsing-caveats) на нього слід посилатися як ``. +У разі використання в [шаблонах DOM](/guide/essentials/component-basics#in-dom-template-parsing-caveats) на нього слід посилатися як ``. ::: ## Включити / Виключити {#include-exclude} diff --git a/src/guide/components/props.md b/src/guide/components/props.md index 3b1e9c22..70a2c6d0 100644 --- a/src/guide/components/props.md +++ b/src/guide/components/props.md @@ -148,7 +148,7 @@ export default { {{ greetingMessage }} ``` -Технічно ви також можете використовувати 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 diff --git a/src/guide/components/registration.md b/src/guide/components/registration.md index 10257d43..a420f64c 100644 --- a/src/guide/components/registration.md +++ b/src/guide/components/registration.md @@ -136,6 +136,6 @@ export default { 2. `` робить більш очевидним, що це компонент 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`, можна посилатися в шаблоні через `` і ``. Це дозволяє нам використовувати той самий код реєстрації компонента JavaScript незалежно від джерела шаблону. diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md index 4ddc8889..51c5988f 100644 --- a/src/guide/essentials/component-basics.md +++ b/src/guide/essentials/component-basics.md @@ -174,7 +174,7 @@ import ButtonCounter from './ButtonCounter.vue' ``` -Дивіться [застереження щодо аналізу шаблону DOM](#dom-template-parsing-caveats) для отримання додаткової інформації. +Дивіться [застереження щодо аналізу шаблону DOM](#in-dom-template-parsing-caveats) для отримання додаткової інформації. ## Передавання реквізитів {#passing-props} @@ -541,7 +541,7 @@ export default { Під час перемикання між декількома компонентами за допомогою `` компонент буде демонтовано, коли з нього буде перемкнуто. Ми можемо змусити неактивні компоненти залишатися «живими» за допомогою вбудованого [компонента ``](/guide/built-ins/keep-alive). -## Застереження щодо аналізу шаблону DOM {#dom-template-parsing-caveats} +## Застереження щодо аналізу шаблону DOM {#in-dom-template-parsing-caveats} Якщо ви пишете свої шаблони Vue безпосередньо в DOM, Vue доведеться отримати рядок шаблону з DOM. Це призводить до деяких застережень через власну поведінку браузерів під час аналізу HTML. From e83a0a071f7877939c85fdf721b2d462c9e93333 Mon Sep 17 00:00:00 2001 From: Serhii Matrunchyk <2089828+matrunchyk@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:26:16 +0300 Subject: [PATCH 08/10] feat: Banner --- .vitepress/theme/components/Banner.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index d579dc80..96c0a610 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -35,22 +35,22 @@ function dismiss() { From 7acabed811a5e9d9b36043c5bbaff0e4abc04046 Mon Sep 17 00:00:00 2001 From: Serhii Matrunchyk <2089828+matrunchyk@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:32:18 +0300 Subject: [PATCH 09/10] feat: Update Pinia links --- .vitepress/config.ts | 2 +- src/guide/scaling-up/ssr.md | 2 +- src/guide/scaling-up/state-management.md | 2 +- src/style-guide/rules-strongly-recommended.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index c30b4c58..dfda936c 100644 --- 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' } ] }, diff --git a/src/guide/scaling-up/ssr.md b/src/guide/scaling-up/ssr.md index 60c3db38..70be3339 100644 --- 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 index 50412bbf..05b22d5c 100644 --- 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 index 8ba22c2b..15d4efd8 100644 --- 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`). From ad365728592dabd8b125282bc76ea0d9b6373105 Mon Sep 17 00:00:00 2001 From: Serhii Matrunchyk <2089828+matrunchyk@users.noreply.github.com> Date: Tue, 19 Sep 2023 14:33:27 +0300 Subject: [PATCH 10/10] fix: Typo --- src/translations/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/translations/index.md b/src/translations/index.md index 06023701..95860972 100644 --- a/src/translations/index.md +++ b/src/translations/index.md @@ -13,7 +13,7 @@ aside: false - [Français / Французька](https://fr.vuejs.org) [[джерело](https://github.com/vuejs-translations/docs-fr)] - [한국어 / Корейська](https://ko.vuejs.org) [[джерело](https://github.com/vuejs-translations/docs-ko)] - [Português / Португальська](https://pt.vuejs.org) [[джерело](https://github.com/vuejs-translations/docs-pt)] -- [বাংলা / Бенгальська>](https://bn.vuejs.org) [[джерело](https://github.com/vuejs-translations/docs-bn)] +- [বাংলা / Бенгальська](https://bn.vuejs.org) [[джерело](https://github.com/vuejs-translations/docs-bn)] -