Merge branch 'main' into patch-1

Author: NataliaTepluhina

.github/contributing/writing-guide.md

@@ -85,7 +85,7 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
 
 ### Tips, Callouts, Alerts, and Line Highlights
 
-We have some dedicated styles to denote something that's worth highlighting in a particular way. These are captured [on this page](https://v3.vuejs.org/guide/doc-style-guide.html#alerts). **They are to be used sparingly.**
+We have some dedicated styles to denote something that's worth highlighting in a particular way. These are captured [on this page](https://vitepress.vuejs.org/guide/markdown.html#custom-containers). **They are to be used sparingly.**
 
 There is a certain temptation to abuse these styles, as one can simply add a change inside a callout. However, this breaks up the flow of reading for the user, and thus, should only be used in special circumstances. Wherever possible, we should attempt to create a narrative and flow within the page to respect the readers cognitive load.
 

src/api/built-in-special-elements.md

@@ -34,7 +34,7 @@ A "meta component" for rendering dynamic components or elements.
   import Bar from './Bar.vue'
 
   export default {
-    components: { Foo, Bar }
+    components: { Foo, Bar },
     data() {
       return {
         view: 'Foo'

src/api/reactivity-advanced.md

@@ -94,7 +94,9 @@ Creates a customized ref with explicit control over its dependency tracking and
   Creating a debounced ref that only updates the value after a certain timeout after the latest set call:
 
   ```js
-  function useDebouncedRef(value, delay = 200) {
+  import { customRef } from 'vue'
+  
+  export function useDebouncedRef(value, delay = 200) {
     let timeout
     return customRef((track, trigger) => {
       return {

src/api/sfc-spec.md

@@ -105,9 +105,9 @@ p {{ msg }}
 
 Note that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:
 
-- [Vite](https://vitejs.dev](features.html#css-pre-processors)
-- [Vue CLI](https://cli.vuejs.org](css.html#pre-processors)
-- [webpack + vue-loader](https://vue-loader.vuejs.org](pre-processors.html#using-pre-processors)
+- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)
+- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)
+- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)
 
 ## Src Imports
 

src/guide/essentials/component-basics.md

@@ -303,7 +303,7 @@ That's all you need to know about props for now, but once you've finished readin
 
 ## Listening to Events
 
-As we develop our `<BlogPost>` component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size.
+As we develop our `<BlogPost>` component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page at its default size.
 
 In the parent, we can support this feature by adding a `postFontSize` <span class="options-api">data property</span><span class="composition-api">ref</span>:
 
@@ -558,7 +558,7 @@ HTML tags and attribute names are case-insensitive, so browsers will interpret a
 // camelCase in JavaScript
 const BlogPost = {
   props: ['postTitle'],
-  emits: ['updatePost']
+  emits: ['updatePost'],
   template: `
     <h3>{{ postTitle }}</h3>
   `

src/guide/essentials/event-handling.md

@@ -194,7 +194,7 @@ Sometimes we also need to access the original DOM event in an inline handler. Yo
 
 ```js
 function warn(message, event) {
-  // `now we have access to the native event`
+  // now we have access to the native event
   if (event) {
     event.preventDefault()
   }
@@ -251,7 +251,7 @@ To address this problem, Vue provides **event modifiers** for `v-on`. Recall tha
 ```
 
 ::: tip
-Order matters when using modifiers because the relevant code is generated in the same order. Therefore using `@click.prevent.self` will prevent **all clicks** while `@click.self.prevent` will only prevent clicks on the element itself.
+Order matters when using modifiers because the relevant code is generated in the same order. Therefore using `@click.prevent.self` will prevent **clicks default action on the element itself and its children** while `@click.self.prevent` will only prevent clicks default action on the element itself.
 :::
 
 The `.capture`, `.once`, and `.passive` modifiers mirror the [options of the native `addEventListener` method](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters):
@@ -331,7 +331,7 @@ For example:
 ```
 
 ::: tip
-Note that modifier keys are different from regular keys and when used with `keyup` events, they have to be pressed when the event is emitted. In other words, `keyup.ctrl` will only trigger if you release a key while holding down `ctrl`. It won't trigger if you release the `ctrl` key alone
+Note that modifier keys are different from regular keys and when used with `keyup` events, they have to be pressed when the event is emitted. In other words, `keyup.ctrl` will only trigger if you release a key while holding down `ctrl`. It won't trigger if you release the `ctrl` key alone.
 :::
 
 ### `.exact` Modifier

src/guide/essentials/lifecycle.md

@@ -51,7 +51,7 @@ setTimeout(() => {
 }, 100)
 ```
 
-Do note this doesn't mean that the call must be placed lexically inside `setup()` or `<script setup>` - `onMounted()` can be called in an external function as long as the call stack is synchronous and originates from within `setup()`.
+Do note this doesn't mean that the call must be placed lexically inside `setup()` or `<script setup>`. `onMounted()` can be called in an external function as long as the call stack is synchronous and originates from within `setup()`.
 
 </div>
 

src/guide/essentials/reactivity-fundamentals.md

@@ -224,7 +224,7 @@ To wait for the DOM update to complete after a state change, you can use the [ne
 import { nextTick } from 'vue'
 
 function increment() {
-  count.value++
+  state.count++
   nextTick(() => {
     // access updated DOM
   })
@@ -352,7 +352,7 @@ The `reactive()` API has two limitations:
    state = reactive({ count: 1 })
    ```
 
-   It also means that when we assign or destructure a reactive object's property into local variables, or when we pass that property into a function, or destructure properties from a reactive object, we will lose the reactivity connection:
+   It also means that when we assign or destructure a reactive object's property into local variables, or when we pass that property into a function, we will lose the reactivity connection:
 
    ```js
    const state = reactive({ count: 0 })

src/guide/essentials/template-syntax.md

@@ -207,7 +207,7 @@ It is also possible to use a JavaScript expression in a directive argument by wr
 ```vue-html
 <!--
 Note that there are some constraints to the argument expression,
-as explained in the "Dynamic Argument Expression Constraints" section below.
+as explained in the "Dynamic Argument Value Constraints" and "Dynamic Argument Syntax Constraints" sections below.
 -->
 <a v-bind:[attributeName]="url"> ... </a>
 

src/guide/extras/web-components.md

@@ -151,7 +151,7 @@ document.body.appendChild(
 
 #### Events
 
-Events emitted via `this.$emit` or setup `emit` are dispatched as native [CustomEvents](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events#adding_custom_data_%E2%80%93_customevent) on the custom element. Additional event arguments (payload) will be exposed as an array on the CustomEvent object as its `details` property.
+Events emitted via `this.$emit` or setup `emit` are dispatched as native [CustomEvents](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events#adding_custom_data_%E2%80%93_customevent) on the custom element. Additional event arguments (payload) will be exposed as an array on the CustomEvent object as its `detail` property.
 
 #### Slots
 

src/guide/introduction.md

@@ -82,7 +82,7 @@ Vue is a framework and ecosystem that covers most of the common features needed
 - Embedding as Web Components on any page
 - Single-Page Application (SPA)
 - Fullstack / Server-Side-Rendering (SSR)
-- JAMStack / Static-Site-Generation (SSG)
+- Jamstack / Static-Site-Generation (SSG)
 - Targeting desktop, mobile, WebGL or even the terminal
 
 If you find these concepts intimidating, don't worry! The tutorial and guide only require basic HTML and JavaScript knowledge, and you should be able to follow along without being an expert in any of these.

src/guide/reusability/custom-directives.md

@@ -108,7 +108,7 @@ Custom directives should only be used when the desired functionality can only be
 A directive definition object can provide several hook functions (all optional):
 
 ```js
-const myDir = {
+const myDirective = {
   // called before bound element's attributes
   // or event listeners are applied
   created(el, binding, vnode, prevVnode) {

src/guide/scaling-up/ssr.md

@@ -163,7 +163,7 @@ import { createSSRApp } from 'vue'
 export function createApp() {
   return createSSRApp({
     data: () => ({ count: 1 }),
-    template: `<div @click="count++">{{ count }}</div>`
+    template: `<button @click="count++">{{ count }}</button>`
   })
 }
 ```

src/sponsor/index.md

@@ -46,9 +46,9 @@ You can also try to convince your employer to sponsor Vue as a business. This ma
 - **Gold (USD$500/mo)**:
   - Large logo placement on the front page of [vuejs.org](/).
   - Large Logo placement in the README of `vuejs/core` and `vuejs/vue`.
-- **Silver (USD$500/mo)**:
+- **Silver (USD$250/mo)**:
   - Medium logo placement in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
-- **Bronze (USD$500/mo)**:
+- **Bronze (USD$100/mo)**:
   - Small logo placement in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`.
 - **Generous Backer (USD$50/mo)**:
   - Name listed in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`, above other individual backers.

src/tutorial/src/step-8/_hint/App/template.html

@@ -4,7 +4,7 @@
 </form>
 <ul>
   <li v-for="todo in filteredTodos" :key="todo.id">
-    <input type="checkbox" v-model="todo.done" />
+    <input type="checkbox" v-model="todo.done">
     <span :class="{ done: todo.done }">{{ todo.text }}</span>
     <button @click="removeTodo(todo)">X</button>
   </li>

src/tutorial/src/step-8/description.md

@@ -4,7 +4,7 @@ Let's keep building on top of the todo list from the last step. Here, we've alre
 
 ```vue-html{2}
 <li v-for="todo in todos">
-  <input type="checkbox" v-model="todo.done" />
+  <input type="checkbox" v-model="todo.done">
   ...
 </li>
 ```