From 64c19de072490db767b9b7282289005a6be41c21 Mon Sep 17 00:00:00 2001 From: patak Date: Sat, 3 Dec 2022 07:35:51 +0100 Subject: [PATCH 001/785] chore: update plugin vue links (#2115) --- src/api/application.md | 2 +- src/guide/scaling-up/tooling.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/api/application.md b/src/api/application.md index 85781e16d2..f5307594fa 100644 --- a/src/api/application.md +++ b/src/api/application.md @@ -402,7 +402,7 @@ This config option is only respected when using the full build (i.e. the standal - For `vue-loader`: [pass via the `compilerOptions` loader option](https://vue-loader.vuejs.org/options.html#compileroptions). Also see [how to configure it in `vue-cli`](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader). -- For `vite`: [pass via `@vitejs/plugin-vue` options](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#options). +- For `vite`: [pass via `@vitejs/plugin-vue` options](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#options). ::: ### app.config.compilerOptions.isCustomElement {#app-config-compileroptions-iscustomelement} diff --git a/src/guide/scaling-up/tooling.md b/src/guide/scaling-up/tooling.md index 2bededf491..999396c64f 100644 --- a/src/guide/scaling-up/tooling.md +++ b/src/guide/scaling-up/tooling.md @@ -26,7 +26,7 @@ To get started with Vite + Vue, simply run: This command will install and execute [create-vue](https://github.com/vuejs/create-vue), the official Vue project scaffolding tool. - To learn more about Vite, check out the [Vite docs](https://vitejs.dev). -- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#readme). +- To configure Vue-specific behavior in a Vite project, for example passing options to the Vue compiler, check out the docs for [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#readme). Both online playgrounds mentioned above also support downloading files as a Vite project. @@ -124,7 +124,7 @@ Users previously using Vue CLI may be used to having linters configured via webp Custom blocks are compiled into imports to the same Vue file with different request queries. It is up to the underlying build tool to handle these import requests. -- If using Vite, a custom Vite plugin should be used to transform matched custom blocks into executable JavaScript. [Example](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-transforming-custom-blocks) +- If using Vite, a custom Vite plugin should be used to transform matched custom blocks into executable JavaScript. [Example](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#example-for-transforming-custom-blocks) - If using Vue CLI or plain webpack, a webpack loader should be configured to transform the matched blocks. [Example](https://vue-loader.vuejs.org/guide/custom-blocks.html) @@ -144,7 +144,7 @@ Always prefer using this package via the `vue/compiler-sfc` deep import since th ### `@vitejs/plugin-vue` {#vitejs-plugin-vue} -- [Docs](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) +- [Docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) Official plugin that provides Vue SFC support in Vite. From 4d0e455602b96b68d0c08ecc3ba8b0490c58ff57 Mon Sep 17 00:00:00 2001 From: patak Date: Sun, 4 Dec 2022 01:44:24 +0100 Subject: [PATCH 002/785] chore: update link to ssr-vue playground (#2116) --- src/guide/extras/web-components.md | 2 +- src/guide/scaling-up/ssr.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md index 8cc96c85c6..02d6cc78ac 100644 --- a/src/guide/extras/web-components.md +++ b/src/guide/extras/web-components.md @@ -194,7 +194,7 @@ customElements.define('my-example', ExampleElement) If you wish to customize what files should be imported in custom element mode (for example, treating _all_ SFCs as custom elements), you can pass the `customElement` option to the respective build plugins: -- [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue#using-vue-sfcs-as-custom-elements) +- [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#using-vue-sfcs-as-custom-elements) - [vue-loader](https://github.com/vuejs/vue-loader/tree/next#v16-only-options) ### Tips for a Vue Custom Elements Library {#tips-for-a-vue-custom-elements-library} diff --git a/src/guide/scaling-up/ssr.md b/src/guide/scaling-up/ssr.md index a1bfe130a3..2e243b3b25 100644 --- a/src/guide/scaling-up/ssr.md +++ b/src/guide/scaling-up/ssr.md @@ -229,7 +229,7 @@ A complete implementation would be quite complex and depends on the build toolch Vite provides built-in [support for Vue server-side rendering](https://vitejs.dev/guide/ssr.html), but it is intentionally low-level. If you wish to go directly with Vite, check out [vite-plugin-ssr](https://vite-plugin-ssr.com/), a community plugin that abstracts away many challenging details for you. -You can also find an example Vue + Vite SSR project using manual setup [here](https://github.com/vitejs/vite/tree/main/playground/ssr-vue), which can serve as a base to build upon. Note this is only recommended if you are experienced with SSR / build tools and really want to have complete control over the higher-level architecture. +You can also find an example Vue + Vite SSR project using manual setup [here](https://github.com/vitejs/vite-plugin-vue/tree/main/playground/ssr-vue), which can serve as a base to build upon. Note this is only recommended if you are experienced with SSR / build tools and really want to have complete control over the higher-level architecture. ## Writing SSR-friendly Code {#writing-ssr-friendly-code} From fa80c86b866f1bb0038f06fdd90ea129f64dfe44 Mon Sep 17 00:00:00 2001 From: Rajeeban A <31872062+rajee-a@users.noreply.github.com> Date: Mon, 5 Dec 2022 07:15:31 +0530 Subject: [PATCH 003/785] fix typo (#2117) An uppercase word has been changed to a lowercase one. --- src/sponsor/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sponsor/index.md b/src/sponsor/index.md index f7cdd6b022..93c89c04d6 100644 --- a/src/sponsor/index.md +++ b/src/sponsor/index.md @@ -44,7 +44,7 @@ You can also try to convince your employer to sponsor Vue as a business. This ma - Prominent logo placement in the README of [`vuejs/core`](https://github.com/vuejs/core) and [`vuejs/vue`](https://github.com/vuejs/core). - **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`. + - Large logo placement in the README of `vuejs/core` and `vuejs/vue`. - **Silver (USD$250/mo)**: - Medium logo placement in the `BACKERS.md` file of `vuejs/core` and `vuejs/vue`. - **Bronze (USD$100/mo)**: From 008c9abe27b2a5e2850f96d62d1a6202397278f2 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 7 Dec 2022 01:57:52 +0800 Subject: [PATCH 004/785] update Nuxt url --- src/guide/extras/ways-of-using-vue.md | 4 ++-- src/guide/scaling-up/ssr.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/extras/ways-of-using-vue.md b/src/guide/extras/ways-of-using-vue.md index 1a93de988b..ca1b6ea963 100644 --- a/src/guide/extras/ways-of-using-vue.md +++ b/src/guide/extras/ways-of-using-vue.md @@ -33,7 +33,7 @@ Pure client-side SPAs are problematic when the app is sensitive to SEO and time- Vue provides first-class APIs to "render" a Vue app into HTML strings on the server. This allows the server to send back already-rendered HTML, allowing end users to see the content immediately while the JavaScript is being downloaded. Vue will then "hydrate" the application on the client side to make it interactive. This is called [Server-Side Rendering (SSR)](/guide/scaling-up/ssr) and it greatly improves Core Web Vital metrics such as [Largest Contentful Paint (LCP)](https://web.dev/lcp/). -There are higher-level Vue-based frameworks built on top of this paradigm, such as [Nuxt](https://v3.nuxtjs.org/), which allow you to develop a fullstack application using Vue and JavaScript. +There are higher-level Vue-based frameworks built on top of this paradigm, such as [Nuxt](https://nuxt.com/), which allow you to develop a fullstack application using Vue and JavaScript. ## JAMStack / SSG {#jamstack-ssg} @@ -47,7 +47,7 @@ There are two flavors of SSG: single-page and multi-page. Both flavors pre-rende Single-page SSGs are better suited if you expect non-trivial interactivity, deep session lengths, or persisted elements / state across navigations. Otherwise, multi-page SSG would be the better choice. -The Vue team also maintains a static-site generator called [VitePress](https://vitepress.vuejs.org/), which powers this website you are reading right now! VitePress supports both flavors of SSG. [Nuxt](https://v3.nuxtjs.org/) also supports SSG. You can even mix SSR and SSG for different routes in the same Nuxt app. +The Vue team also maintains a static-site generator called [VitePress](https://vitepress.vuejs.org/), which powers this website you are reading right now! VitePress supports both flavors of SSG. [Nuxt](https://nuxt.com/) also supports SSG. You can even mix SSR and SSG for different routes in the same Nuxt app. ## Beyond the Web {#beyond-the-web} diff --git a/src/guide/scaling-up/ssr.md b/src/guide/scaling-up/ssr.md index 2e243b3b25..f4848c651b 100644 --- a/src/guide/scaling-up/ssr.md +++ b/src/guide/scaling-up/ssr.md @@ -219,7 +219,7 @@ A complete implementation would be quite complex and depends on the build toolch ### Nuxt {#nuxt} -[Nuxt](https://v3.nuxtjs.org/) is a higher-level framework built on top of the Vue ecosystem which provides a streamlined development experience for writing universal Vue applications. Better yet, you can also use it as a static site generator! We highly recommend giving it a try. +[Nuxt](https://nuxt.com/) is a higher-level framework built on top of the Vue ecosystem which provides a streamlined development experience for writing universal Vue applications. Better yet, you can also use it as a static site generator! We highly recommend giving it a try. ### Quasar {#quasar} From 8bb7480894fd7236f959390b67aa20bf38e4649c Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Wed, 7 Dec 2022 18:17:09 +0100 Subject: [PATCH 005/785] Added a warning regarding async setup (#2105) * chore: added a warning regarding async setup * Update src/api/composition-api-setup.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> * fix: removed tips Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/api/composition-api-setup.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/api/composition-api-setup.md b/src/api/composition-api-setup.md index 15c4f254a7..046cd54dfe 100644 --- a/src/api/composition-api-setup.md +++ b/src/api/composition-api-setup.md @@ -38,11 +38,11 @@ export default { ``` -Note that [refs](/api/reactivity-core.html#ref) returned from `setup` are [automatically shallow unwrapped](/guide/essentials/reactivity-fundamentals.html#deep-reactivity) when accessed in the template so you do not need to use `.value` when accessing them. They are also unwrapped in the same way when accessed on `this`. +[refs](/api/reactivity-core.html#ref) returned from `setup` are [automatically shallow unwrapped](/guide/essentials/reactivity-fundamentals.html#deep-reactivity) when accessed in the template so you do not need to use `.value` when accessing them. They are also unwrapped in the same way when accessed on `this`. -:::tip `setup()` itself does not have access to the component instance - `this` will have a value of `undefined` inside `setup()`. You can access Composition-API-exposed values from Options API, but not the other way around. -::: + +`setup()` should return an object _synchronously_. The only case when `async setup()` can be used is when the component is a descendant of a [Suspense](../guide/built-ins/suspense.html) component. ## Accessing Props {#accessing-props} From 051d926a4bcafd9037d7e1a650725e19bf044fd3 Mon Sep 17 00:00:00 2001 From: Ana Marija Majkic <83665033+AnaaMarijaa@users.noreply.github.com> Date: Fri, 16 Dec 2022 11:31:33 +0100 Subject: [PATCH 006/785] Fix broken portal-vue link (#2125) --- src/about/team/members-core.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/about/team/members-core.json b/src/about/team/members-core.json index cf4323d7c6..4d7cf3a2ad 100644 --- a/src/about/team/members-core.json +++ b/src/about/team/members-core.json @@ -215,7 +215,7 @@ }, { "label": "portal-vue*", - "url": "https://github.com/LinusBorg/portal-vue*" + "url": "https://github.com/LinusBorg/portal-vue" } ], "reposPersonal": ["portal-vue"], From 49545c204139e049423e2b25b4d0091f7c25c3af Mon Sep 17 00:00:00 2001 From: de-oz <101826623+de-oz@users.noreply.github.com> Date: Sun, 18 Dec 2022 23:10:20 +0300 Subject: [PATCH 007/785] Fix a grammatical error (#2128) --- src/guide/essentials/template-syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/essentials/template-syntax.md b/src/guide/essentials/template-syntax.md index c1e67e0cd6..250e4e652e 100644 --- a/src/guide/essentials/template-syntax.md +++ b/src/guide/essentials/template-syntax.md @@ -66,7 +66,7 @@ Attributes that start with `:` may look a bit different from normal HTML, but it ### Boolean Attributes {#boolean-attributes} -[Boolean attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes) are attributes that can indicate true / false values by its presence on an element. For example, [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) is one of the most commonly used boolean attributes. +[Boolean attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes) are attributes that can indicate true / false values by their presence on an element. For example, [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) is one of the most commonly used boolean attributes. `v-bind` works a bit differently in this case: From f8df4155553f91125cd2b02410828ff319cc655e Mon Sep 17 00:00:00 2001 From: Wang Ningning <2453549420@qq.com> Date: Sat, 31 Dec 2022 07:12:42 +0800 Subject: [PATCH 008/785] Update transition.md (#2135) Fix some typos --- src/guide/built-ins/transition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md index 99f4d904cd..d552ae93d4 100644 --- a/src/guide/built-ins/transition.md +++ b/src/guide/built-ins/transition.md @@ -91,7 +91,7 @@ There are six classes applied for enter / leave transitions. 4. `v-leave-from`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame. -5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when a leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition. +5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when a leaving transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition. 6. `v-leave-to`: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave-from` is removed), removed when the transition/animation finishes. From 698856aa9a4babb5a0915b9d7e2992c2d24706a9 Mon Sep 17 00:00:00 2001 From: de-oz <101826623+de-oz@users.noreply.github.com> Date: Sat, 31 Dec 2022 02:50:11 +0300 Subject: [PATCH 009/785] Fix a grammatical mistake (#2139) --- src/guide/essentials/reactivity-fundamentals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/essentials/reactivity-fundamentals.md b/src/guide/essentials/reactivity-fundamentals.md index 9ce79af57f..5b6f243463 100644 --- a/src/guide/essentials/reactivity-fundamentals.md +++ b/src/guide/essentials/reactivity-fundamentals.md @@ -101,7 +101,7 @@ export default {
{{ state.count }}
``` -Similarly, we can declare functions that mutate reactive state in the same scope and expose it as a method alongside the state: +Similarly, we can declare functions that mutate reactive state in the same scope and expose them as methods alongside the state: ```js{7-9,14} import { reactive } from 'vue' From bea9c1dc557f545bb7521964308d6f61689e0367 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Sat, 31 Dec 2022 01:27:13 +0100 Subject: [PATCH 010/785] Fix-styleguide-1 (#2132) * chore: added composition API for props * fix: removed mixins point from the styleguide * fix: added preference switch to styleguide --- .../theme/components/PreferenceSwitch.vue | 8 +- src/style-guide/rules-essential.md | 138 ++++++------------ 2 files changed, 46 insertions(+), 100 deletions(-) diff --git a/.vitepress/theme/components/PreferenceSwitch.vue b/.vitepress/theme/components/PreferenceSwitch.vue index aef74e7f8a..088d8bfdcc 100644 --- a/.vitepress/theme/components/PreferenceSwitch.vue +++ b/.vitepress/theme/components/PreferenceSwitch.vue @@ -11,9 +11,9 @@ import { const route = useRoute() const show = $computed(() => - /^\/(guide|tutorial|examples)\//.test(route.path) + /^\/(guide|tutorial|examples|style-guide)\//.test(route.path) ) -const showSFC = $computed(() => !/^\/guide/.test(route.path)) +const showSFC = $computed(() => !/^\/guide|style-guide/.test(route.path)) let isOpen = $ref(true) @@ -206,11 +206,11 @@ function useToggleFn( font-size: 11px; padding: 8px 4px; } - + .vt-switch { margin: auto; } - + .switch-link { margin-left: auto; } diff --git a/src/style-guide/rules-essential.md b/src/style-guide/rules-essential.md index 21a0d37dee..81b5ef4462 100644 --- a/src/style-guide/rules-essential.md +++ b/src/style-guide/rules-essential.md @@ -43,6 +43,7 @@ Detailed [prop definitions](/guide/components/props.html#prop-validation) have t - In development, Vue will warn you if a component is ever provided incorrectly formatted props, helping you catch potential sources of error. ::: +

Bad

@@ -81,6 +82,47 @@ props: { } ``` +
+
+ +
+
+

Bad

+ +```js +// This is only OK when prototyping +const props = defineProps(['status']) +``` + +
+ +
+

Good

+ +```js +const props = defineProps({ + status: String +}) +``` + +```js +// Even better! + +const props = defineProps({ + status: { + type: String, + required: true, + + validator: (value) => { + return ['syncing', 'synced', 'version-conflict', 'error'].includes( + value + ) + } + } +}) +``` + +
## Use keyed `v-for` {#use-keyed-v-for} @@ -339,99 +381,3 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd ``` - -## Avoid exposing private functions in mixins {#avoid-exposing-private-functions-in-mixins} - -Always use the `$_` prefix for custom private properties in a plugin, mixin, etc that should not be considered public API. Then to avoid conflicts with code by other authors, also include a named scope (e.g. `$_yourPluginName_`). - -::: details Detailed Explanation -Vue uses the `_` prefix to define its own private properties, so using the same prefix (e.g. `_update`) risks overwriting an instance property. Even if you check and Vue is not currently using a particular property name, there is no guarantee a conflict won't arise in a later version. - -As for the `$` prefix, its purpose within the Vue ecosystem is special instance properties that are exposed to the user, so using it for _private_ properties would not be appropriate. - -Instead, we recommend combining the two prefixes into `$_`, as a convention for user-defined private properties that guarantee no conflicts with Vue. -::: - -
-

Bad

- -```js -const myGreatMixin = { - // ... - methods: { - update() { - // ... - } - } -} -``` - -```js -const myGreatMixin = { - // ... - methods: { - _update() { - // ... - } - } -} -``` - -```js -const myGreatMixin = { - // ... - methods: { - $update() { - // ... - } - } -} -``` - -```js -const myGreatMixin = { - // ... - methods: { - $_update() { - // ... - } - } -} -``` - -
- -
-

Good

- -```js -const myGreatMixin = { - // ... - methods: { - $_myGreatMixin_update() { - // ... - } - } -} -``` - -```js -// Even better! -const myGreatMixin = { - // ... - methods: { - publicMethod() { - // ... - myPrivateFunction() - } - } -} - -function myPrivateFunction() { - // ... -} - -export default myGreatMixin -``` - -
From 3a810941cbdfc57be0a183ff386077dc37cabb64 Mon Sep 17 00:00:00 2001 From: Evan You Date: Sat, 24 Dec 2022 12:04:57 +0800 Subject: [PATCH 011/785] lts links --- src/about/faq.md | 6 +++++- src/guide/introduction.md | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/about/faq.md b/src/about/faq.md index 5248dafd0c..982d0fc32a 100644 --- a/src/about/faq.md +++ b/src/about/faq.md @@ -20,7 +20,11 @@ In general, Vue 3 provides smaller bundle sizes, better performance, better scal If you intend to migrate an existing Vue 2 app to Vue 3, consult the [migration guide](https://v3-migration.vuejs.org/). -Vue 2.7, which was shipped in July 2022, is the final minor release of the Vue 2 version range. Vue 2 has now entered maintenance mode: it will no longer ship new features, but will continue to receive critical bug fixes and security updates for 18 months starting from the 2.7 release date. This means **Vue 2 will reach End of Life by the end of 2023**. We believe this should provide plenty of time for most of the ecosystem to migrate over to Vue 3. However, we also understand that there could be teams or projects that cannot upgrade by this timeline while still needing to fulfill security and compliance requirements. We are planning to provide extended support for Vue 2 for teams with such needs - if your team expects to be using Vue 2 beyond the end of 2023, make sure to plan ahead and register your interest [here](https://airtable.com/shrj37Zf4ZIfrxFzh). +## Is Vue 2 Still Supported? {#is-vue-2-still-supported} + +Vue 2.7, which was shipped in July 2022, is the final minor release of the Vue 2 version range. Vue 2 has now entered maintenance mode: it will no longer ship new features, but will continue to receive critical bug fixes and security updates for 18 months starting from the 2.7 release date. This means **Vue 2 will reach End of Life on December 31st, 2023**. + +We believe this should provide plenty of time for most of the ecosystem to migrate over to Vue 3. However, we also understand that there could be teams or projects that cannot upgrade by this timeline while still needing to fulfill security and compliance requirements. We are partnering with industry experts to provide extended support for Vue 2 for teams with such needs - if your team expects to be using Vue 2 beyond the end of 2023, make sure to plan ahead and learn more about [Vue 2 Extended LTS](https://v2.vuejs.org/lts/). ## What license does Vue use? {#what-license-does-vue-use} diff --git a/src/guide/introduction.md b/src/guide/introduction.md index 1eb9310fcd..538e92d521 100644 --- a/src/guide/introduction.md +++ b/src/guide/introduction.md @@ -6,6 +6,7 @@ footer: false :::info You are reading the documentation for Vue 3! +- Vue 2 support will end on Dec 31, 2023. Learn more about [Vue 2 Extended LTS](https://v2.vuejs.org/lts/). - Vue 2 documentation has been moved to [v2.vuejs.org](https://v2.vuejs.org/). - Upgrading from Vue 2? Check out the [Migration Guide](https://v3-migration.vuejs.org/). ::: From a138a2a4e65c7f0c45824f6f053972819b5378fb Mon Sep 17 00:00:00 2001 From: Heniker Date: Sun, 1 Jan 2023 22:03:46 +0300 Subject: [PATCH 012/785] Update application.md (#2138) * Update application.md Mention [Augmenting Global Properties](https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties) under `app.config.globalProperties`. This guide is really hard to find, because it is in Options API section, while it actually has uses in Composition API as well. * Update src/api/application.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/api/application.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/api/application.md b/src/api/application.md index f5307594fa..f369d0b142 100644 --- a/src/api/application.md +++ b/src/api/application.md @@ -522,6 +522,8 @@ An object that can be used to register global properties that can be accessed on } } ``` + +- **See also:** [Guide - Augmenting Global Properties](/guide/typescript/options-api.html#augmenting-global-properties) ## app.config.optionMergeStrategies {#app-config-optionmergestrategies} From d88083335c0c80839a8b880d35865af5d346b113 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Mon, 2 Jan 2023 07:34:54 +0000 Subject: [PATCH 013/785] Links to TS docs from the API section (#2141) --- src/api/built-in-special-attributes.md | 5 ++++- src/api/composition-api-dependency-injection.md | 4 ++-- src/api/options-state.md | 12 +++++++++--- src/api/reactivity-core.md | 6 +++--- 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/api/built-in-special-attributes.md b/src/api/built-in-special-attributes.md index 74115c9412..bcc0ccf8d8 100644 --- a/src/api/built-in-special-attributes.md +++ b/src/api/built-in-special-attributes.md @@ -80,7 +80,10 @@ Denotes a [template ref](/guide/essentials/template-refs.html). `this.$refs` is also non-reactive, therefore you should not attempt to use it in templates for data-binding. -- **See also:** [Template Refs](/guide/essentials/template-refs.html) +- **See also:** + - [Guide - Template Refs](/guide/essentials/template-refs.html) + - [Guide - Typing Template Refs](/guide/typescript/composition-api.html#typing-template-refs) + - [Guide - Typing Component Template Refs](/guide/typescript/composition-api.html#typing-component-template-refs) ## is {#is} diff --git a/src/api/composition-api-dependency-injection.md b/src/api/composition-api-dependency-injection.md index 61c699b2b7..ec07dc600a 100644 --- a/src/api/composition-api-dependency-injection.md +++ b/src/api/composition-api-dependency-injection.md @@ -39,7 +39,7 @@ Provides a value that can be injected by descendant components. - **See also**: - [Guide - Provide / Inject](/guide/components/provide-inject.html) - - [Guide - Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject) + - [Guide - Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject) ## inject() {#inject} @@ -103,4 +103,4 @@ Injects a value provided by an ancestor component or the application (via `app.p - **See also**: - [Guide - Provide / Inject](/guide/components/provide-inject.html) - - [Guide - Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject) + - [Guide - Typing Provide / Inject](/guide/typescript/composition-api.html#typing-provide-inject) diff --git a/src/api/options-state.md b/src/api/options-state.md index e618caede6..04666f112d 100644 --- a/src/api/options-state.md +++ b/src/api/options-state.md @@ -125,7 +125,9 @@ Declare the props of a component. } ``` -- **See also:** [Props](/guide/components/props.html) +- **See also:** + - [Guide - Props](/guide/components/props.html) + - [Guide - Typing Component Props](/guide/typescript/options-api.html#typing-component-props) ## computed {#computed} @@ -205,7 +207,9 @@ Declare computed properties to be exposed on the component instance. } ``` -- **See also:** [Computed Properties](/guide/essentials/computed.html) +- **See also:** + - [Guide - Computed Properties](/guide/essentials/computed.html) + - [Guide - Typing Computed Properties](/guide/typescript/options-api.html#typing-computed-properties) ## methods {#methods} @@ -429,7 +433,9 @@ Declare the custom events emitted by the component. } ``` -* **See also:** [Fallthrough Attributes](/guide/components/attrs.html) +- **See also:** + - [Guide - Fallthrough Attributes](/guide/components/attrs.html) + - [Guide - Typing Component Emits](/guide/typescript/options-api.html#typing-component-emits) ## expose {#expose} diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md index 825bcad73b..c3078ae180 100644 --- a/src/api/reactivity-core.md +++ b/src/api/reactivity-core.md @@ -41,7 +41,7 @@ Takes an inner value and returns a reactive and mutable ref object, which has a - **See also:** - [Guide - Reactive Variables with `ref()`](/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref) - - [Guide - Typing `ref()`](/guide/typescript/composition-api.html#typing-ref) + - [Guide - Typing `ref()`](/guide/typescript/composition-api.html#typing-ref) ## computed() {#computed} @@ -111,7 +111,7 @@ Takes a getter function and returns a readonly reactive [ref](#ref) object for t - **See also:** - [Guide - Computed Properties](/guide/essentials/computed.html) - [Guide - Computed Debugging](/guide/extras/reactivity-in-depth.html#computed-debugging) - - [Guide - Typing `computed()`](/guide/typescript/composition-api.html#typing-computed) + - [Guide - Typing `computed()`](/guide/typescript/composition-api.html#typing-computed) ## reactive() {#reactive} @@ -188,7 +188,7 @@ Returns a reactive proxy of the object. - **See also:** - [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html) - - [Guide - Typing `reactive()`](/guide/typescript/composition-api.html#typing-reactive) + - [Guide - Typing `reactive()`](/guide/typescript/composition-api.html#typing-reactive) ## readonly() {#readonly} From f634c9b719a4e8706fd150c5fb12b84ee57d0131 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Mon, 2 Jan 2023 07:35:21 +0000 Subject: [PATCH 014/785] Add a comment about not importing defineExpose (#2140) --- src/guide/essentials/template-refs.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/guide/essentials/template-refs.md b/src/guide/essentials/template-refs.md index 3238e5101b..f8e5bc9864 100644 --- a/src/guide/essentials/template-refs.md +++ b/src/guide/essentials/template-refs.md @@ -227,6 +227,7 @@ import { ref } from 'vue' const a = 1 const b = ref(2) +// Compiler macros, such as defineExpose, don't need to be imported defineExpose({ a, b From 7f3b9a56a7ec52418c458991728fab1823e446cb Mon Sep 17 00:00:00 2001 From: Szilard Orban Date: Mon, 2 Jan 2023 08:39:01 +0100 Subject: [PATCH 015/785] Add class to the Skip Link in the accessibility.md (#2123) - CSS syntax is case-insensitive so it is better to use kebab case (skip-link) instead of camel case (skipLink) - The anchor tag must have a class of skip-link --- src/guide/best-practices/accessibility.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/best-practices/accessibility.md b/src/guide/best-practices/accessibility.md index 23ab7620cb..c7a8887700 100644 --- a/src/guide/best-practices/accessibility.md +++ b/src/guide/best-practices/accessibility.md @@ -15,7 +15,7 @@ Typically this is done on the top of `App.vue` as it will be the first focusable ```vue-html ``` @@ -23,7 +23,7 @@ Typically this is done on the top of `App.vue` as it will be the first focusable To hide the link unless it is focused, you can add the following style: ```css -.skipLink { +.skip-link { white-space: nowrap; margin: 1em auto; top: 0; @@ -32,7 +32,7 @@ To hide the link unless it is focused, you can add the following style: margin-left: -72px; opacity: 0; } -.skipLink:focus { +.skip-link:focus { opacity: 1; background-color: white; padding: 0.5em; From 262b5a17b324bc82567fbe4fa1c8abd90e7fb458 Mon Sep 17 00:00:00 2001 From: BuShe Pie Date: Mon, 2 Jan 2023 23:36:12 +0800 Subject: [PATCH 016/785] Removed unnecessary escape character (#2142) --- src/api/api.data.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/api.data.ts b/src/api/api.data.ts index 7a585ee9ef..4899a6ccec 100644 --- a/src/api/api.data.ts +++ b/src/api/api.data.ts @@ -87,9 +87,9 @@ function slugify(text: string): string { // Replace special characters .replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g, '-') // Remove continuous separators - .replace(/\-{2,}/g, '-') + .replace(/-{2,}/g, '-') // Remove prefixing and trailing separators - .replace(/^\-+|\-+$/g, '') + .replace(/^-+|-+$/g, '') // ensure it doesn't start with a number (#121) .replace(/^(\d)/, '_$1') // lowercase From a35b5de57836771b9d8519bbe5df689cf6d18373 Mon Sep 17 00:00:00 2001 From: trent Date: Fri, 6 Jan 2023 18:38:56 -0500 Subject: [PATCH 017/785] Fix casing of Sass (#2151) --- src/api/sfc-spec.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/sfc-spec.md b/src/api/sfc-spec.md index dde58a9c05..35314897a4 100644 --- a/src/api/sfc-spec.md +++ b/src/api/sfc-spec.md @@ -88,7 +88,7 @@ Blocks can declare pre-processor languages using the `lang` attribute. The most ``` -`lang` can be applied to any block - for example we can use ` From 10bfe9310976ceb7027e44f6898464fddaee71bb Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Sun, 8 Jan 2023 16:04:28 +0000 Subject: [PATCH 024/785] Composition API example of SFC (#2145) * Composition API version * fix * Fix problems with new SFC example Co-authored-by: Peter Kompasz --- src/guide/scaling-up/sfc.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/guide/scaling-up/sfc.md b/src/guide/scaling-up/sfc.md index 63dc3c9af9..6c2c1ce766 100644 --- a/src/guide/scaling-up/sfc.md +++ b/src/guide/scaling-up/sfc.md @@ -4,6 +4,8 @@ Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic, **and** styling of a Vue component in a single file. Here's an example SFC: +
+ ```vue + + + + +``` + +
+ As we can see, Vue SFC is a natural extension of the classic trio of HTML, CSS and JavaScript. The `