From 7a29ecf2a6f6ab8887b78d9e45ed1aa13d789a4f Mon Sep 17 00:00:00 2001
From: ntepluhina <ntepluhina@gitlab.com>
Date: Sun, 22 Mar 2020 14:58:59 +0200
Subject: [PATCH 1/5] fix: add codepens to events chapter

---
 src/.vuepress/components/events-1.vue | 16 ------------
 src/.vuepress/components/events-2.vue | 23 ------------------
 src/.vuepress/components/events-3.vue | 16 ------------
 src/guide/events.md                   | 35 +++++++++++++++++++--------
 4 files changed, 25 insertions(+), 65 deletions(-)
 delete mode 100644 src/.vuepress/components/events-1.vue
 delete mode 100644 src/.vuepress/components/events-2.vue
 delete mode 100644 src/.vuepress/components/events-3.vue

diff --git a/src/.vuepress/components/events-1.vue b/src/.vuepress/components/events-1.vue
deleted file mode 100644
index 1db5aaf4a3..0000000000
--- a/src/.vuepress/components/events-1.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div id="example-1" class="demo">
-    <button v-on:click="counter += 1">Add 1</button>
-    <p>The button above has been clicked {{ counter }} times.</p>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      counter: 1
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/events-2.vue b/src/.vuepress/components/events-2.vue
deleted file mode 100644
index 300812de2a..0000000000
--- a/src/.vuepress/components/events-2.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div id="example-2" class="demo">
-    <button v-on:click="greet">Greet</button>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      name: 'Vue.js'
-    }
-  },
-  methods: {
-    greet(event) {
-      alert('Hello ' + this.name + '!')
-      if (event) {
-        alert(event.target.tagName)
-      }
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/events-3.vue b/src/.vuepress/components/events-3.vue
deleted file mode 100644
index 6784ffafa8..0000000000
--- a/src/.vuepress/components/events-3.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div id="example-3" class="demo">
-    <button v-on:click="say('hi')">Say hi</button>
-    <button v-on:click="say('what')">Say what</button>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    say(message) {
-      alert(message)
-    }
-  }
-}
-</script>
diff --git a/src/guide/events.md b/src/guide/events.md
index 666d543cb6..338f5e6c1b 100644
--- a/src/guide/events.md
+++ b/src/guide/events.md
@@ -9,7 +9,7 @@ We can use the `v-on` directive to listen to DOM events and run some JavaScript
 For example:
 
 ```html
-<div id="example-1">
+<div id="basic-event">
   <button v-on:click="counter += 1">Add 1</button>
   <p>The button above has been clicked {{ counter }} times.</p>
 </div>
@@ -22,12 +22,17 @@ Vue.createApp({
       counter: 1
     }
   }
-}).mount('#example-1')
+}).mount('#basic-event')
 ```
 
 Result:
 
-<events-1/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="xxGadPZ" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Event handling: basic">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/xxGadPZ">
+  Event handling: basic</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ## Method Event Handlers
 
@@ -36,7 +41,7 @@ The logic for many event handlers will be more complex though, so keeping your J
 For example:
 
 ```html
-<div id="example-2">
+<div id="event-with-method">
   <!-- `greet` is the name of a method defined below -->
   <button v-on:click="greet">Greet</button>
 </div>
@@ -59,19 +64,24 @@ Vue.createApp({
       }
     }
   }
-}).mount('#example-2')
+}).mount('#event-with-method')
 ```
 
 Result:
 
-<events-2/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="jOPvmaX" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Event handling: with a method">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/jOPvmaX">
+  Event handling: with a method</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ## Methods in Inline Handlers
 
 Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:
 
 ```html
-<div id="example-3">
+<div id="inline-handler">
   <button v-on:click="say('hi')">Say hi</button>
   <button v-on:click="say('what')">Say what</button>
 </div>
@@ -84,12 +94,17 @@ Vue.createApp({
       alert(message)
     }
   }
-}).mount('#example-3')
+}).mount('#inline-handler')
 ```
 
 Result:
 
-<events-3/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="WNvgjda" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Event handling: with an inline handler">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNvgjda">
+  Event handling: with an inline handler</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable:
 
