From 04f80cbc7165113c847efd449d93529b832a3979 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Wed, 7 Oct 2020 08:43:24 +0200
Subject: [PATCH 01/20] feat: Add migration guide for 3 changes: - $listeners
 removed - v-on.native modifier removed - new emits option

---
 src/.vuepress/config.js                       |  3 +
 src/guide/migration/emits-option.md           | 61 +++++++++++++++
 src/guide/migration/introduction.md           |  9 ++-
 src/guide/migration/listeners-removed.md      | 76 +++++++++++++++++++
 .../migration/v-on-native-modifier-removed.md | 66 ++++++++++++++++
 5 files changed, 212 insertions(+), 3 deletions(-)
 create mode 100644 src/guide/migration/emits-option.md
 create mode 100644 src/guide/migration/listeners-removed.md
 create mode 100644 src/guide/migration/v-on-native-modifier-removed.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 1e1b5e88b0..1057a3a012 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -123,6 +123,7 @@ const sidebar = {
         '/guide/migration/custom-directives',
         '/guide/migration/custom-elements-interop',
         '/guide/migration/data-option',
+        '/guide/migration/emits-option',
         '/guide/migration/events-api',
         '/guide/migration/filters',
         '/guide/migration/fragments',
@@ -132,10 +133,12 @@ const sidebar = {
         '/guide/migration/inline-template-attribute',
         '/guide/migration/key-attribute',
         '/guide/migration/keycode-modifiers',
+        '/guide/migration/listeners-removed',
         '/guide/migration/props-default-this',
         '/guide/migration/render-function-api',
         '/guide/migration/slots-unification',
         '/guide/migration/transition',
+        '/guide/migration/v-on-native-modifier-removed',
         '/guide/migration/v-model',
         '/guide/migration/v-if-v-for',
         '/guide/migration/v-bind'
diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
new file mode 100644
index 0000000000..17f2e96da7
--- /dev/null
+++ b/src/guide/migration/emits-option.md
@@ -0,0 +1,61 @@
+---
+title: \`emits\` option
+badges:
+  - new
+---
+
+# `emits` Option <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+Vue 3 now offers an `emits` option similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent.
+
+## 2.x Syntax
+
+In Vue 2, you can define the props that a component received, but you can't define which ebents it can emit:
+
+```javascript
+<template>
+  <p>{{ text }}</p>
+  <button v-on:click="$emit('accepted')">OK</button>
+</template>
+<script>
+  export default {
+    props: ['text'],
+  }
+</script>
+```
+
+## 3.x Syntax
+
+Similar to props, the events that the component emit can now be defined with the `emits` option.
+
+```javascript
+<template>
+  <p>{{ text }}</p>
+  <button v-on:click="$emit('accepted')">OK</button>
+</template>
+<script>
+  export default {
+    props: ['text'],
+    emits: ['accepted']
+  }
+</script>
+```
+
+The option also excepts an object notation, which allows to define validators for the arguments that have passed with the emitted event, similar to validators in props definitions.
+
+For more Information on this, please read the [API documentation for this feature](../api/options-data.md#emits).
+
+## Migration Strategy
+
+Even though this is the new optional feature, it is highly recommended that you document all of the emitted events of your components this way because of the [removal of the `.native` modifier](./native-modifier-removed.md).
+
+All events not defined with `emits` are now added as DOM event listeners to the components root node (unless `inheritAttrs: false` has been set).
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
+- [Migration guide - `$listeners` removed](/.listeners-removed.md)
+- [Migration guide - `.native` modifier removed](./native-modifier-removed.md)
+- [Migration guide - Changes in the Render Functions API](./render-functions.md)
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index 74cd2eca07..69b8bad32f 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -1,10 +1,10 @@
 # Introduction
 
-::: info 
-New to Vue.js? Check out our [Essentials Guide](/guide/introduction.html) to get started. 
+::: info
+New to Vue.js? Check out our [Essentials Guide](/guide/introduction.html) to get started.
 :::
 
-This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change. 
+This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change.
 
 - [Quickstart](#quickstart)
 - [Notable New Features](#notable-new-features)
@@ -69,6 +69,7 @@ The following consists a list of breaking changes from 2.x:
 - [`key` usage on `<template v-for>` and non-`v-for` nodes has changed](/guide/migration/key-attribute.html)
 - [`v-if` and `v-for` precedence when used on the same element has changed](/guide/migration/v-if-v-for.html)
 - [`v-bind="object"` is now order-sensitive](/guide/migration/v-bind.html)
+- [`v-on:event.native` modifier has been removed](./native-modifier-removed.md)
 - [`ref` inside `v-for` no longer register an array of refs](/guide/migration/array-refs.html)
 
 ### Components
@@ -76,11 +77,13 @@ The following consists a list of breaking changes from 2.x:
 - [Functional components can only be created using a plain function](/guide/migration/functional-components.html)
 - [`functional` attribute on single-file component (SFC) `<template>` and `functional` component option are deprecated](/guide/migration/functional-components.html)
 - [Async components now require `defineAsyncComponent` method to be created](/guide/migration/async-components.html)
+- [Component events should now be documented `emits` option]('./emits-option.md)
 
 ### Render Function
 
 - [Render function API changed](/guide/migration/render-function-api.html)
 - [`$scopedSlots` property is removed and all slots are exposed via `$slots` as functions](/guide/migration/slots-unification.html)
+- [`$listeners` has been removed / merged into `$attrs`](./listeners-removed)
 
 ### Custom Elements
 
diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
new file mode 100644
index 0000000000..67dbdf7962
--- /dev/null
+++ b/src/guide/migration/listeners-removed.md
@@ -0,0 +1,76 @@
+---
+title: $listeners removed
+badges:
+  - breaking
+---
+
+# `$listeners` removed <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+the `$listeners` object has been removed in Vue 3. Event Listeners are now part of `$attrs`.
+
+```javascript
+{
+
+  text: 'this is a prop',
+  onClose: () => console.log('close Event triggered')
+}
+```
+
+## 2.x Syntax
+
+In Vue 2, you can access attributes passed to your components with `this.$attrs`, and event listeners with `this.$listeners`.
+
+These are usually Used in components that receive the attributes and listeners from its parents passed them on to and distinct element, usually in combination with `inheritAttrs: false`:
+
+```html
+<template>
+  <label>
+    <input type="text" v-bind="$attrs" v-bind="$listeners" />
+  </label>
+</template>
+<script>
+  export default {
+    inheritAttrs: false
+  }
+</script>
+```
+
+## 3.x Syntax
+
+In Vue 3's virtual DOM, event listeners are now just attributes, prefixed with `on`, and as such are part of the `$attrs` object, so `$listeners` has been removed.
+
+```html
+<template>
+  <label>
+    <input type="text" v-bind="$attrs" />
+  </label>
+</template>
+<script>
+  export default {
+    inheritAttrs: false
+  }
+</script>
+```
+
+If this component received an `id` attribute and a `v-on:close` listener, the `$attrs` object will now look like this:
+
+```javascript
+{
+
+  id: 'my-input',
+  onClose: () => console.log('close Event triggered')
+}
+```
+
+## Migration Strategy
+
+Remove all usages of `$listeners`.
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration guide - Changes in the Render Functions API](./render-functions.md)
+- [Migration guide - New Emits Option](/.emits-option.md)
+- [Migration guide - `.native` modifier removed](./native-modifier-removed.md)
diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md
new file mode 100644
index 0000000000..576843acf8
--- /dev/null
+++ b/src/guide/migration/v-on-native-modifier-removed.md
@@ -0,0 +1,66 @@
+---
+title: v-on.native modifier removed
+badges:
+  - breaking
+---
+
+# `v-on.native` modifier removed <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+The `.native` modifier for `v-on` has been removed.
+
+## 2.x Syntax
+
+Event Listeners passed to a component with `v-on` are by default only triggered by emitting an event with `this.$emit`. To add a native DOM listener to the child component's root element instead, the `.native` modifier can be used:
+
+```html
+<my-component
+  v-on:close="handleComponentEvent"
+  v-on:click.native="handleNativeClickEvent"
+/>
+```
+
+`MyComponent.vue`
+
+```html
+<script>
+  export // ...
+  {}
+</script>
+```
+
+## 3.x Syntax
+
+The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](/.emits-option.md) allows the child to define which events it does indeed emit.
+
+Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false`) has been set in the child's options).
+
+```html
+<my-component
+  v-on:close="handleComponentEvent"
+  v-on:click="handleNativeClickEvent"
+/>
+```
+
+`MyComponent.vue`
+
+```html
+<script>
+  export {
+    emits: ['close']
+  }
+</script>
+```
+
+## Migration Strategy
+
+- remove all instances of the `.native` modifier.
+- ensure that all your components document their events with the emits option.
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough)
+- [Migration guide - Changes in the Render Functions API](./render-functions.md)
+- [Migration guide - New Emits Option](/.emits-option.md)
+- [Migration guide - `$listeners` removed](/.listeners-removed.md)

