From 919c8d969e0a7b5786a385e782ca274b3d7f0045 Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Mon, 13 Jul 2020 15:14:51 -0400 Subject: [PATCH 1/5] docs (#162): add fragments to migration section --- src/.vuepress/config.js | 3 ++- src/guide/migration/fragments.md | 41 ++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 src/guide/migration/fragments.md diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index af6106dce0..7ecc320027 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/fragments' ] }, { diff --git a/src/guide/migration/fragments.md b/src/guide/migration/fragments.md new file mode 100644 index 0000000000..4de58ca88c --- /dev/null +++ b/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 `
` in order to fix this error. + +```html +// Layout.vue + +``` + +## 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 + + + + +``` + +For more information on how attribute inheritance works, see [Non-Prop Attributes](/guide/component-props.html#disabling-attribute-inheritance). From 5d09e74b36d7a3617eabab0d7c5aab486e78e88e Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Mon, 13 Jul 2020 15:15:23 -0400 Subject: [PATCH 2/5] fix: code example syntax highlighting error --- src/guide/component-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/component-props.md b/src/guide/component-props.md index 5996fa5690..d8a9eec38b 100644 --- a/src/guide/component-props.md +++ b/src/guide/component-props.md @@ -324,7 +324,7 @@ app.component('custom-layout', { template: `
...
...
- +
...
` }) ``` From 578d65db22a647ca7434b917363b51c86866eb08 Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Mon, 13 Jul 2020 15:58:30 -0400 Subject: [PATCH 3/5] fix (#162): incorrect comment type --- src/guide/migration/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/fragments.md b/src/guide/migration/fragments.md index 4de58ca88c..6c71d7d261 100644 --- a/src/guide/migration/fragments.md +++ b/src/guide/migration/fragments.md @@ -9,7 +9,7 @@ In Vue 3, components now have official support for multi-root node components, i 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 `
` in order to fix this error. ```html -// Layout.vue + - - ``` For more information on how attribute inheritance works, see [Non-Prop Attributes](/guide/component-props.html#disabling-attribute-inheritance). From bd28a082807955b523da198e276b58125299753f Mon Sep 17 00:00:00 2001 From: Ben Hong Date: Tue, 14 Jul 2020 09:57:45 -0400 Subject: [PATCH 5/5] docs (#162): link fragments in intro and reorder section --- src/guide/migration/introduction.md | 36 ++++++++++++++--------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md index dfb67ef143..91322fb8cf 100644 --- a/src/guide/migration/introduction.md +++ b/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)