@@ -156,7 +171,7 @@ Order matters when using modifiers because the relevant code is generated in the
 <a v-on:click.once="doThis"></a>
 ```
 
-Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](TODO:components-custom-events.html). If you haven't read about components yet, don't worry about this for now.
+Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](component-custom-events.html). If you haven't read about components yet, don't worry about this for now.
 
 Vue also offers the `.passive` modifier, corresponding to [`addEventListener`'s `passive` option](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters).
 

From 7a87c8b5502c89f1654c5e6e978114ffd2b80f7e Mon Sep 17 00:00:00 2001
From: ntepluhina <ntepluhina@gitlab.com>
Date: Tue, 24 Mar 2020 18:14:34 +0200
Subject: [PATCH 2/5] fix: moved forms to codepen

---
 src/.vuepress/components/forms-1.vue | 16 -------
 src/.vuepress/components/forms-2.vue | 18 -------
 src/.vuepress/components/forms-3.vue | 16 -------
 src/.vuepress/components/forms-4.vue | 22 ---------
 src/.vuepress/components/forms-5.vue | 21 --------
 src/.vuepress/components/forms-6.vue | 21 --------
 src/.vuepress/components/forms-7.vue | 21 --------
 src/.vuepress/components/forms-8.vue | 25 ----------
 src/guide/forms.md                   | 72 +++++++++++++++++++++-------
 9 files changed, 56 insertions(+), 176 deletions(-)
 delete mode 100644 src/.vuepress/components/forms-1.vue
 delete mode 100644 src/.vuepress/components/forms-2.vue
 delete mode 100644 src/.vuepress/components/forms-3.vue
 delete mode 100644 src/.vuepress/components/forms-4.vue
 delete mode 100644 src/.vuepress/components/forms-5.vue
 delete mode 100644 src/.vuepress/components/forms-6.vue
 delete mode 100644 src/.vuepress/components/forms-7.vue
 delete mode 100644 src/.vuepress/components/forms-8.vue

diff --git a/src/.vuepress/components/forms-1.vue b/src/.vuepress/components/forms-1.vue
deleted file mode 100644
index 0df191b1f7..0000000000
--- a/src/.vuepress/components/forms-1.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div id="example-1" class="demo">
-    <input v-model="message" placeholder="edit me" />
-    <p>Message is: {{ message }}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      message: ''
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/forms-2.vue b/src/.vuepress/components/forms-2.vue
deleted file mode 100644
index 46b694f95b..0000000000
--- a/src/.vuepress/components/forms-2.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div id="example-textarea" class="demo">
-    <span>Multiline message is:</span>
-    <p style="white-space: pre-line;">{{ message }}</p>
-    <br />
-    <textarea v-model="message" placeholder="add multiple lines"></textarea>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      message: ''
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/forms-3.vue b/src/.vuepress/components/forms-3.vue
deleted file mode 100644
index 68c69a0654..0000000000
--- a/src/.vuepress/components/forms-3.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div id="example-2" class="demo">
-    <input type="checkbox" id="checkbox" v-model="checked" />
-    <label for="checkbox">{{ checked }}</label>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      checked: false
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/forms-4.vue b/src/.vuepress/components/forms-4.vue
deleted file mode 100644
index 2d0063f0e5..0000000000
--- a/src/.vuepress/components/forms-4.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div id="example-3" class="demo">
-    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
-    <label for="jack">Jack</label>
-    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
-    <label for="john">John</label>
-    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
-    <label for="mike">Mike</label>
-    <br />
-    <span>Checked names: {{ checkedNames }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      checkedNames: []
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/forms-5.vue b/src/.vuepress/components/forms-5.vue
deleted file mode 100644
index 4244d0c97c..0000000000
--- a/src/.vuepress/components/forms-5.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div id="example-4" class="demo">
-    <input type="radio" id="one" value="One" v-model="picked" />
-    <label for="one">One</label>
-    <br />
-    <input type="radio" id="two" value="Two" v-model="picked" />
-    <label for="two">Two</label>
-    <br />
-    <span>Picked: {{ picked }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      picked: ''
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/forms-6.vue b/src/.vuepress/components/forms-6.vue
deleted file mode 100644
index 4bebf6074f..0000000000
--- a/src/.vuepress/components/forms-6.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div id="example-5" class="demo">
-    <select v-model="selected">
-      <option disabled value="">Please select one</option>
-      <option>A</option>
-      <option>B</option>
-      <option>C</option>
-    </select>
-    <span>Selected: {{ selected }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selected: ''
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/forms-7.vue b/src/.vuepress/components/forms-7.vue
deleted file mode 100644
index 574fce39e7..0000000000
--- a/src/.vuepress/components/forms-7.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div id="example-6" class="demo">
-    <select v-model="selected" multiple style="width: 50px;">
-      <option>A</option>
-      <option>B</option>
-      <option>C</option>
-    </select>
-    <br />
-    <span>Selected: {{ selected }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selected: []
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/forms-8.vue b/src/.vuepress/components/forms-8.vue
deleted file mode 100644
index a3da617f2d..0000000000
--- a/src/.vuepress/components/forms-8.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div id="example-7" class="demo">
-    <select v-model="selected">
-      <option v-for="option in options" v-bind:value="option.value">
-        {{ option.text }}
-      </option>
-    </select>
-    <span>Selected: {{ selected }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      selected: 'A',
-      options: [
-        { text: 'One', value: 'A' },
-        { text: 'Two', value: 'B' },
-        { text: 'Three', value: 'C' }
-      ]
-    }
-  }
-}
-</script>
diff --git a/src/guide/forms.md b/src/guide/forms.md
index 0bbbef6191..76e2e9a7da 100644
--- a/src/guide/forms.md
+++ b/src/guide/forms.md
@@ -26,7 +26,12 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method)
 <p>Message is: {{ message }}</p>
 ```
 