From 426b5517b66e23ff668084578b4d4b9e0e67b052 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Wed, 7 Oct 2020 20:16:11 +0200
Subject: [PATCH 02/20] feat: document $attrs new behaviour now includes class
 and style behaviour.

---
 src/.vuepress/config.js                       |  1 +
 .../migration/attrs-includes-class-style.md   | 69 +++++++++++++++++++
 src/guide/migration/emits-option.md           |  9 +--
 src/guide/migration/introduction.md           |  1 +
 src/guide/migration/listeners-removed.md      |  1 +
 .../migration/v-on-native-modifier-removed.md |  2 +-
 6 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 src/guide/migration/attrs-includes-class-style.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 1057a3a012..bd05739224 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -120,6 +120,7 @@ const sidebar = {
         '/guide/migration/array-refs',
         '/guide/migration/async-components',
         '/guide/migration/attribute-coercion',
+        '/guide/migration/attrs-includes-class-style.md',
         '/guide/migration/custom-directives',
         '/guide/migration/custom-elements-interop',
         '/guide/migration/data-option',
diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md
new file mode 100644
index 0000000000..a8a246e6e4
--- /dev/null
+++ b/src/guide/migration/attrs-includes-class-style.md
@@ -0,0 +1,69 @@
+---
+title: $attrs includes class & style
+badges:
+  - breaking
+---
+
+# `$attrs`includes `class` & `style` <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+`$attrs` now contains _all_ attributes passed to a component, including `class` and `style.`
+
+## 2.x Behavior
+
+`class` and `style` attributes get some special handling in the Vue 2 VirtualDOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are.
+
+A side effect of this manifests when using `inheritAttrs: false`:
+
+- Attributes in `$attrs` are no longer automatically added to the root element, leaving it the developer to decide where to add them.
+- But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
+
+```html
+<template>
+  <label>
+    <input type="text" v-bind="$attrs" />
+  </label>
+</template>
+<script>
+  export default {
+    inheritAttrs: false
+  }
+</script>
+```
+
+when used like this:
+
+```html
+<my-component id="my-id" class="my-class"></my-component>
+```
+
+...will generate this HTML:
+
+```html
+<label class="my-class">
+  <input type="text" id="my-id" />
+</label>
+```
+
+## 3.x Behavior
+
+`$attrs` contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
+
+```html
+<label>
+  <input type="text" id="my-id" class="my-class" />
+</label>
+```
+
+## Migration Strategy
+
+In components that use `inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class` and `style`, some visuals might be broken as these attributes might now be applied to another element.
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration guide - `$listeners` removed](/.listeners-removed.md)
+- [Migration guide - New Emits Option](/.emits-option.md)
+- [Migration guide - `.native` modifier removed](./native-modifier-removed.md)
+- [Migration guide - Changes in the Render Functions API](./render-functions.md)
diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index 17f2e96da7..5d89afe49c 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -1,5 +1,5 @@
 ---
