From bfbd96499260cc32316255df8ed3ba4ddc8d1ad0 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 23:45:49 -0400
Subject: [PATCH 1/3] docs (#156): add inline-template attribute docs to
 migration guide

---
 src/.vuepress/config.js                       |  5 +-
 .../migration/inline-template-attribute.md    | 83 +++++++++++++++++++
 2 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/guide/migration/inline-template-attribute.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 74f0923edf..a3de59491c 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -85,7 +85,7 @@ const sidebar = {
         '/guide/a11y-basics',
         '/guide/a11y-semantics',
         '/guide/a11y-standards',
-        '/guide/a11y-resources',
+        '/guide/a11y-resources'
       ]
     },
     {
@@ -105,7 +105,8 @@ const sidebar = {
         'migration/fragments',
         'migration/render-function-api',
         'migration/slots-unification',
-        'migration/keycode-modifiers'
+        'migration/keycode-modifiers',
+        'migration/inline-template-attribute'
       ]
     },
     {
diff --git a/src/guide/migration/inline-template-attribute.md b/src/guide/migration/inline-template-attribute.md
new file mode 100644
index 0000000000..1763f4ea28
--- /dev/null
+++ b/src/guide/migration/inline-template-attribute.md
@@ -0,0 +1,83 @@
+---
+types:
+  - breaking
+  - removal
+---
+
+# Inline Template Attribute
+
+## Overview
+
+Support for the [inline-template feature](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) has been removed.
+
+## 2.x Syntax
+
+In 2.x, Vue provided the `inline-template` attribute on child components to use its inner content as its template instead of treating it as distributed content.
+
+```html
+<my-component inline-template>
+  <div>
+    <p>These are compiled as the component's own template.</p>
+    <p>Not parent's transclusion content.</p>
+  </div>
+</my-component>
+```
+
+## 3.x Syntax
+
+This feature will no longer be supported.
+
+## Migration Strategy
+
+Most of the use cases for `inline-template` assumes a no-build-tool setup, where all templates are written directly inside the HTML page.
+
+### Option #1: Use `<script>` tag
+
+The most straightforward workaround in such cases is using `<script>` with an alternative type:
+
+```js
+<script type="text/html" id="my-comp-template">
+  <div>{{ hello }}</div>
+</script>
+```
+
+And in the component, target the template using a selector:
+
+```js
+const MyComp = {
+  template: '#my-comp-template'
+  // ...
+}
+```
+
+This doesn't require any build setup, works in all browsers, is not subject to any in-DOM HTML parsing caveats (e.g. you can use camelCase prop names), and provides proper syntax highlighting in most IDEs. In traditional server-side frameworks, these templates can be split out into server template partials (included into the main HTML template) for better maintainability.
+
+### Option #2: Default Slot
+
+A component previously using `inline-template` can also be refactored using the default slot - which makes the data scoping more explicit while preserving the convenience of writing child content inline:
+
+```html
+<!-- 2.x Syntax -->
+<my-comp inline-template :msg="parentMsg">
+  {{ msg }} {{ childState }}
+</my-comp>
+
+<!-- Default Slot Version -->
+<my-comp v-slot="{ childState }">
+  {{ parentMsg }} {{ childState }}
+</my-comp>
+```
+
+The child, instead of providing no template, should now render the default slot\*:
+
+```html
+<!--
+  in child template, render default slot while passing
+  in necessary private state of child.
+-->
+<template>
+  <slot :childState="childState" />
+</template>
+```
+
+\* Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!

From 403968e13b26f0e58b3c3cf24ff02baa2d6a9061 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 23:54:06 -0400
Subject: [PATCH 2/3] docs (#156): add escape hatch

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

diff --git a/src/guide/migration/inline-template-attribute.md b/src/guide/migration/inline-template-attribute.md
index 1763f4ea28..5659b2242b 100644
--- a/src/guide/migration/inline-template-attribute.md
+++ b/src/guide/migration/inline-template-attribute.md
@@ -68,7 +68,7 @@ A component previously using `inline-template` can also be refactored using the
 </my-comp>
 ```
 
-The child, instead of providing no template, should now render the default slot\*:
+The child, instead of providing no template, should now render the default slot*:
 
 ```html
 <!--

From 3d500939262bb857836129b8e8c4be21737045a4 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 23:54:22 -0400
Subject: [PATCH 3/3] docs (#156): improve syntax rendering

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

diff --git a/src/guide/migration/inline-template-attribute.md b/src/guide/migration/inline-template-attribute.md
index 5659b2242b..ea7983d6bc 100644
--- a/src/guide/migration/inline-template-attribute.md
+++ b/src/guide/migration/inline-template-attribute.md
@@ -80,4 +80,4 @@ The child, instead of providing no template, should now render the default slot*
 </template>
 ```
 
-\* Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!
+> * Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!