-<forms-1/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="eYNPEqj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: basic v-model">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYNPEqj">
+  Handling forms: basic v-model</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ### Multiline text
 
@@ -37,7 +42,12 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method)
 <textarea v-model="message" placeholder="add multiple lines"></textarea>
 ```
 
-<forms-2/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="xxGyXaG" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: textarea">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/xxGyXaG">
+  Handling forms: textarea</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Interpolation on textareas won't work. Use `v-model` instead.
 
@@ -58,12 +68,17 @@ Single checkbox, boolean value:
 <label for="checkbox">{{ checked }}</label>
 ```
 
-<forms-3/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="PoqyJVE" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: checkbox">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/PoqyJVE">
+  Handling forms: checkbox</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Multiple checkboxes, bound to the same Array:
 
 ```html
-<div id="example-3">
+<div id="v-model-multiple-checkboxes">
   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
   <label for="jack">Jack</label>
   <input type="checkbox" id="john" value="John" v-model="checkedNames" />
@@ -82,15 +97,20 @@ Vue.createApp({
       checkedNames: []
     }
   }
-}).mount('#example-3')
+}).mount('#v-model-multiple-checkboxes')
 ```
 
-<forms-4/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="bGdmoyj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: multiple checkboxes">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/bGdmoyj">
+  Handling forms: multiple checkboxes</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ### Radio
 
 ```html
-<div id="example-4">
+<div id="v-model-radiobutton">
   <input type="radio" id="one" value="One" v-model="picked" />
   <label for="one">One</label>
   <br />
@@ -108,17 +128,22 @@ Vue.createApp({
       picked: ''
     }
   }
-}).mount('#example-4')
+}).mount('#v-model-radiobutton')
 ```
 
-<forms-5/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="MWwPEMM" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: radiobutton">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/MWwPEMM">
+  Handling forms: radiobutton</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ### Select
 
 Single select:
 
 ```html
-<div id="example-select" class="demo">
+<div id="v-model-select" class="demo">
   <select v-model="selected">
     <option disabled value="">Please select one</option>
     <option>A</option>
@@ -136,10 +161,15 @@ Vue.createApp({
       selected: ''
     }
   }
-}).mount('#example-select')
+}).mount('#v-model-select')
 ```
 