-title: \`emits\` option
+title: emits Option
 badges:
   - new
 ---
@@ -10,7 +10,7 @@ badges:
 
 Vue 3 now offers an `emits` option similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent.
 
-## 2.x Syntax
+## 2.x Behavior
 
 In Vue 2, you can define the props that a component received, but you can't define which ebents it can emit:
 
@@ -26,7 +26,7 @@ In Vue 2, you can define the props that a component received, but you can't defi
 </script>
 ```
 
-## 3.x Syntax
+## 3.x Behavior
 
 Similar to props, the events that the component emit can now be defined with the `emits` option.
 
@@ -56,6 +56,7 @@ All events not defined with `emits` are now added as DOM event listeners to the
 ## See also
 
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
-- [Migration guide - `$listeners` removed](/.listeners-removed.md)
 - [Migration guide - `.native` modifier removed](./native-modifier-removed.md)
+- [Migration guide - `$listeners` removed](/.listeners-removed.md)
+- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-included-class-style.md)
 - [Migration guide - Changes in the Render Functions API](./render-functions.md)
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index 69b8bad32f..83842d7ea5 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -84,6 +84,7 @@ The following consists a list of breaking changes from 2.x:
 - [Render function API changed](/guide/migration/render-function-api.html)
 - [`$scopedSlots` property is removed and all slots are exposed via `$slots` as functions](/guide/migration/slots-unification.html)
 - [`$listeners` has been removed / merged into `$attrs`](./listeners-removed)
+- [`$attrs` now includes `class` and `style` attributes](./attrs-inlcuded-class-style.md)
 
 ### Custom Elements
 
diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index 67dbdf7962..994b336f54 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -71,6 +71,7 @@ Remove all usages of `$listeners`.
 ## See also
 
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-included-class-style.md)
 - [Migration guide - Changes in the Render Functions API](./render-functions.md)
 - [Migration guide - New Emits Option](/.emits-option.md)
 - [Migration guide - `.native` modifier removed](./native-modifier-removed.md)
diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md
index 576843acf8..77776934ab 100644
--- a/src/guide/migration/v-on-native-modifier-removed.md
+++ b/src/guide/migration/v-on-native-modifier-removed.md
@@ -61,6 +61,6 @@ Consequently, Vue will now add all event listeners that are _not_ defined as com
 ## See also
 
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough)
-- [Migration guide - Changes in the Render Functions API](./render-functions.md)
 - [Migration guide - New Emits Option](/.emits-option.md)
 - [Migration guide - `$listeners` removed](/.listeners-removed.md)
+- [Migration guide - Changes in the Render Functions API](./render-functions.md)

From f3b66d3e3456b124d5fe01fc6acc7b7fc92cb7d0 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Thu, 8 Oct 2020 08:16:31 +0200
Subject: [PATCH 03/20] fix: typos, grammar and language improvements

---
 src/.vuepress/config.js                       |  2 +-
 .../migration/attrs-includes-class-style.md   | 10 ++--
 src/guide/migration/emits-option.md           | 50 +++++++++++++++----
 src/guide/migration/introduction.md           |  4 +-
 src/guide/migration/listeners-removed.md      | 11 ++--
 5 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index bd05739224..2c9b4d21a0 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -120,7 +120,7 @@ const sidebar = {
         '/guide/migration/array-refs',
         '/guide/migration/async-components',
         '/guide/migration/attribute-coercion',
-        '/guide/migration/attrs-includes-class-style.md',
+        '/guide/migration/attrs-includes-class-style',
         '/guide/migration/custom-directives',
         '/guide/migration/custom-elements-interop',
         '/guide/migration/data-option',
diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md
index a8a246e6e4..70f740e5e5 100644
--- a/src/guide/migration/attrs-includes-class-style.md
+++ b/src/guide/migration/attrs-includes-class-style.md
@@ -4,19 +4,19 @@ badges:
   - breaking
 ---
 
-# `$attrs`includes `class` & `style` <MigrationBadges :badges="$frontmatter.badges" />
+# `$attrs` includes `class` & `style` <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
-`$attrs` now contains _all_ attributes passed to a component, including `class` and `style.`
+`$attrs` now contains _all_ attributes passed to a component, including `class` and `style`.
 
 ## 2.x Behavior
 
-`class` and `style` attributes get some special handling in the Vue 2 VirtualDOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are.
+`class` and `style` attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are.
 
 A side effect of this manifests when using `inheritAttrs: false`:
 
-- Attributes in `$attrs` are no longer automatically added to the root element, leaving it the developer to decide where to add them.
+- Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
 - But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
 
 ```html
@@ -65,5 +65,5 @@ In components that use `inheritAttrs: false`, make sure that styling still works
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
 - [Migration guide - `$listeners` removed](/.listeners-removed.md)
 - [Migration guide - New Emits Option](/.emits-option.md)
-- [Migration guide - `.native` modifier removed](./native-modifier-removed.md)
+- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
 - [Migration guide - Changes in the Render Functions API](./render-functions.md)
diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index 5d89afe49c..da55c7e470 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -12,16 +12,16 @@ Vue 3 now offers an `emits` option similar to the existing `props` option. This
 
 ## 2.x Behavior
 
-In Vue 2, you can define the props that a component received, but you can't define which ebents it can emit:
+In Vue 2, you can define the props that a component received, but you can't declare which events it can emit:
 
-```javascript
+```html
 <template>
   <p>{{ text }}</p>
   <button v-on:click="$emit('accepted')">OK</button>
 </template>
 <script>
   export default {
-    props: ['text'],
+    props: ['text']
   }
 </script>
 ```
@@ -43,20 +43,52 @@ Similar to props, the events that the component emit can now be defined with the
 </script>
 ```
 
-The option also excepts an object notation, which allows to define validators for the arguments that have passed with the emitted event, similar to validators in props definitions.
+The option also accepts an object notation, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in props definitions.
 
-For more Information on this, please read the [API documentation for this feature](../api/options-data.md#emits).
+For more information on this, please read the [API documentation for this feature](../api/options-data.md#emits).
 
 ## Migration Strategy
 
-Even though this is the new optional feature, it is highly recommended that you document all of the emitted events of your components this way because of the [removal of the `.native` modifier](./native-modifier-removed.md).
+It is highly recommended that you document all of the emitted events of your components this way because of the [removal of the `.native` modifier](./native-modifier-removed.md).
 
 All events not defined with `emits` are now added as DOM event listeners to the components root node (unless `inheritAttrs: false` has been set).
 
+### Examnple
+
+If ou have components that re-emit native events to their parent, this would now lead to two events being fired:
+
+```html
+<template>
+  <button v-on:click="$emit('click', event)">OK</button>
+</template>
+<script>
+  export default {
+    props: ['text'],
+    emits: [] // without declared event
+  }
+</script>
+```
+
+When a parent listens for the `click` event on the component:
+
+```html
+<my-button v-on:click="handleClick"></my-button>
+```
+
+it would now be triggered _twice_:
+
+- Once from `$emit()`
+- Once from a native event listener applied to the root element
+
+Here you have two options:
+
+1. Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in `<my-button>`
+2. remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway.
+
 ## See also
 
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
-- [Migration guide - `.native` modifier removed](./native-modifier-removed.md)
-- [Migration guide - `$listeners` removed](/.listeners-removed.md)
-- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-included-class-style.md)
+- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
+- [Migration guide - `$listeners` removed](./listeners-removed.md)
+- [Migration guide - `$attrs` includes `class` & `style` ](./attrs-includes-class-style.md)
 - [Migration guide - Changes in the Render Functions API](./render-functions.md)
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index 83842d7ea5..8503574f27 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -77,14 +77,14 @@ The following consists a list of breaking changes from 2.x:
 - [Functional components can only be created using a plain function](/guide/migration/functional-components.html)
 - [`functional` attribute on single-file component (SFC) `<template>` and `functional` component option are deprecated](/guide/migration/functional-components.html)
 - [Async components now require `defineAsyncComponent` method to be created](/guide/migration/async-components.html)
-- [Component events should now be documented `emits` option]('./emits-option.md)
+- [Component events should now be declared with the `emits` option]('./emits-option.md)
 
 ### Render Function
 
 - [Render function API changed](/guide/migration/render-function-api.html)
 - [`$scopedSlots` property is removed and all slots are exposed via `$slots` as functions](/guide/migration/slots-unification.html)
 - [`$listeners` has been removed / merged into `$attrs`](./listeners-removed)
-- [`$attrs` now includes `class` and `style` attributes](./attrs-inlcuded-class-style.md)
+- [`$attrs` now includes `class` and `style` attributes](./attrs-included-class-style.md)
 
 ### Custom Elements
 
diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index 994b336f54..e4647892cf 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -8,11 +8,10 @@ badges:
 
 ## Overview
 
-the `$listeners` object has been removed in Vue 3. Event Listeners are now part of `$attrs`.
+The `$listeners` object has been removed in Vue 3. Event listeners are now part of `$attrs`.
 
 ```javascript
 {
-
   text: 'this is a prop',
   onClose: () => console.log('close Event triggered')
 }
@@ -21,13 +20,12 @@ the `$listeners` object has been removed in Vue 3. Event Listeners are now part
 ## 2.x Syntax
 
 In Vue 2, you can access attributes passed to your components with `this.$attrs`, and event listeners with `this.$listeners`.
-
-These are usually Used in components that receive the attributes and listeners from its parents passed them on to and distinct element, usually in combination with `inheritAttrs: false`:
+In combination with `inheritAttrs: false`, they allow the developer to apply these attributes and listeners to some other element instead of the root element:
 
 ```html
 <template>
   <label>
-    <input type="text" v-bind="$attrs" v-bind="$listeners" />
+    <input type="text" v-bind="$attrs" v-on="$listeners" />
   </label>
 </template>
 <script>
@@ -58,7 +56,6 @@ If this component received an `id` attribute and a `v-on:close` listener, the `$
 
 ```javascript
 {
-
   id: 'my-input',
   onClose: () => console.log('close Event triggered')
 }
@@ -74,4 +71,4 @@ Remove all usages of `$listeners`.
 - [Migration guide - `$attrs`includes `class` & `style` ](./attrs-included-class-style.md)
 - [Migration guide - Changes in the Render Functions API](./render-functions.md)
 - [Migration guide - New Emits Option](/.emits-option.md)
-- [Migration guide - `.native` modifier removed](./native-modifier-removed.md)
+- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)

From 843917e56905f5dca53de1bdeccffd1568f9c8f5 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Thu, 8 Oct 2020 08:22:03 +0200
Subject: [PATCH 04/20] more fixes

---
 .../migration/v-on-native-modifier-removed.md   | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md
index 77776934ab..4763aa4e7a 100644
--- a/src/guide/migration/v-on-native-modifier-removed.md
+++ b/src/guide/migration/v-on-native-modifier-removed.md
@@ -12,7 +12,7 @@ The `.native` modifier for `v-on` has been removed.
 
 ## 2.x Syntax
 
-Event Listeners passed to a component with `v-on` are by default only triggered by emitting an event with `this.$emit`. To add a native DOM listener to the child component's root element instead, the `.native` modifier can be used:
+Event listeners passed to a component with `v-on` are by default only triggered by emitting an event with `this.$emit`. To add a native DOM listener to the child component's root element instead, the `.native` modifier can be used:
 
 ```html
 <my-component
@@ -21,20 +21,11 @@ Event Listeners passed to a component with `v-on` are by default only triggered
 />
 ```
 
-`MyComponent.vue`
-
-```html
-<script>
-  export // ...
-  {}
-</script>
-```
-
 ## 3.x Syntax
 
 The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](/.emits-option.md) allows the child to define which events it does indeed emit.
 
-Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false`) has been set in the child's options).
+Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false`)has been set in the child's options).
 
 ```html
 <my-component
