diff --git a/src/.vuepress/components/community/team/partners.js b/src/.vuepress/components/community/team/partners.js index 5e1dd97..2caeb13 100644 --- a/src/.vuepress/components/community/team/partners.js +++ b/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', diff --git a/src/.vuepress/components/community/themes/theme-data.js b/src/.vuepress/components/community/themes/theme-data.js index 4604a5e..7e0d9ff 100644 --- a/src/.vuepress/components/community/themes/theme-data.js +++ b/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: [ { diff --git a/src/.vuepress/components/guide/contributing/translations-data.js b/src/.vuepress/components/guide/contributing/translations-data.js index 82b5ba2..aef5d0e 100644 --- a/src/.vuepress/components/guide/contributing/translations-data.js +++ b/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/' }, diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 5fbe7c6..3370925 100644 --- a/src/.vuepress/config.js +++ b/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: [ [ diff --git a/src/.vuepress/theme/components/BannerTop.vue b/src/.vuepress/theme/components/BannerTop.vue deleted file mode 100644 index 6e18821..0000000 --- a/src/.vuepress/theme/components/BannerTop.vue +++ /dev/null @@ -1,167 +0,0 @@ - - - diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue index dd8984d..10e09d6 100644 --- a/src/.vuepress/theme/layouts/Layout.vue +++ b/src/.vuepress/theme/layouts/Layout.vue @@ -5,8 +5,6 @@ @touchstart="onTouchStart" @touchend="onTouchEnd" > - -
@@ -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: { diff --git a/src/api/application-api.md b/src/api/application-api.md index 2dd0d7b..b6a1470 100644 --- a/src/api/application-api.md +++ b/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. diff --git a/src/api/application-config.md b/src/api/application-config.md index 0bd8bdc..b53487f 100644 --- a/src/api/application-config.md +++ b/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. diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index 31b7c03..0f1e4bb 100644 --- a/src/api/built-in-components.md +++ b/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' ``` +- **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 and passing vnode of the same type, you need to provide keys: - -```html - -``` + In advanced use cases, it can sometimes be useful to render an existing VNode via a template. Using a `` makes this possible, but it should be seen as an escape hatch, used to avoid rewriting the entire template as a `render` function. + + ```html + + ``` -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 `` 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) diff --git a/src/api/directives.md b/src/api/directives.md index b58ee87..02cc8a0 100644 --- a/src/api/directives.md +++ b/src/api/directives.md @@ -35,7 +35,7 @@ - **Example:** ```html -
+
``` - **See also:** [Data Binding Syntax - Interpolations](../guide/template-syntax.html#raw-html) diff --git a/src/api/global-api.md b/src/api/global-api.md index 6527cb5..eec4d7c 100644 --- a/src/api/global-api.md +++ b/src/api/global-api.md @@ -193,9 +193,7 @@ createApp({ }) ``` -For advanced usage, `defineAsyncComponent` can accept an object: - -The `defineAsyncComponent` method can also return an object of the following format: +For advanced usage, `defineAsyncComponent` can accept an object of the following format: ```js import { defineAsyncComponent } from 'vue' diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md index cfb7b2b..cf73d93 100644 --- a/src/api/sfc-script-setup.md +++ b/src/api/sfc-script-setup.md @@ -131,6 +131,31 @@ import * as Form from './form-components' ``` +## 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 + + +``` +```html + +``` + ## `defineProps` and `defineEmits` To declare `props` and `emits` in ` ``` +:::warning +`render` function is not supported in this scenario. Please use one normal ` ``` ### `entry-client.js` -The client entry creates the application using the root component factory and mounts it to the DOM: +The client entry creates the application using the `App.vue` component and mounts it to the DOM: ```js -import createApp from './app' +import { createSSRApp } from 'vue' +import App from './App.vue' // client-specific bootstrapping logic... -const { app } = createApp({ - // here we can pass additional arguments to app factory -}) +const app = createSSRApp(App) // this assumes App.vue template root element has `id="app"` app.mount('#app') @@ -122,12 +143,11 @@ app.mount('#app') The server entry uses a default export which is a function that can be called repeatedly for each render. At this moment, it doesn't do much other than returning the app instance - but later we will perform server-side route matching and data pre-fetching logic here. ```js -import createApp from './app' +import { createSSRApp } from 'vue' +import App from './App.vue' -export default function() { - const { app } = createApp({ - /*...*/ - }) +export default function () { + const app = createSSRApp(App) return { app diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md index eb98a33..ee20b1c 100644 --- a/src/guide/transitions-overview.md +++ b/src/guide/transitions-overview.md @@ -176,7 +176,7 @@ Easing can also convey the quality of material being animated. Take this pen for -You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting a cubic bezier property, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this. +You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting the cubic-bezier function's parameters, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this. Though you can achieve great effects for simple animation with the two handles the cubic-bezier ease offers, JavaScript allows multiple handles, and therefore, allows for much more variance. diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md index 8038704..c8363a0 100644 --- a/src/guide/typescript-support.md +++ b/src/guide/typescript-support.md @@ -88,7 +88,7 @@ Or, if you want to combine TypeScript with a [JSX `render` function](/guide/rend For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-component.html) (SFCs), get the awesome [Volar extension](https://github.com/johnsoncodehk/volar), which provides TypeScript inference inside SFCs and many other great features. -[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue. +[WebStorm](https://www.jetbrains.com/webstorm/) provides out of the box support for both TypeScript and Vue. Other JetBrains IDEs also support them, either out of the box or via [this free plugin](https://plugins.jetbrains.com/plugin/9442-vue-js). ## Defining Vue Components diff --git a/src/style-guide/README.md b/src/style-guide/README.md index f0ed015..e337e82 100644 --- a/src/style-guide/README.md +++ b/src/style-guide/README.md @@ -1485,7 +1485,7 @@ Prefer class selectors over element selectors in `scoped` styles, because large ::: details Detailed Explanation To scope styles, Vue adds a unique attribute to component elements, such as `data-v-f3f3eg9`. Then selectors are modified so that only matching elements with this attribute are selected (e.g. `button[data-v-f3f3eg9]`). -The problem is that large numbers of [element-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=a%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than [class-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible. +The problem is that large numbers of element-attribute selectors (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than class-attribute selectors (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible. :::