From e082cce53be3c918af24b8f1800dac6669ea0921 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Mon, 14 Feb 2022 17:54:40 +0000
Subject: [PATCH] Migrate changes from master to main

---
 src/api/built-in-special-attributes.md    | 2 +-
 src/api/sfc-spec.md                       | 2 +-
 src/ecosystem/themes/themes.json          | 4 ++--
 src/guide/essentials/forms.md             | 4 +++-
 src/guide/extras/web-components.md        | 4 ++--
 src/guide/scaling-up/sfc.md               | 2 +-
 src/guide/scaling-up/tooling.md           | 2 ++
 src/guide/typescript/overview.md          | 2 +-
 src/style-guide/rules-use-with-caution.md | 2 +-
 9 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/api/built-in-special-attributes.md b/src/api/built-in-special-attributes.md
index 7863ac5276..aa03745105 100644
--- a/src/api/built-in-special-attributes.md
+++ b/src/api/built-in-special-attributes.md
@@ -4,7 +4,7 @@
 
 The `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.
 
-- **Expects:** `number | string`
+- **Expects:** `number | string | symbol`
 
 - **Details**
 
diff --git a/src/api/sfc-spec.md b/src/api/sfc-spec.md
index a9990719a9..5747228c28 100644
--- a/src/api/sfc-spec.md
+++ b/src/api/sfc-spec.md
@@ -36,7 +36,7 @@ export default {
 
 ### `<template>`
 
-- Each `*.vue` file can contain at most one `<template>` block at a time.
+- Each `*.vue` file can contain at most one top-level `<template>` block at a time.
 
 - Contents will be extracted and passed on to `@vue/compiler-dom`, pre-compiled into JavaScript render functions, and attached to the exported component as its `render` option.
 
diff --git a/src/ecosystem/themes/themes.json b/src/ecosystem/themes/themes.json
index f7b02262a1..b5582c8f94 100644
--- a/src/ecosystem/themes/themes.json
+++ b/src/ecosystem/themes/themes.json
@@ -127,7 +127,7 @@
   },
   {
     "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 @@
   },
   {
     "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/guide/essentials/forms.md b/src/guide/essentials/forms.md
index 146edd92ac..328c3cb319 100644
--- a/src/guide/essentials/forms.md
+++ b/src/guide/essentials/forms.md
@@ -434,7 +434,9 @@ If you want user input to be automatically typecast as a number, you can add the
 <input v-model.number="age" />
 ```
 
-This is often useful, because even with `<input type="number">`, the value of HTML input elements always returns a string. If the value cannot be parsed with `parseFloat()`, then the original value is used.
+If the value cannot be parsed with `parseFloat()`, then the original value is used instead.
+
+The `number` modifier is applied automatically if the input has `type="number"`.
 
 ### `.trim`
 
diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md
index ab9a6c663e..047b845316 100644
--- a/src/guide/extras/web-components.md
+++ b/src/guide/extras/web-components.md
@@ -52,7 +52,7 @@ module.exports = {
       .rule('vue')
       .use('vue-loader')
       .tap(options => ({
-        ...options
+        ...options,
         compilerOptions: {
           // treat any tag that starts with ion- as custom elements
           isCustomElement: tag => tag.startsWith('ion-')
@@ -208,7 +208,7 @@ It is recommended to export the individual element constructors to give your use
 ```js
 import { defineCustomElement } from 'vue'
 import Foo from './MyFoo.ce.vue'
-import Bar from './MyBar.ce.bar'
+import Bar from './MyBar.ce.vue'
 
 const MyFoo = defineCustomElement(Foo)
 const MyBar = defineCustomElement(Bar)
diff --git a/src/guide/scaling-up/sfc.md b/src/guide/scaling-up/sfc.md
index c9ee373a67..3a0fdd83d4 100644
--- a/src/guide/scaling-up/sfc.md
+++ b/src/guide/scaling-up/sfc.md
@@ -48,7 +48,7 @@ SFC is a defining feature of Vue as a framework, and is the recommended approach
 - Static Site Generation (SSG)
 - Any non-trivial frontend where a build step can be justified for better development experience (DX).
 
-That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 5kb subset of Vue optimized for progressive enhancement.
+That said, we do realize there are scenarios where SFCs can feel like overkill. This is why Vue can still be used via plain JavaScript without a build step. If you are just looking for enhancing largely static HTML with light interactions, you can also check out [petite-vue](https://github.com/vuejs/petite-vue), a 6kb subset of Vue optimized for progressive enhancement.
 
 ## How It Works
 
diff --git a/src/guide/scaling-up/tooling.md b/src/guide/scaling-up/tooling.md
index 918aacb628..a6efc1db72 100644
--- a/src/guide/scaling-up/tooling.md
+++ b/src/guide/scaling-up/tooling.md
@@ -152,5 +152,7 @@ The official loader that provides Vue SFC support in webpack. If you are using V
 - [Vue + Vite on Repl.it](https://replit.com/@templates/VueJS-with-Vite)
 - [Vue on CodeSandbox](https://codesandbox.io/s/vue-3)
 - [Vue on Codepen](https://codepen.io/pen/editor/vue)
+- [Vue on Components.studio](https://components.studio/create/vue3)
+- [Vue on WebComponents.dev](https://webcomponents.dev/create/cevue)
 
 <!-- TODO ## Backend Framework Integrations -->
diff --git a/src/guide/typescript/overview.md b/src/guide/typescript/overview.md
index 72d5c03695..d39070b560 100644
--- a/src/guide/typescript/overview.md
+++ b/src/guide/typescript/overview.md
@@ -36,7 +36,7 @@ With a Vite-based setup, the dev server and the bundler are transpilation-only a
 
   - [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin) is also needed to get type support for `*.vue` imports in TS files.
 
-- [WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.
+- [WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue. Other JetBrains IDEs support them too, either out of the box or via [a free plugin](https://plugins.jetbrains.com/plugin/9442-vue-js).
 
 ### Configuring `tsconfig.json`
 
diff --git a/src/style-guide/rules-use-with-caution.md b/src/style-guide/rules-use-with-caution.md
index 76d7540049..297ad57d3e 100644
--- a/src/style-guide/rules-use-with-caution.md
+++ b/src/style-guide/rules-use-with-caution.md
@@ -11,7 +11,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.
 :::
 
 <div class="style-example style-example-bad">