-<forms-6/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="KKpGydL" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: select">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/KKpGydL">
+  Handling forms: select</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 :::tip Note
 If the initial value of your `v-model` expression does not match any of the options, the `<select>` element will render in an "unselected" state. On iOS this will cause the user not being able to select the first item because iOS does not fire a change event in this case. It is therefore recommended to provide a disabled option with an empty value, as demonstrated in the example above.
@@ -157,12 +187,17 @@ Multiple select (bound to Array):
 <span>Selected: {{ selected }}</span>
 ```
 
-<forms-7/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="gOpBXPz" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: select bound to array">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/gOpBXPz">
+  Handling forms: select bound to array</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Dynamic options rendered with `v-for`:
 
 ```html
-<div id="example-select-dynamic" class="demo">
+<div id="v-model-select-dynamic" class="demo">
   <select v-model="selected">
     <option v-for="option in options" v-bind:value="option.value">
       {{ option.text }}
@@ -184,10 +219,15 @@ Vue.createApp({
       ]
     }
   }
-}).mount('#example-select-dynamic')
+}).mount('#v-model-select-dynamic')
 ```
 
-<forms-8/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="abORVZm" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: select with dynamic options">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/abORVZm">
+  Handling forms: select with dynamic options</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ## Value Bindings
 

From e3d12e109601db9da32c6f9795eed1e1fec99d7f Mon Sep 17 00:00:00 2001
From: ntepluhina <ntepluhina@gitlab.com>
Date: Tue, 24 Mar 2020 18:53:23 +0200
Subject: [PATCH 3/5] fix: moved components to codepen

---
 src/.vuepress/components/alert-box.vue      | 14 ----
 src/.vuepress/components/blog-post1.vue     |  9 ---
 src/.vuepress/components/blog-post2.vue     | 14 ----
 src/.vuepress/components/button-counter.vue | 13 ----
 src/.vuepress/components/components-1.vue   |  5 --
 src/.vuepress/components/components-2.vue   |  7 --
 src/.vuepress/components/components-3.vue   |  7 --
 src/.vuepress/components/components-4.vue   | 27 --------
 src/.vuepress/components/components-5.vue   | 11 ---
 src/guide/component-basics.md               | 75 +++++++++++++++------
 10 files changed, 55 insertions(+), 127 deletions(-)
 delete mode 100644 src/.vuepress/components/alert-box.vue
 delete mode 100644 src/.vuepress/components/blog-post1.vue
 delete mode 100644 src/.vuepress/components/blog-post2.vue
 delete mode 100644 src/.vuepress/components/button-counter.vue
 delete mode 100644 src/.vuepress/components/components-1.vue
 delete mode 100644 src/.vuepress/components/components-2.vue
 delete mode 100644 src/.vuepress/components/components-3.vue
 delete mode 100644 src/.vuepress/components/components-4.vue
 delete mode 100644 src/.vuepress/components/components-5.vue

diff --git a/src/.vuepress/components/alert-box.vue b/src/.vuepress/components/alert-box.vue
deleted file mode 100644
index 791efa42fb..0000000000
--- a/src/.vuepress/components/alert-box.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="demo-alert-box">
-    <strong>Error!</strong>
-    <slot></slot>
-  </div>
-</template>
-
-<style scoped>
-.demo-alert-box {
-  padding: 10px 20px;
-  background: #f3beb8;
-  border: 1px solid #f09898;
-}
-</style>
diff --git a/src/.vuepress/components/blog-post1.vue b/src/.vuepress/components/blog-post1.vue
deleted file mode 100644
index 3c7a63fd9a..0000000000
--- a/src/.vuepress/components/blog-post1.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <h3>{{ title }}</h3>
-</template>
-
-<script>
-export default {
-  props: ['title']
-}
-</script>
diff --git a/src/.vuepress/components/blog-post2.vue b/src/.vuepress/components/blog-post2.vue
deleted file mode 100644
index b3d6edcdca..0000000000
--- a/src/.vuepress/components/blog-post2.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <h4>{{ title }}</h4>
-    <button @click="$emit('enlarge-text')">
-      Enlarge text
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ['title']
-}
-</script>
diff --git a/src/.vuepress/components/button-counter.vue b/src/.vuepress/components/button-counter.vue
deleted file mode 100644
index bc113632b2..0000000000
--- a/src/.vuepress/components/button-counter.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <button v-on:click="count++">You clicked me {{ count }} times.</button>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      count: 0
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/components-1.vue b/src/.vuepress/components/components-1.vue
deleted file mode 100644
index 1059054ed2..0000000000
--- a/src/.vuepress/components/components-1.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div id="components-demo" class="demo">
-    <button-counter></button-counter>
-  </div>
-</template>
diff --git a/src/.vuepress/components/components-2.vue b/src/.vuepress/components/components-2.vue
deleted file mode 100644
index 4e2141b12b..0000000000
--- a/src/.vuepress/components/components-2.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div id="components-demo2" class="demo">
-    <button-counter></button-counter>
-    <button-counter></button-counter>
-    <button-counter></button-counter>
-  </div>
-</template>
diff --git a/src/.vuepress/components/components-3.vue b/src/.vuepress/components/components-3.vue
deleted file mode 100644
index 977572ebb2..0000000000
--- a/src/.vuepress/components/components-3.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div id="blog-post-demo" class="demo">
-    <blog-post1 title="My journey with Vue"></blog-post1>
-    <blog-post1 title="Blogging with Vue"></blog-post1>
-    <blog-post1 title="Why Vue is so fun"></blog-post1>
-  </div>
-</template>
diff --git a/src/.vuepress/components/components-4.vue b/src/.vuepress/components/components-4.vue
deleted file mode 100644
index 7a4845e163..0000000000
--- a/src/.vuepress/components/components-4.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div id="blog-posts-events-demo" class="demo">
-    <div :style="{ fontSize: postFontSize + 'em' }">
-      <blog-post2
-        v-for="post in posts"
-        v-bind:key="post.id"
-        v-bind:title="post.title"
-        v-on:enlarge-text="postFontSize += 0.1"
-      ></blog-post2>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      posts: [
-        { id: 1, title: 'My journey with Vue', content: '...content...' },
-        { id: 2, title: 'Blogging with Vue', content: '...content...' },
-        { id: 3, title: 'Why Vue is so fun', content: '...content...' }
-      ],
-      postFontSize: 1
-    }
-  }
-}
-</script>
diff --git a/src/.vuepress/components/components-5.vue b/src/.vuepress/components/components-5.vue
deleted file mode 100644
index f734589848..0000000000
--- a/src/.vuepress/components/components-5.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div id="slots-demo" class="demo">
-    <alert-box>
-      Something bad happened.
-    </alert-box>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md
index dfea033cc3..6d36059611 100644
--- a/src/guide/component-basics.md
+++ b/src/guide/component-basics.md
@@ -1,7 +1,5 @@
 # Components Basics
 
-<div class="vueschool"><a href="https://vueschool.io/courses/vuejs-components-fundamentals?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Components Fundamentals Course">Watch a free video course on Vue School</a></div>
-
 ## Base Example
 
 Here's an example of a Vue component:
@@ -17,7 +15,10 @@ app.component('button-counter', {
       count: 0
     }
   },
-  template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
+  template: `
+    <button v-on:click="count++">
+      You clicked me {{ count }} times.
+    </button>`
 })
 ```
 
