From d7a17c9f818ebf08f7dff92d24ced6aed931c487 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 13 Jul 2020 13:32:21 -0400
Subject: [PATCH 1/2] docs (#151): add slots unification section to migration
 guide

---
 src/.vuepress/config.js                  |  3 +-
 src/guide/migration/slots-unification.md | 61 ++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/guide/migration/slots-unification.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index af6106dce0..31e1d923ea 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -93,7 +93,8 @@ const sidebar = {
         'migration/v-model',
         'migration/functional-components',
         'migration/async-components',
-        'migration/custom-directives'
+        'migration/custom-directives',
+        'migration/slots-unification'
       ]
     },
     {
diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md
new file mode 100644
index 0000000000..032c6ea797
--- /dev/null
+++ b/src/guide/migration/slots-unification.md
@@ -0,0 +1,61 @@
+# Slots Unification
+
+## Overview
+
+This change unifies normal and scoped slots in v3.
+
+Here is a quick summary of what has changed:
+
+- `this.$slots` now exposes slots as functions
+- **BREAKING**: `this.$scopedSlots` is removed
+
+For more information, read on!
+
+## Previous Syntax
+
+When using the render function, i.e., `h`, v2 used to define the `slot` data property on the content nodes.
+
+```js
+// 2.x Syntax
+h(LayoutComponent, [
+  h('div', { slot: 'header' }, this.header),
+  h('div', { slot: 'content' }, this.content)
+])
+```
+
+In addition, when referencing scoped slots, they could be referenced using the following syntax:
+
+```js
+// 2.x Syntax
+this.$scopedSlots.header
+```
+
+## Current Syntax
+
+In v3, render functions will have a `slots` option where they can be defined instead.
+
+```js
+// 3.x Syntax
+h(LayoutComponent, {
+  slots: {
+    header: () => h('div', this.header),
+    content: () => h('div', this.content)
+  }
+})
+```
+
+And when you need to reference scoped slots programatically, they are now unified into the `$slots` option.
+
+```js
+// 2.x Syntax
+this.$scopedSlots.header
+
+// 3.x Syntax
+this.$slots.header
+```
+
+## Migration Strategy
+
+A majority of the change has already been shipped in 2.6. As a result, the migration can happen in one step:
+
+1. Replace all `this.$scopedSlots` occurrences with `this.$slots` in v3.

From b6004f09c86f5e26458cb9bc0f747a813a5d10fa Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 09:39:50 -0400
Subject: [PATCH 2/2] fix: typo

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
---
 src/guide/migration/slots-unification.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md
index 032c6ea797..9ab65eb68a 100644
--- a/src/guide/migration/slots-unification.md
+++ b/src/guide/migration/slots-unification.md
@@ -44,7 +44,7 @@ h(LayoutComponent, {
 })
 ```
 
-And when you need to reference scoped slots programatically, they are now unified into the `$slots` option.
+And when you need to reference scoped slots programmatically, they are now unified into the `$slots` option.
 
 ```js
 // 2.x Syntax