@@ -47,7 +38,7 @@ Consequently, Vue will now add all event listeners that are _not_ defined as com
 
 ```html
 <script>
-  export {
+  export default {
     emits: ['close']
   }
 </script>
@@ -56,7 +47,7 @@ Consequently, Vue will now add all event listeners that are _not_ defined as com
 ## Migration Strategy
 
 - remove all instances of the `.native` modifier.
-- ensure that all your components document their events with the emits option.
+- ensure that all your components document their events with the `emits` option.
 
 ## See also
 

From 6f1665de13a1035dcc6575a974a571b34a27d3b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:40:25 +0200
Subject: [PATCH 05/20] Update src/guide/migration/emits-option.md

---
 src/guide/migration/emits-option.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index da55c7e470..36798d469e 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -49,7 +49,7 @@ For more information on this, please read the [API documentation for this featur
 
 ## Migration Strategy
 
-It is highly recommended that you document all of the emitted events of your components this way because of the [removal of the `.native` modifier](./native-modifier-removed.md).
+It is highly recommended that you document all of the emitted events of your components this way because of the [removal of the `.native` modifier](./v-on-native-modifier-removed.md).
 
 All events not defined with `emits` are now added as DOM event listeners to the components root node (unless `inheritAttrs: false` has been set).
 

From e32994488478c1715b408a3216439e583fb4bba7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:41:10 +0200
Subject: [PATCH 06/20] Update src/guide/migration/introduction.md

fix broken link
---
 src/guide/migration/introduction.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index 8503574f27..e075e60f9a 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -77,7 +77,7 @@ The following consists a list of breaking changes from 2.x:
 - [Functional components can only be created using a plain function](/guide/migration/functional-components.html)
 - [`functional` attribute on single-file component (SFC) `<template>` and `functional` component option are deprecated](/guide/migration/functional-components.html)
 - [Async components now require `defineAsyncComponent` method to be created](/guide/migration/async-components.html)
-- [Component events should now be declared with the `emits` option]('./emits-option.md)
+- [Component events should now be declared with the `emits` option](./emits-option.md)
 
 ### Render Function
 

From 4f536ca54bacc71b3778d30d99e06857b10c56fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:41:30 +0200
Subject: [PATCH 07/20] Update src/guide/migration/listeners-removed.md

fix broken link

Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com>
---
 src/guide/migration/listeners-removed.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index e4647892cf..0363943631 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -68,7 +68,7 @@ Remove all usages of `$listeners`.
 ## See also
 
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
-- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-included-class-style.md)
+- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-include-class-style.md)
 - [Migration guide - Changes in the Render Functions API](./render-functions.md)
 - [Migration guide - New Emits Option](/.emits-option.md)
 - [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)

From f7cceb977cbe4fe5f7765ed0140bddbfdbb68e67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:41:57 +0200
Subject: [PATCH 08/20] Update src/guide/migration/introduction.md

fix broken link

Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com>
---
 src/guide/migration/introduction.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index e075e60f9a..f8ab44312f 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -84,7 +84,7 @@ The following consists a list of breaking changes from 2.x:
 - [Render function API changed](/guide/migration/render-function-api.html)
 - [`$scopedSlots` property is removed and all slots are exposed via `$slots` as functions](/guide/migration/slots-unification.html)
 - [`$listeners` has been removed / merged into `$attrs`](./listeners-removed)
-- [`$attrs` now includes `class` and `style` attributes](./attrs-included-class-style.md)
+- [`$attrs` now includes `class` and `style` attributes](./attrs-include-class-style.md)
 
 ### Custom Elements
 

From 33f095669ea4bd130b0b6f3615fe176a2cf10c71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:42:40 +0200
Subject: [PATCH 09/20] Update src/guide/migration/emits-option.md

typo
---
 src/guide/migration/emits-option.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index 36798d469e..88f83ec66a 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -83,7 +83,7 @@ it would now be triggered _twice_:
 Here you have two options:
 
 1. Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in `<my-button>`
-2. remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway.
+2. Remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway.
 
 ## See also
 

From eefcb59ab7803459395257d6ee604a9aad12e3d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:43:56 +0200
Subject: [PATCH 10/20] Update src/guide/migration/listeners-removed.md

grammar
---
 src/guide/migration/listeners-removed.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index 0363943631..a74c709100 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -8,7 +8,7 @@ badges:
 
 ## Overview
 
-The `$listeners` object has been removed in Vue 3. Event listeners are now part of `$attrs`.
+The `$listeners` object has been removed in Vue 3. Event listeners are now part of `$attrs`:
 
 ```javascript
 {

From 1a3bb75110c8e7c2311ff781f8f852be44c00f53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:44:23 +0200
Subject: [PATCH 11/20] Update src/guide/migration/listeners-removed.md

wording
---
 src/guide/migration/listeners-removed.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index a74c709100..f935c6308a 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -12,7 +12,7 @@ The `$listeners` object has been removed in Vue 3. Event listeners are now part
 
 ```javascript
 {
-  text: 'this is a prop',
+  text: 'this is an attribute',
   onClose: () => console.log('close Event triggered')
 }
 ```

From 1df13cd53bc1c7eee3655825b7083c34616ba0ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:45:31 +0200
Subject: [PATCH 12/20] Update
 src/guide/migration/v-on-native-modifier-removed.md

---
 src/guide/migration/v-on-native-modifier-removed.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md
index 4763aa4e7a..7055619a9a 100644
--- a/src/guide/migration/v-on-native-modifier-removed.md
+++ b/src/guide/migration/v-on-native-modifier-removed.md
@@ -25,7 +25,7 @@ Event listeners passed to a component with `v-on` are by default only triggered
 
 The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](/.emits-option.md) allows the child to define which events it does indeed emit.
 
-Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false`)has been set in the child's options).
+Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false` has been set in the child's options).
 
 ```html
 <my-component

From 498813911316c4f5f0cea4f5fe25d2af300945af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:46:18 +0200
Subject: [PATCH 13/20] Update src/guide/migration/emits-option.md

fix broken link
---
 src/guide/migration/emits-option.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index 88f83ec66a..18963854b0 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -91,4 +91,4 @@ Here you have two options:
 - [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
 - [Migration guide - `$listeners` removed](./listeners-removed.md)
 - [Migration guide - `$attrs` includes `class` & `style` ](./attrs-includes-class-style.md)
-- [Migration guide - Changes in the Render Functions API](./render-functions.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)

From 58b5404dec7029440f6410151ea971b0bc665341 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 10 Oct 2020 10:47:01 +0200
Subject: [PATCH 14/20] Update src/guide/migration/introduction.md

fix broken link
---
 src/guide/migration/introduction.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index f8ab44312f..a031aefb27 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -69,7 +69,7 @@ The following consists a list of breaking changes from 2.x:
 - [`key` usage on `<template v-for>` and non-`v-for` nodes has changed](/guide/migration/key-attribute.html)
 - [`v-if` and `v-for` precedence when used on the same element has changed](/guide/migration/v-if-v-for.html)
 - [`v-bind="object"` is now order-sensitive](/guide/migration/v-bind.html)
-- [`v-on:event.native` modifier has been removed](./native-modifier-removed.md)
+- [`v-on:event.native` modifier has been removed](./v-on-native-modifier-removed.md)
 - [`ref` inside `v-for` no longer register an array of refs](/guide/migration/array-refs.html)
 
 ### Components

From e7b32a31c5f546c204bb2bac12da0e73483f75dd Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Sun, 11 Oct 2020 10:34:53 +0200
Subject: [PATCH 15/20] still more mistakes to fix.

---
 .../migration/attrs-includes-class-style.md    |  6 +++---
 src/guide/migration/emits-option.md            | 18 ++++++++++--------
 src/guide/migration/listeners-removed.md       |  6 +++---
 .../migration/v-on-native-modifier-removed.md  |  8 ++++----
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md
index 70f740e5e5..9518b31e82 100644
--- a/src/guide/migration/attrs-includes-class-style.md
+++ b/src/guide/migration/attrs-includes-class-style.md
@@ -63,7 +63,7 @@ In components that use `inheritAttrs: false`, make sure that styling still works
 ## See also
 
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
-- [Migration guide - `$listeners` removed](/.listeners-removed.md)
-- [Migration guide - New Emits Option](/.emits-option.md)
+- [Migration guide - `$listeners` removed](./listeners-removed.md)
+- [Migration guide - New Emits Option](./emits-option.md)
 - [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
-- [Migration guide - Changes in the Render Functions API](./render-functions.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index da55c7e470..4299d06280 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -16,8 +16,10 @@ In Vue 2, you can define the props that a component received, but you can't decl
 
 ```html
 <template>
