Docs/162 fragments

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/fragments'
       ]
     },
     {

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,41 @@
+# 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>
+
+<script>
+  export default {
+    inheritAttrs: false
+  }
+</script>
+```
+
+For more information on how attribute inheritance works, see [Non-Prop Attributes](/guide/component-props.html#disabling-attribute-inheritance).