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

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() {},

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)

src/api/sfc-script-setup.md

@@ -131,6 +131,31 @@ import * as Form from './form-components'
 </template>
 ```
 
+## Using Custom Directives
+
+Globally registered custom directives just work as expected, and local ones can be used directly in the template, much like we explained above for components. 
+
+But there's one restriction to be aware of: You must name local custom directives according to the following schema: `vNameOfDirective` in order for them to be directly usable in the template.
+
+```html
+<script setup>
+const vMyDirective = {
+  beforeMount: (el) => {
+    // do something with the element
+  }
+}
+</script>
+<template>
+  <h1 v-my-directive>This is a Heading</h1>
+</template>
+```
+```html
+<script setup>
+  // imports also work, and can be renamed to fit the required naming schema
+  import { myDirective as vMyDirective } from './MyDirective.js'
+</script>
+```
+
 ## `defineProps` and `defineEmits`
 
 To declare `props` and `emits` in `<script setup>`, you must use the `defineProps` and `defineEmits` APIs, which provide full type inference support and are automatically available inside `<script setup>`:
@@ -218,6 +243,10 @@ export default {
 </script>
 ```
 
+:::warning
+`render` function is not supported in this scenario. Please use one normal `<script>` with `setup` option instead.
+:::
+
 ## Top-level `await`
 
 Top-level `await` can be used inside `<script setup>`. The resulting code will be compiled as `async setup()`: