Docs/162 fragments

src/.vuepress/config.js

@@ -94,6 +94,7 @@ const sidebar = {
         'migration/functional-components',
         'migration/async-components',
         'migration/custom-directives',
+        'migration/fragments',
         'migration/render-function-api',
         'migration/slots-unification',
         'migration/keycode-modifiers'

src/guide/component-props.md

@@ -324,7 +324,7 @@ app.component('custom-layout', {
   template: `
     <header>...</header>
     <main v-bind="$attrs">...</main>
-    <footer...></footer>
+    <footer>...</footer>
   `
 })
 ```

src/guide/migration/fragments.md

@@ -0,0 +1,35 @@
+# Fragments
+
+## Overview
+
+In Vue 3, components now have official support for multi-root node components, i.e., fragments!
+
+## Previous Syntax
+
+In 2.x, multi-root components were not supported and would emit a warning when a user accidentally created one. As a result, many components are wrapped in a single `<div>` in order to fix this error.
+
+```html
+<!-- Layout.vue -->
+<template>
+  <div>
+    <header>...</header>
+    <main>...</main>
+    <footer>...</footer>
+  </div>
+</template>
+```
+
+## Current Syntax
+
+In 3.x, components now can have multiple root nodes! However, this does require developers to explicitly define where attributes should be distributed.
+
+```html
+<!-- Layout.vue -->
+<template>
+  <header>...</header>
+  <main v-bind="$attrs">...</main>
+  <footer>...</footer>
+</template>
+```
+
+For more information on how attribute inheritance works, see [Non-Prop Attributes](/guide/component-props.html#disabling-attribute-inheritance).

src/guide/migration/introduction.md

@@ -8,6 +8,24 @@ We're glad you asked! The answer is no. We've gone to great lengths to ensure mo
 
 Possibly the biggest change is our new Composition API, which is entirely additive- the previous Options API will continue to be supported, as the Composition API is an advanced feature.
 
+## Overview
+
+### New Features
+
+Some of the new features to keep an eye on in Vue 3 include:
+
+- [Composition API](/guide/composition-api-introduction.html)
+- [Teleport](/guide/teleport)
+- [Fragments](/guide/migration/fragments)
+- [Emits Component Option](/guide/component-custom-events.html)
+- `createRenderer` API from `@vue/runtime-core` to create custom renderers
+
+### Breaking
+
+The following consists a list of breaking changes from v2:
+
+- **keyCode support as `v-on` modifiers.** For more information, [see in-depth explanation](/guides/migration/keycodes.html)
+
 ## FAQ
 
 > Where should I start in a migration?
@@ -37,21 +55,3 @@ It depends on a few factors:
 > If I upgrade to Vue 3, will I also have to upgrade Vuex and Vue Router?
 
 [//]: # 'TODO: still need to see where this lands'
-
-## Overview
-
-### New Features
-
-Some of the new features to keep an eye on in Vue 3 include:
-
-- [Composition API](/guide/composition-api-introduction.html)
-- [Teleport](/guide/teleport)
-- Fragments
-- [Emits Component Option](/guide/component-custom-events.html)
-- `createRenderer` API from `@vue/runtime-core` to create custom renderers
-
-### Breaking
-
-The following consists a list of breaking changes from v2:
-
-- **keyCode support as `v-on` modifiers.** For more information, [see in-depth explanation](/guides/migration/keycodes.html)