-  <p>{{ text }}</p>
-  <button v-on:click="$emit('accepted')">OK</button>
+  <div>
+    <p>{{ text }}</p>
+    <button v-on:click="$emit('accepted')">OK</button>
+  </div>
 </template>
 <script>
   export default {
@@ -28,9 +30,9 @@ In Vue 2, you can define the props that a component received, but you can't decl
 
 ## 3.x Behavior
 
-Similar to props, the events that the component emit can now be defined with the `emits` option.
+Similar to props, the events that the component emits can now be defined with the `emits` option.
 
-```javascript
+```html
 <template>
   <p>{{ text }}</p>
   <button v-on:click="$emit('accepted')">OK</button>
@@ -45,7 +47,7 @@ Similar to props, the events that the component emit can now be defined with the
 
 The option also accepts an object notation, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in props definitions.
 
-For more information on this, please read the [API documentation for this feature](../api/options-data.md#emits).
+For more information on this, please read the [API documentation for this feature](../api/options-data.md).
 
 ## Migration Strategy
 
@@ -53,13 +55,13 @@ It is highly recommended that you document all of the emitted events of your com
 
 All events not defined with `emits` are now added as DOM event listeners to the components root node (unless `inheritAttrs: false` has been set).
 
-### Examnple
+### Example
 
-If ou have components that re-emit native events to their parent, this would now lead to two events being fired:
+For components that re-emit native events to their parent, this would now lead to two events being fired:
 
 ```html
 <template>
-  <button v-on:click="$emit('click', event)">OK</button>
+  <button v-on:click="$emit('click', $event)">OK</button>
 </template>
 <script>
   export default {
diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index e4647892cf..37bf596eaf 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -68,7 +68,7 @@ Remove all usages of `$listeners`.
 ## See also
 
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
-- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-included-class-style.md)
-- [Migration guide - Changes in the Render Functions API](./render-functions.md)
-- [Migration guide - New Emits Option](/.emits-option.md)
+- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-includes-class-style.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
+- [Migration guide - New Emits Option](./emits-option.md)
 - [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md
index 4763aa4e7a..a037a44106 100644
--- a/src/guide/migration/v-on-native-modifier-removed.md
+++ b/src/guide/migration/v-on-native-modifier-removed.md
@@ -23,7 +23,7 @@ Event listeners passed to a component with `v-on` are by default only triggered
 
 ## 3.x Syntax
 
-The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](/.emits-option.md) allows the child to define which events it does indeed emit.
+The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](./emits-option.md) allows the child to define which events it does indeed emit.
 
 Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false`)has been set in the child's options).
 
@@ -52,6 +52,6 @@ Consequently, Vue will now add all event listeners that are _not_ defined as com
 ## See also
 
 - [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough)
-- [Migration guide - New Emits Option](/.emits-option.md)
-- [Migration guide - `$listeners` removed](/.listeners-removed.md)
-- [Migration guide - Changes in the Render Functions API](./render-functions.md)
+- [Migration guide - New Emits Option](./emits-option.md)
+- [Migration guide - `$listeners` removed](./listeners-removed.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)

From 2582673943a4f2705d516c9c9f1e5a0c40a7d8e1 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Sun, 11 Oct 2020 10:46:27 +0200
Subject: [PATCH 16/20] fix link to api docs for "emits:"

---
 src/guide/migration/emits-option.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index 561c1b88b5..29adf11d02 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -47,7 +47,7 @@ Similar to props, the events that the component emits can now be defined with th
 
 The option also accepts an object notation, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in props definitions.
 
-For more information on this, please read the [API documentation for this feature](../api/options-data.md).
+For more information on this, please read the [API documentation for this feature](../../api/options-data.md#emits).
 
 ## Migration Strategy
 

From 4b6292c84655fc679ff4140407362bbe0bc5872e Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Sun, 11 Oct 2020 10:56:06 +0200
Subject: [PATCH 17/20] use vue instead of html as hightligh lang where
 possible

---
 src/guide/migration/attrs-includes-class-style.md |  8 ++++----
 src/guide/migration/emits-option.md               | 10 +++++-----
 src/guide/migration/listeners-removed.md          |  8 ++++----
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md
index 9518b31e82..dbb6a5ce52 100644
--- a/src/guide/migration/attrs-includes-class-style.md
+++ b/src/guide/migration/attrs-includes-class-style.md
@@ -19,16 +19,16 @@ A side effect of this manifests when using `inheritAttrs: false`:
 - Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
 - But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
 
-```html
+```vue
 <template>
   <label>
     <input type="text" v-bind="$attrs" />
   </label>
 </template>
 <script>
-  export default {
-    inheritAttrs: false
-  }
+export default {
+  inheritAttrs: false
+}
 </script>
 ```
 
diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index 29adf11d02..abe73a4fd2 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -59,15 +59,15 @@ All events not defined with `emits` are now added as DOM event listeners to the
 
 For components that re-emit native events to their parent, this would now lead to two events being fired:
 
-```html
+```vue
 <template>
   <button v-on:click="$emit('click', $event)">OK</button>
 </template>
 <script>
-  export default {
-    props: ['text'],
-    emits: [] // without declared event
-  }
+export default {
+  props: ['text'],
+  emits: [] // without declared event
+}
 </script>
 ```
 
diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index 5a9396ce38..5a84f3592a 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -39,16 +39,16 @@ In combination with `inheritAttrs: false`, they allow the developer to apply the
 
 In Vue 3's virtual DOM, event listeners are now just attributes, prefixed with `on`, and as such are part of the `$attrs` object, so `$listeners` has been removed.
 
-```html
+```vue
 <template>
   <label>
     <input type="text" v-bind="$attrs" />
   </label>
 </template>
 <script>
-  export default {
-    inheritAttrs: false
-  }
+export default {
+  inheritAttrs: false
+}
 </script>
 ```
 

From 49595433685d6fec74a7bdde0216495a4f1f3f1a Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Tue, 13 Oct 2020 12:27:32 +0200
Subject: [PATCH 18/20] fix broken link

---
 src/guide/migration/introduction.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index a031aefb27..86e73bfed3 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -84,7 +84,7 @@ The following consists a list of breaking changes from 2.x:
 - [Render function API changed](/guide/migration/render-function-api.html)
 - [`$scopedSlots` property is removed and all slots are exposed via `$slots` as functions](/guide/migration/slots-unification.html)
 - [`$listeners` has been removed / merged into `$attrs`](./listeners-removed)
-- [`$attrs` now includes `class` and `style` attributes](./attrs-include-class-style.md)
+- [`$attrs` now includes `class` and `style` attributes](./attrs-includes-class-style.md)
 
 ### Custom Elements
 

From 911c32b098b99ace711976d2b175d237b7443732 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Tue, 13 Oct 2020 12:27:49 +0200
Subject: [PATCH 19/20] fix missing template content

---
 src/guide/migration/emits-option.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index abe73a4fd2..1aa42ad28f 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -61,6 +61,7 @@ For components that re-emit native events to their parent, this would now lead t
 
 ```vue
 <template>
+  <p>{{ text }}</p>
   <button v-on:click="$emit('click', $event)">OK</button>
 </template>
 <script>

From c50eb4379cf6639c875bc2f19bb3d8850b391261 Mon Sep 17 00:00:00 2001
From: Thorsten Luenborg <t.luneborg@googlemail.com>
Date: Tue, 13 Oct 2020 12:33:32 +0200
Subject: [PATCH 20/20] wording/grammar

---
 src/guide/migration/emits-option.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index 1aa42ad28f..968a0f41f7 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -51,9 +51,9 @@ For more information on this, please read the [API documentation for this featur
 
 ## Migration Strategy
 
-It is highly recommended that you document all of the emitted events of your components this way because of the [removal of the `.native` modifier](./v-on-native-modifier-removed.md).
+It is highly recommended that you document all of the emitted events by your each of components this way because of the [removal of the `.native` modifier](./v-on-native-modifier-removed.md).
 
-All events not defined with `emits` are now added as DOM event listeners to the components root node (unless `inheritAttrs: false` has been set).
+All events not defined with `emits` are now added as DOM event listeners to the component's root node (unless `inheritAttrs: false` has been set).
 
 ### Example