docs(en): merge docs-next/master into vue-docs-next/main @ 6ef3f136

README.md

@@ -11,7 +11,7 @@ See the [Vue Docs Writing Guide](https://v3.vuejs.org/guide/writing-guide.html)
 1. Clone repository
 
 ```bash
-git clone git@github.com:vuejs/docs.git
+git clone https://github.com/vuejs/docs.git
 ```
 
 2. Install dependencies

src/.vuepress/components/community/team/partners.js

@@ -211,15 +211,14 @@ export default shuffle([
     github: 'rstoenescu',
     twitter: 'quasarframework',
     work: {
-      role: 'Developer',
+      role: 'Author',
       org: 'Quasar Framework',
-      orgUrl: 'http://quasar-framework.org/'
+      orgUrl: 'http://quasar.dev/'
     },
     reposPersonal: [
-      'quasarframework/quasar',
-      'quasarframework/quasar-cli',
-      'quasarframework/quasar-play'
-    ]
+      'quasarframework/quasar'
+    ],
+    links: ['https://quasar.dev']
   },
   {
     name: 'Jilson Thomas',

src/.vuepress/components/community/themes/theme-data.js

@@ -127,7 +127,7 @@ export default [
   },
   {
     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.`,
+    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',
     products: [
       {
@@ -218,7 +218,7 @@ export default [
   },
   {
     name: 'Flatlogic',
-    description: `Check the admin dashboards templates built by our partners from [Flatlogic](https://flatlogic.com/templates?ref=x-fdkuTAVW). With these themes you can see how real applications is 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/.vuepress/components/guide/contributing/translations-data.js

@@ -13,7 +13,7 @@ export const labels = {
 export const repos = [
   { lang: 'en-us', owner: 'vuejs', repo: 'docs', branch: 'master', url: 'https://v3.vuejs.org/' },
   { lang: 'fr', owner: 'demahom18', repo: 'docs-next', branch: 'master', url: 'https://vue3-fr.netlify.app' },
-  { lang: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian' },
+  { lang: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian', url: 'https://v3-vuejsid-docs.netlify.app/' },
   { lang: 'ja', owner: 'vuejs-jp', repo: 'ja.vuejs.org', branch: 'lang-ja', url: 'https://v3.ja.vuejs.org/' },
   { lang: 'ko', owner: 'vuejs-kr', repo: 'docs-next', branch: 'rootKoKr', url: 'https://v3.ko.vuejs.org/'  },
   { lang: 'pt-br', owner: 'vuejs-br', repo: 'docs-next', branch: 'master', url: 'https://vuejsbr-docs-next.netlify.app/' },

src/.vuepress/config.js

@@ -274,7 +274,7 @@ module.exports = {
       'link',
       {
         href:
-          'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
+        'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
         rel: 'stylesheet'
       }
     ],
@@ -510,7 +510,7 @@ module.exports = {
       custom: 'CKYD62QM',
       placement: 'vuejsorg'
     },
-    topBanner: false
+    topBanner: true
   },
   plugins: [
     [

src/.vuepress/theme/layouts/Layout.vue

@@ -5,8 +5,6 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd"
   >
-    <BannerTop v-if="showTopBanner" @close="closeBannerTop" />
-
     <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
 
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
@@ -52,7 +50,6 @@ import Page from '@theme/components/Page.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
 import BuySellAds from '@theme/components/BuySellAds.vue'
 import CarbonAds from '@theme/components/CarbonAds.vue'
-import BannerTop from '@theme/components/BannerTop.vue'
 import { resolveSidebarItems } from '../util'
 
 export default {
@@ -63,15 +60,15 @@ export default {
     Page,
     Sidebar,
     Navbar,
-    BannerTop,
     BuySellAds,
     CarbonAds
   },
 
   data() {
     return {
-      showTopBanner: false,
-      isSidebarOpen: false
+      isSidebarOpen: false,
+      isMenuFixed: false,
+      menuPosition: 0
     }
   },
 
@@ -115,8 +112,7 @@ export default {
         {
           'no-navbar': !this.shouldShowNavbar,
           'sidebar-open': this.isSidebarOpen,
-          'no-sidebar': !this.shouldShowSidebar,
-          'has-top-banner': this.showTopBanner
+          'no-sidebar': !this.shouldShowSidebar
         },
         userPageClass
       ]
@@ -131,8 +127,6 @@ export default {
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
-
-    this.showTopBanner = false
   },
 
   methods: {

src/api/application-api.md

@@ -96,7 +96,8 @@ app.directive('my-directive', {
   mounted() {},
   // called before the containing component's VNode is updated
   beforeUpdate() {},
-  // called after the containing component's VNode and the VNodes of its children // have updated
+  // called after the containing component's VNode and the VNodes of its
+  // children have updated
   updated() {},
   // called before the bound element's parent component is unmounted
   beforeUnmount() {},
@@ -234,7 +235,7 @@ app.mount('#my-app')
   Providing values via the application is especially useful when writing plugins, as plugins typically wouldn't be able to provide values using components. It is an alternative to using [globalProperties](application-config.html#globalproperties).
 
   :::tip Note
-  The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.
+  The `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down a reactive object, properties on that object do remain reactive.
   :::
 
 - **Example:**
@@ -297,9 +298,9 @@ setTimeout(() => app.unmount(), 5000)
 
 - **Usage:**
 
-  Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method.
+  Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the `install` method.
 
-  The install method will be called with the application as its first argument. Any `options` passed to `use` will be passed on in subsequent arguments.
+  The `install` method will be called with the application as its first argument. Any `options` passed to `use` will be passed on in subsequent arguments.
 
   When this method is called on the same plugin multiple times, the plugin will be installed only once.
 

src/api/application-config.md

@@ -26,7 +26,7 @@ app.config.errorHandler = (err, vm, info) => {
 }
 ```
 
-Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the application instance.
+Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the corresponding application instance.
 
 > Error tracking services [Sentry](https://sentry.io/for/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) provide official integrations using this option.
 
@@ -146,7 +146,7 @@ This config option is only respected when using the full build (i.e. the standal
 app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')
 ```
 
-Specifies a method to recognize custom elements defined outside of Vue (e.g., using the Web Components APIs). If component matches this condition, it won't need local or global registration and Vue won't throw a warning about an `Unknown custom element`.
+Specifies a method to recognize custom elements defined outside of Vue (e.g., using the Web Components APIs). If a component matches this condition, it won't need local or global registration and Vue won't throw a warning about an `Unknown custom element`.
 
 > Note that all native HTML and SVG tags don't need to be matched in this function - Vue parser performs this check automatically.
 

src/api/built-in-components.md

@@ -20,7 +20,7 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
 
 - **Props:**
 
-  - `is` - `string | Component`
+  - `is` - `string | Component | VNode`
 
 - **Usage:**
 
@@ -41,6 +41,8 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
   <component :is="href ? 'a' : 'span'"></component>
   ```
 
+- **Usage with built-in components:**
+
   The built-in components `KeepAlive`, `Transition`, `TransitionGroup`, and `Teleport` can all be passed to `is`, but you must register them if you want to pass them by name. For example:
 
   ```js
@@ -62,15 +64,15 @@ import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
 
   Registration is not required if you pass the component itself to `is` rather than its name.
 
-- **key:**
+- **Usage with VNodes:**
 
-When using <component :is="vnode"> and passing vnode of the same type, you need to provide keys:
-  
-```html
-<component :is="current" :key="selected" />
-```
+  In advanced use cases, it can sometimes be useful to render an existing VNode via a template. Using a `<component>` makes this possible, but it should be seen as an escape hatch, used to avoid rewriting the entire template as a `render` function.
+
+  ```html
+  <component :is="vnode" :key="aSuitableKey" />
+  ```
 
-Otherwise, you are passing two compiled vnodes of the same type to the renderer. Because they are compiled as completely static, they will not be updated at all.
+  A caveat of mixing VNodes and templates in this way is that you need to provide a suitable `key` attribute. The VNode will be considered static, so any updates will be ignored unless the `key` changes. The `key` can be on the VNode or the `<component>` tag, but either way it must change every time you want the VNode to re-render. This caveat doesn't apply if the nodes have different types, e.g. changing a `span` to a `div`.
 
 - **See also:** [Dynamic Components](../guide/component-dynamic-async.html)
 

src/api/directives.md

@@ -35,7 +35,7 @@
 - **Example:**
 
   ```html
-  <div v-html="html"></div>
+  <div v-html="'<h1>Hello World</h1>'"></div>
   ```
 
 - **See also:** [Data Binding Syntax - Interpolations](../guide/template-syntax.html#raw-html)