Merge branch 'main' into feat/v-model

.vitepress/theme/components/SponsorsGroup.vue

@@ -2,9 +2,11 @@
 import { onMounted, onUnmounted } from 'vue'
 import { SponsorData, data, base, load } from './sponsors'
 
+type Placement = 'aside' | 'page' | 'landing'
+
 const { tier, placement = 'aside' } = defineProps<{
   tier: keyof SponsorData
-  placement?: 'aside' | 'page' | 'landing'
+  placement?: Placement
 }>()
 
 let container = $ref<HTMLElement>()
@@ -21,12 +23,23 @@ onMounted(async () => {
     },
     { rootMargin: '0px 0px 300px 0px' }
   )
-  observer.observe(container)
+  observer.observe(container!)
   onUnmounted(() => observer.disconnect())
 
   // load data
   await load()
 })
+
+// fathom events
+const eventMap: Record<Placement, string> = {
+  aside: '4QUPDDRU',
+  landing: '58FLAR2Z',
+  page: 'ZXLO3IUT'
+}
+
+function track(interest?: boolean) {
+  fathom.trackGoal(interest ? `Y2BVYNT2` : eventMap[placement], 0)
+}
 </script>
 
 <template>
@@ -42,6 +55,7 @@ onMounted(async () => {
         :href="url"
         target="_blank"
         rel="sponsored noopener"
+        @click="track()"
       >
         <picture v-if="img.endsWith('png')">
           <source
@@ -57,6 +71,7 @@ onMounted(async () => {
       v-if="placement !== 'page' && tier !== 'special'"
       href="/sponsor/"
       class="sponsor-item action"
+      @click="track(true)"
       >Your logo</a
     >
   </div>

.vitepress/theme/components/sponsors.ts

@@ -2,6 +2,12 @@
 
 import { ref } from 'vue'
 
+declare global {
+  const fathom: {
+    trackGoal: (id: string, value: number) => any
+  }
+}
+
 export interface Sponsor {
   url: string
   img: string

src/about/releases.md

@@ -72,6 +72,6 @@ The RFC process is conducted in the [vuejs/rfcs](https://github.com/vuejs/rfcs)
 
 ## Experimental Features {#experimental-features}
 
-Some features are shipped and documented in a stable version of Vue, but marked as experimental. Experimental features are typically features that have an associated RFC discussion with most of the design problems resolved on paper, but still lacking feedback from real world usage.
+Some features are shipped and documented in a stable version of Vue, but marked as experimental. Experimental features are typically features that have an associated RFC discussion with most of the design problems resolved on paper, but still lacking feedback from real-world usage.
 
 The goal of experimental features is to allow users to provide feedback for them by testing them in a production setting, without having to use an unstable version of Vue. Experimental features themselves are considered unstable, and should only be used in a controlled manner, with the expectation that the feature may change between any release types.

src/about/team/Member.ts

@@ -21,5 +21,6 @@ export interface Link {
 export interface Socials {
   github: string
   twitter?: string
+  linkedin?: string
   codepen?: string
 }

src/about/team/members-core.json

@@ -415,21 +415,23 @@
   {
     "name": "Anthony Fu",
     "title": "Open Sourceror",
+    "company": "NuxtLabs",
+    "companyLink": "https://nuxtlabs.com/",
     "projects": [
-      {
-        "label": "composition-api",
-        "url": "https://github.com/vuejs/composition-api"
-      },
       {
         "label": "VueUse",
         "url": "https://github.com/vueuse/vueuse"
       },
+      {
+        "label": "Vitesse",
+        "url": "https://github.com/antfu/vitesse"
+      },
       {
         "label": "vue-demi",
         "url": "https://github.com/vueuse/vue-demi"
       }
     ],
-    "location": "Shanghai, China",
+    "location": "Paris, France",
     "languages": ["Chinese", "English"],
     "socials": {
       "github": "antfu",
@@ -462,8 +464,12 @@
     "title": "Developer",
     "projects": [
       {
-        "label": "volar",
-        "url": "https://github.com/johnsoncodehk/volar"
+        "label": "@vue/language-tools",
+        "url": "https://github.com/vuejs/language-tools"
+      },
+      {
+        "label": "Volar.js",
+        "url": "https://github.com/volarjs"
       }
     ],
     "location": "Hong Kong, China",

src/api/general.md

@@ -122,7 +122,7 @@ A type helper for defining a Vue component with type inference.
   type FooInstance = InstanceType<typeof Foo>
   ```
 
-  ### Note on webpack Treeshaking
+  ### Note on webpack Treeshaking {#note-on-webpack-treeshaking}
 
   Because `defineComponent()` is a function call, it could look like that it would produce side-effects to some build tools, e.g. webpack. This will prevent the component from being tree-shaken even when the component is never used.
 

src/api/ssr.md

@@ -30,7 +30,7 @@
   })()
   ```
 
-  ### SSR Context
+  ### SSR Context {#ssr-context}
 
   You can pass an optional context object, which can be used to record additional data during the render, for example [accessing content of Teleports](/guide/scaling-up/ssr.html#teleports):
 

src/ecosystem/newsletters.md

@@ -1,4 +1,4 @@
-# Community Newsletters
+# Community Newsletters {#community-newsletters}
 
 There are many great newsletters / Vue-dedicated blogs from the community bringing you latest news and happenings in the Vue ecosystem. Here is a non-exhaustive list of active ones that we have come across:
 

src/ecosystem/themes/ThemePage.vue

@@ -8,7 +8,7 @@ import ThemeContact from './ThemeContact.vue'
   <div class="ThemePage">
     <ThemeHero>
       <template #title>Themes</template>
-      <template #lead>Check out the themes, UI Kits, and plugins. you can see how a real world application is built with Vue by our partners.</template>
+      <template #lead>Check out the themes, UI Kits, and plugins. You can see how a real-world application is built with Vue by our partners.</template>
     </ThemeHero>
 
     <ThemeList />

src/ecosystem/themes/themes.json

@@ -1,7 +1,7 @@
 [
   {
     "name": "Creative Tim",
-    "description": "With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application.",
+    "description": "With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real-world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real-world application.",
     "seeMoreUrl": "https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=116187",
     "products": [
       {
@@ -92,7 +92,7 @@
   },
   {
     "name": "MDBootstrap",
-    "description": "Check out the themes, UI Kits and plugins below built by our partners from [MDBootstrap](https://mdbootstrap.com/?utm_ref_id=82665). Learn how to use Vue in professional projects along such technologies as Bootstrap. Templates & ready components make your development faster and more efficient.`",
+    "description": "Check out the themes, UI Kits and plugins below built by our partners from [MDBootstrap](https://mdbootstrap.com/?utm_ref_id=82665). Learn how to use Vue in professional projects along such technologies as Bootstrap. Templates & ready components make your development faster and more efficient.",
     "seeMoreUrl": "https://mdbootstrap.com/docs/vue/?utm_ref_id=82665",
     "products": [
       {
@@ -274,8 +274,8 @@
   },
   {
     "name": "PrimeVue",
-    "description": "The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/#/?af_id=4218) offers over 80 flexible components to build your apps with! They have a ton of different component themes and Vue-CLI application templates available to get the look & feel that suits you best.`",
-    "seeMoreUrl": "https://www.primefaces.org/primevue/#/?af_id=4218",
+    "description": "The open-source UI component library [PrimeVue](https://www.primefaces.org/primevue/?af_id=4218) offers over 90 flexible components to build your apps with! They have a ton of different component themes and application templates available to get the look & feel that suits you best.",
+    "seeMoreUrl": "https://www.primefaces.org/primevue/?af_id=4218",
     "products": [
       {
         "name": "Sakai",
@@ -284,6 +284,13 @@
         "url": "https://www.primefaces.org/sakai-vue/#/?af_id=4218",
         "image": "https://www.primefaces.org/vue-templates/sakai.jpg"
       },
+      {
+        "name": "Apollo",
+        "price": 59,
+        "description": "Next-Gen Application Template",
+        "url": "https://www.primefaces.org/layouts/apollo-vue?af_id=4218",
+        "image": "https://www.primefaces.org/vue-templates/apollo.jpg"
+      },
       {
         "name": "Atlantis",
         "price": 59,
@@ -347,13 +354,6 @@
         "url": "https://www.primefaces.org/layouts/serenity-vue?af_id=4218",
         "image": "https://www.primefaces.org/vue-templates/serenity.jpg"
       },
-      {
-        "name": "Apollo",
-        "price": 49,
-        "description": "Admin Template with a Dark Mode",
-        "url": "https://www.primefaces.org/layouts/apollo-vue?af_id=4218",
-        "image": "https://www.primefaces.org/vue-templates/apollo.jpg"
-      },
       {
         "name": "Babylon",
         "price": 49,
@@ -379,7 +379,7 @@
   },
   {
     "name": "Flatlogic",
-    "description": "Check out the admin dashboard templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications are built. Additionally, these templates will help you to start a new application and save you time and money.`",
+    "description": "Check out the admin dashboard templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications are built. Additionally, these templates will help you to start a new application and save you time and money.",
     "seeMoreUrl": "https://flatlogic.com/templates?ref=x-fdkuTAVW",
     "products": [
       {

src/guide/best-practices/accessibility.md

@@ -97,13 +97,13 @@ Users can navigate an application through headings. Having descriptive headings
 ```vue-html
 <main role="main" aria-labelledby="main-title">
   <h1 id="main-title">Main title</h1>
-  <section aria-labelledby="section-title">
-    <h2 id="section-title"> Section Title </h2>
+  <section aria-labelledby="section-title-1">
+    <h2 id="section-title-1"> Section Title </h2>
     <h3>Section Subtitle</h3>
     <!-- Content -->
   </section>
-  <section aria-labelledby="section-title">
-    <h2 id="section-title"> Section Title </h2>
+  <section aria-labelledby="section-title-2">
+    <h2 id="section-title-2"> Section Title </h2>
     <h3>Section Subtitle</h3>
     <!-- Content -->
     <h3>Section Subtitle</h3>

src/guide/best-practices/performance.md

@@ -55,7 +55,7 @@ One of the most effective ways to improve page load performance is shipping smal
 
   - When using a build step, templates are pre-compiled so we don't need to ship the Vue compiler to the browser. This saves **14kb** min+gzipped JavaScript and avoids the runtime compilation cost.
 
-- Be cautious of size when introducing new dependencies! In real world applications, bloated bundles are most often a result of introducing heavy dependencies without realizing it.
+- Be cautious of size when introducing new dependencies! In real-world applications, bloated bundles are most often a result of introducing heavy dependencies without realizing it.
 
   - If using a build step, prefer dependencies that offer ES module formats and are tree-shaking friendly. For example, prefer `lodash-es` over `lodash`.
 

src/guide/essentials/class-and-style.md

@@ -248,7 +248,7 @@ You can learn more about component attribute inheritance in [Fallthrough Attribu
 يمكنك معرفة المزيد عن توريث سمات المكون في قسم [Fallthrough Attributes](/guide/components/attrs.html).
 ## ربط التنسيقات السطرية {#binding-inline-styles}
 
-### الربط بالكائنات
+### الربط بالكائنات {#binding-to-objects-1}
 
 `:style` يدعم ربط قيم كائنات JavaScript - يُوافق مع [خاصية `style` لعنصر HTML](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style):
 
@@ -320,7 +320,7 @@ data() {
 
 مرة أخرى، يتم استخدام ربط كائن التنسيقات عادةً مع خاصيات محسوبة تُعيد كائنات.
 
-### الربط بالمصفوفات
+### الربط بالمصفوفات {#binding-to-arrays-1}
 
 يمكننا ربط `:style` بمصفوفة من كائنات متعددة من التنسيقات . سيتم دمج هذه الكائنات وتطبيقها على نفس العنصر:
 

src/guide/essentials/forms.md

@@ -409,7 +409,7 @@ For radio, checkbox and select options, the `v-model` binding values are usually
 
 لكن في بعض الأحيان قد نرغب في ربط القيمة بخاصية ديناميكية من نسخة المكون الحالي. يمكننا استخدام `v-bind` لبلوغه. على غرار ذلك ، يسمح لنا استخدام `v-bind` بربط قيمة الإدخال بقيم غير السلاسل النصية.
 
-### خانة الاختيار
+### خانة الاختيار {#checkbox-1}
 
 ```vue-html
 <input
@@ -434,7 +434,7 @@ For radio, checkbox and select options, the `v-model` binding values are usually
 لا تؤثر السمات `true-value` و `false-value` على سمة `value` للإدخال ، لأن المتصفحات لا تضم الخانات غير المحددة عند إرسال النماذج. لضمان إرسال أحد القيمتين في النموذج (على سبيل المثال ، "نعم" أو "لا") ، استخدم إدخالات زر الانتقاء بدلاً من ذلك.
 :::
 
-### زر الانتقاء
+### زر الانتقاء {#radio-1}
 
 ```vue-html
 <input type="radio" v-model="pick" :value="first" />

src/guide/extras/composition-api-faq.md

@@ -10,6 +10,8 @@ This FAQ assumes prior experience with Vue - in particular, experience with Vue
 
 ## What is Composition API? {#what-is-composition-api}
 
+<VueSchoolLink href="https://vueschool.io/lessons/introduction-to-the-vue-js-3-composition-api" title="Free Composition API Lesson"/>
+
 Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options. It is an umbrella term that covers the following APIs:
 
 - [Reactivity API](/api/reactivity-core.html), e.g. `ref()` and `reactive()`, that allows us to directly create reactive state, computed state, and watchers.

src/guide/extras/reactivity-transform.md

@@ -246,7 +246,7 @@ function useMouse() {
 }
 ```
 
-### Using `$()` on destructured props {#using-on-destructured-props}
+### Using `$$()` on destructured props {#using-on-destructured-props}
 
 `$$()` works on destructured props since they are reactive variables as well. The compiler will convert it with `toRef` for efficiency:
 

src/guide/introduction.md

@@ -13,7 +13,7 @@ footer: false
 
 <style src="@theme/styles/vue-mastery.css"></style>
 <div class="ar vue-mastery-link">
-  <a href="https://www.vuemastery.com/courses-path/beginner" target="_blank">
+  <a href="https://www.vuemastery.com/courses/" target="_blank">
     <div class="banner-wrapper">
       <img class="banner" alt="Vue Mastery banner" width="96px" height="56px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png" />
     </div>

src/guide/quick-start.md

@@ -171,7 +171,7 @@ import { createApp } from 'vue'
 :::tip دعم خرائط الاستيراد في المتصفحات 
 خرائط الاستيراد مدعومة بشكل أصلي في المتصفحات المرتكزة على Chromium، لذا ننصح باستخدام Chrome أو Edge أثناء عملية التعلم.
 
-إذا كنت تستخدم Firefox، فهي مدعومة فقط في الإصدار 102+ ويجب تمكينها حالياً عبر خيار `dom.importMaps.enabled` في `about:config`.
+إذا كنت تستخدم Firefox، فهي مدعومة بشكل افتراضي في الإصدار 108+ أو عن طريق تفعيل الخيار `dom.importMaps.enabled` في `about:config` في النسخ الأخرى 102+
 
 إذا كان متصفحك المفضل لا يدعم خرائط الاستيراد حتى الآن، يمكنك تعويضها باستخدام [es-module-shims](https://github.com/guybedford/es-module-shims).
 :::
@@ -186,6 +186,8 @@ import { createApp } from 'vue'
 
 ```html
 <!-- index.html -->
+<div id="app"></div>
+
 <script type="module">
   import { createApp } from 'vue'
   import MyComponent from './my-component.js'

src/guide/reusability/composables.md

@@ -15,7 +15,7 @@ In the context of Vue applications, a "composable" is a function that leverages
 
 When building frontend applications, we often need to reuse logic for common tasks. For example, we may need to format dates in many places, so we extract a reusable function for that. This formatter function encapsulates **stateless logic**: it takes some input and immediately returns expected output. There are many libraries out there for reusing stateless logic - for example [lodash](https://lodash.com/) and [date-fns](https://date-fns.org/), which you may have heard of.
 
-By contrast, stateful logic involves managing state that changes over time. A simple example would be tracking the current position of the mouse on a page. In real world scenarios, it could also be more complex logic such as touch gestures or connection status to a database.
+By contrast, stateful logic involves managing state that changes over time. A simple example would be tracking the current position of the mouse on a page. In real-world scenarios, it could also be more complex logic such as touch gestures or connection status to a database.
 
 ## Mouse Tracker Example {#mouse-tracker-example}
 

src/guide/reusability/plugins.md

@@ -1,4 +1,4 @@
-# Plugins
+# Plugins {#plugins}
 
 ## Introduction {#introduction}
 

src/guide/scaling-up/tooling.md

@@ -53,7 +53,7 @@ If you are looking for a lighter-weight alternative for no-build-step usage, che
 
 ## IDE Support {#ide-support}
 
-- The recommended IDE setup is [VSCode](https://code.visualstudio.com/) + the [Volar](https://github.com/johnsoncodehk/volar) extension. Volar provides syntax highlighting, TypeScript support, and intellisense for template expressions and component props.
+- The recommended IDE setup is [VSCode](https://code.visualstudio.com/) + the [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension. The extension provides syntax highlighting, TypeScript support, and intellisense for template expressions and component props.
 
   :::tip
   Volar replaces [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.

src/guide/typescript/composition-api.md

@@ -131,7 +131,7 @@ export default defineComponent({
 })
 ```
 
-### Complex prop types
+### Complex prop types {#complex-prop-types}
 
 With type-based declaration, a prop can use a complex type much like any other type:
 

src/guide/typescript/options-api.md

@@ -230,7 +230,7 @@ declare module 'vue' {
 
 See also:
 
-- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/test-dts/componentTypeExtensions.test-d.tsx)
+- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/packages/dts-test/componentTypeExtensions.test-d.tsx)
 
 ### Type Augmentation Placement {#type-augmentation-placement}
 
@@ -290,4 +290,4 @@ The placement of this augmentation is subject the [same restrictions](#type-augm
 
 See also:
 
-- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/test-dts/componentTypeExtensions.test-d.tsx)
+- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/packages/dts-test/componentTypeExtensions.test-d.tsx)