@@ -33,7 +34,12 @@ Components are reusable Vue instances with a name: in this case, `<button-counte
 app.mount('#components-demo')
 ```
 
-<components-1/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="abORVEJ" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/abORVEJ">
+  Component basics</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Since components are reusable Vue instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`.
 
@@ -49,7 +55,12 @@ Components can be reused as many times as you want:
 </div>
 ```
 
-<components-2 />
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="rNVqYvM" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: reusing components">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/rNVqYvM">
+  Component basics: reusing components</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Notice that when clicking on the buttons, each one maintains its own, separate `count`. That's because each time you use a component, a new **instance** of it is created.
 
@@ -73,7 +84,7 @@ app.component('my-component-name', {
 
 Globally registered components can be used in the template of `app` instance created afterwards - and even inside all subcomponents of that Vue instance's component tree.
 
-That's all you need to know about registration for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Component Registration](TODO:components-registration.html).
+That's all you need to know about registration for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Component Registration](component-registration.md).
 
 ## Passing Data to Child Components with Props
 
@@ -82,12 +93,14 @@ Earlier, we mentioned creating a component for blog posts. The problem is, that
 Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a `props` option:
 
 ```js
-const app = Vue.createApp()
+const app = Vue.createApp({})
 
 app.component('blog-post', {
   props: ['title'],
   template: `<h4>{{ title }}</h4>`
 })
+
+app.mount('#blog-post-demo')
 ```
 
 A component can have as many props as you'd like and by default, any value can be passed to any prop. In the template above, you'll see that we can access this value on the component instance, just like with `data`.
@@ -95,12 +108,19 @@ A component can have as many props as you'd like and by default, any value can b
 Once a prop is registered, you can pass data to it as a custom attribute, like this:
 
 ```html
-<blog-post title="My journey with Vue"></blog-post>
-<blog-post title="Blogging with Vue"></blog-post>
-<blog-post title="Why Vue is so fun"></blog-post>
+<div id="blog-post-demo" class="demo">
+  <blog-post title="My journey with Vue"></blog-post>
+  <blog-post title="Blogging with Vue"></blog-post>
+  <blog-post title="Why Vue is so fun"></blog-post>
+</div>
 ```
 
-<components-3/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="PoqyOaX" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: passing props">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/PoqyOaX">
+  Component basics: passing props</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 In a typical app, however, you'll likely have an array of posts in `data`:
 
@@ -141,7 +161,7 @@ Then want to render a component for each one:
 
 Above, you'll see that we can use `v-bind` to dynamically pass props. This is especially useful when you don't know the exact content you're going to render ahead of time.
 
-That's all you need to know about props for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Props](TODO:components-props.html).
+That's all you need to know about props for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Props](component-props.html).
 
 ## Listening to Child Components Events
 
@@ -166,7 +186,7 @@ Which can be used in the template to control the font size of all blog posts:
 
 ```html
 <div id="blog-posts-events-demo">
-  <div :style="{ fontSize: postFontSize + 'em' }">
+  <div v-bind:style="{ fontSize: postFontSize + 'em' }">
     <blog-post
       v-for="post in posts"
       v-bind:key="post.id"
@@ -216,7 +236,12 @@ Then the child component can emit an event on itself by calling the built-in [**
 
 Thanks to the `v-on:enlarge-text="postFontSize += 0.1"` listener, the parent will receive the event and update `postFontSize` value.
 
-<components-4/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="KKpGyrp" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: emitting events">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/KKpGyrp">
+  Component basics: emitting events</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ### Emitting a Value With an Event
 
@@ -305,7 +330,7 @@ Now `v-model` should work perfectly with this component:
 <custom-input v-model="searchText"></custom-input>
 ```
 
-That's all you need to know about custom component events for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Custom Events](TODO:components-custom-events.html).
+That's all you need to know about custom component events for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Custom Events](component-custom-events.md).
 
 ## Content Distribution with Slots
 
@@ -319,7 +344,12 @@ Just like with HTML elements, it's often useful to be able to pass content to a
 
 Which might render something like:
 
-<components-5/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="jOPeaob" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: slots">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/jOPeaob">
+  Component basics: slots</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 Fortunately, this task is made very simple by Vue's custom `<slot>` element:
 
@@ -336,13 +366,18 @@ app.component('alert-box', {
 
 As you'll see above, we just add the slot where we want it to go -- and that's it. We're done!
 
-That's all you need to know about slots for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Slots](TODO:components-slots.html).
+That's all you need to know about slots for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Slots](component-slots.md).
 
 ## Dynamic Components
 
 Sometimes, it's useful to dynamically switch between components, like in a tabbed interface:
 
-<components-6/>
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="oNXaoKy" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: dynamic components">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/oNXaoKy">
+  Component basics: dynamic components</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 The above is made possible by Vue's `<component>` element with the `is` special attribute:
 
@@ -356,7 +391,7 @@ In the example above, `currentTabComponent` can contain either:
 - the name of a registered component, or
 - a component's options object
 
-See [this sandbox](https://codesandbox.io/s/dynamic-components-dvtl8) to experiment with the full code, or [this version](https://codesandbox.io/s/dynamic-components-with-options-xfnrp) for an example binding to a component's options object, instead of its registered name.
+See [this sandbox](https://codepen.io/team/Vue/pen/oNXaoKy) to experiment with the full code, or [this version](https://codepen.io/team/Vue/pen/oNXapXM) for an example binding to a component's options object, instead of its registered name.
 
 Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes **will be bound as DOM attributes**. For some properties such as `value` to work as you would expect, you will need to bind them using the [`.prop` modifier](TODO:../api/#v-bind).
 
@@ -405,7 +440,7 @@ It should be noted that **these limitations does _not_ apply if you are using st
 
 - String templates (e.g. `template: '...'`)
 - [Single-file (`.vue`) components](TODO:single-file-components.html)
-- [`<script type="text/x-template">`](TODO:components-edge-cases.html#X-Templates)
+- `<script type="text/x-template">`
 
 That's all you need to know about DOM template parsing caveats for now - and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself and build something fun.
 

From caa9167f8c9eec79b3b626e15d1edab7af152817 Mon Sep 17 00:00:00 2001
From: ntepluhina <ntepluhina@gitlab.com>
Date: Tue, 24 Mar 2020 18:54:00 +0200
Subject: [PATCH 4/5] fix: delete unused components

---
 src/.vuepress/components/components-6.vue | 58 -----------------------
 src/.vuepress/components/tab-archive.vue  |  3 --
 src/.vuepress/components/tab-home.vue     |  3 --
 src/.vuepress/components/tab-posts.vue    |  3 --
 4 files changed, 67 deletions(-)
 delete mode 100644 src/.vuepress/components/components-6.vue
 delete mode 100644 src/.vuepress/components/tab-archive.vue
 delete mode 100644 src/.vuepress/components/tab-home.vue
 delete mode 100644 src/.vuepress/components/tab-posts.vue

diff --git a/src/.vuepress/components/components-6.vue b/src/.vuepress/components/components-6.vue
deleted file mode 100644
index aba40af9c8..0000000000
--- a/src/.vuepress/components/components-6.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div id="dynamic-component-demo" class="demo">
-    <button
-      v-for="tab in tabs"
-      v-bind:key="tab"
-      class="dynamic-component-demo-tab-button"
-      v-bind:class="{
-        'dynamic-component-demo-tab-button-active': tab === currentTab
-      }"
-      v-on:click="currentTab = tab"
-    >
-      {{ tab }}
-    </button>
-    <component
-      v-bind:is="currentTabComponent"
-      class="dynamic-component-demo-tab"
-    ></component>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      currentTab: 'Home',
-      tabs: ['Home', 'Posts', 'Archive']
-    }
-  },
-  computed: {
-    currentTabComponent() {
-      return `tab-${this.currentTab.toLowerCase()}`
-    }
-  }
-}
-</script>
-
-<style scoped>
-.dynamic-component-demo-tab-button {
-  padding: 6px 10px;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  background: #f0f0f0;
-  margin-bottom: -1px;
-  margin-right: -1px;
-}
-.dynamic-component-demo-tab-button:hover {
-  background: #e0e0e0;
-}
-.dynamic-component-demo-tab-button-active {
-  background: #e0e0e0;
-}
-.dynamic-component-demo-tab {
-  border: 1px solid #ccc;
-  padding: 10px;
-}
-</style>
diff --git a/src/.vuepress/components/tab-archive.vue b/src/.vuepress/components/tab-archive.vue
deleted file mode 100644
index 9b54ae2c81..0000000000
--- a/src/.vuepress/components/tab-archive.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Archive component</div>
-</template>
diff --git a/src/.vuepress/components/tab-home.vue b/src/.vuepress/components/tab-home.vue
deleted file mode 100644
index 566d6caaab..0000000000
--- a/src/.vuepress/components/tab-home.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Home component</div>
-</template>
diff --git a/src/.vuepress/components/tab-posts.vue b/src/.vuepress/components/tab-posts.vue
deleted file mode 100644
index 3d01a211f3..0000000000
--- a/src/.vuepress/components/tab-posts.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Posts component</div>
-</template>

From a00a43fd011b9d3cd54e60680956ca77ff4f0249 Mon Sep 17 00:00:00 2001
From: ntepluhina <ntepluhina@gitlab.com>
Date: Tue, 24 Mar 2020 20:24:29 +0200
Subject: [PATCH 5/5] fix: small updates to components

---
 src/guide/component-custom-events.md  | 4 ++--
 src/guide/component-props.md          | 4 +++-
 src/guide/component-provide-inject.md | 2 +-
 src/guide/component-registration.md   | 2 --
 src/guide/component-slots.md          | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md
index 0ac723cc0e..8bb5297e04 100644
--- a/src/guide/component-custom-events.md
+++ b/src/guide/component-custom-events.md
@@ -1,6 +1,6 @@
 # Custom Events
 
-> This page assumes you've already read the [Components Basics](components.md). Read that first if you are new to components.
+> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
 
 ## Event Names
 
@@ -80,7 +80,7 @@ app.component('my-component', {
 })
 ```
 
-We can check `modelModifier` object keys and write a handler to change the emitted value. In the code below we will capitalize the string:
+We can check `modelModifiers` object keys and write a handler to change the emitted value. In the code below we will capitalize the string:
 
 ```html
 <div id="app">
diff --git a/src/guide/component-props.md b/src/guide/component-props.md
index 13cc241252..2ae9155416 100644
--- a/src/guide/component-props.md
+++ b/src/guide/component-props.md
@@ -1,6 +1,6 @@
 # Props
 
-> This page assumes you've already read the [Components Basics](components.md). Read that first if you are new to components.
+> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
 
 ## Prop Types
 
@@ -244,6 +244,8 @@ A non-prop attribute is an attribute that is passed to a component, but does not
 
 While explicitly defined props are preferred for passing information to a child component, authors of component libraries can't always foresee the contexts in which their components might be used. That's why components can accept arbitrary attributes.
 
+> TODO: revise this after attrs fallthrough RFC is merged
+
 When the component returns a single root node, attributes will be implicitly added to the root node's props. For example, imagine we're using a 3rd-party `bootstrap-date-input` component with a Bootstrap plugin that requires a `data-date-picker` attribute on the `input`. We can add this attribute to our component instance:
 
 ```html
diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md
index 6988429296..ec30c98d57 100644
--- a/src/guide/component-provide-inject.md
+++ b/src/guide/component-provide-inject.md
@@ -1,6 +1,6 @@
 # Provide / inject
 
-> This page assumes you've already read the [Components Basics](components.md). Read that first if you are new to components.
+> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
 
 Usually, when we need to pass data from the parent to child component, we use [props](component-props.md). Imagine the structure where you have some deeply nested components and you only need something from the parent component in the deep nested child. In this case, you still need to pass the prop down the whole component chain which might be annoying.
 
diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md
index c2ea17c984..f80ab4569d 100644
--- a/src/guide/component-registration.md
+++ b/src/guide/component-registration.md
@@ -2,8 +2,6 @@
 
 > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/global-vs-local-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Free Vue.js Component Registration lesson">Watch a free video lesson on Vue School</a></div>
-
 ## Component Names
 
 When registering a component, it will always be given a name. For example, in the global registration we've seen so far:
diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md
index e5369b76c6..6eb172a19b 100644
--- a/src/guide/component-slots.md
+++ b/src/guide/component-slots.md
@@ -1,6 +1,6 @@
 # Slots
 
-> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
 
 ## Slot Content
 
@@ -222,7 +222,7 @@ The rendered HTML will be:
 </div>
 ```
 
-Note that **`v-slot` can only be added to a `<template>`** (with [one exception](#Abbreviated-Syntax-for-Lone-Default-Slots))
+Note that **`v-slot` can only be added to a `<template>`** (with [one exception](#abbreviated-syntax-for-lone-default-slots))
 
 ## Scoped Slots