From 1b76a15edbf6ee36777a66b419309cd38a606d86 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 23:00:53 -0400
Subject: [PATCH 1/3] feature (#169): add new migration badges

---
 src/.vuepress/components/MigrationBadges.vue | 71 ++++++++++++++++++++
 src/.vuepress/styles/index.styl              | 10 ---
 src/.vuepress/theme/styles/index.styl        |  1 +
 3 files changed, 72 insertions(+), 10 deletions(-)
 create mode 100644 src/.vuepress/components/MigrationBadges.vue

diff --git a/src/.vuepress/components/MigrationBadges.vue b/src/.vuepress/components/MigrationBadges.vue
new file mode 100644
index 0000000000..14d8b5a050
--- /dev/null
+++ b/src/.vuepress/components/MigrationBadges.vue
@@ -0,0 +1,71 @@
+<script>
+const validBadges = {
+  breaking: 'breaking change',
+  core: 'core',
+  directives: 'directives',
+  removal: 'feature removal'
+}
+
+export default {
+  props: {
+    badges: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="migration-badge-wrapper">
+    <span
+      v-for="badgeType in badges"
+      :class="`migration-badge is-${badgeType}`"
+      :key="`badge-type-${badgeType}`"
+    >
+      {{ badgeType }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.migration-badge {
+  background-color: #ccc;
+  font-size: 0.8rem;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  margin-right: 0.5rem;
+  color: #222;
+  padding: 0.25rem 0.25rem;
+  font-weight: bold;
+
+  &.is-core {
+    background-color: #228740;
+    border-color: #228740;
+    color: #fff;
+  }
+
+  &.is-breaking {
+    background-color: #b00000;
+    border-color: #b00000;
+    color: #fff;
+  }
+
+  &.is-directives {
+    background-color: #fcff44;
+    border-color: #fcff44;
+    color: #222;
+  }
+
+  &.is-removed {
+    background-color: #cf8700;
+    border-color: #cf8700;
+    color: #fff;
+  }
+}
+
+.migration-badge-wrapper {
+  display: flex;
+  margin-top: -0.5rem;
+}
+</style>
diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl
index 1ed44dd2bd..fd40ef0fd5 100644
--- a/src/.vuepress/styles/index.styl
+++ b/src/.vuepress/styles/index.styl
@@ -156,13 +156,3 @@
   font-weight: bold;
   opacity: 1!important;
 }
-
-.badge {
-  background-color: #b00000;
-  font-size: 0.8rem;
-  border: 2px solid #b00000;
-  border-radius: 5px;
-  margin-right: 0.5rem;
-  color: #fff;
-  padding: 0.25rem 0.25rem;
-}
diff --git a/src/.vuepress/theme/styles/index.styl b/src/.vuepress/theme/styles/index.styl
index b63f1b4093..bfa54ba890 100644
--- a/src/.vuepress/theme/styles/index.styl
+++ b/src/.vuepress/theme/styles/index.styl
@@ -120,6 +120,7 @@ h1, h2, h3, h4, h5, h6
 
     &:first-child
       display flex
+      flex-wrap wrap
       align-items center
       margin-top -1.5rem
       margin-bottom 1rem

From 040280a50fed4a5e0ec9593210a07e1261ed12ae Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 23:01:12 -0400
Subject: [PATCH 2/3] docs (#169): update badges on parts of migration guide

---
 src/guide/migration/data-option.md           |  5 +-
 src/guide/migration/events-api.md            |  4 +-
 src/guide/migration/filters.md               |  4 +-
 src/guide/migration/functional-components.md | 11 ++-
 src/guide/migration/global-api.md            | 78 ++++++++++++--------
 src/guide/migration/keycode-modifiers.md     |  7 ++
 src/guide/migration/treeshaking.md           | 39 ++++++----
 src/guide/migration/v-model.md               |  9 +++
 8 files changed, 104 insertions(+), 53 deletions(-)

diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md
index 2a4dc6be52..383e522398 100644
--- a/src/guide/migration/data-option.md
+++ b/src/guide/migration/data-option.md
@@ -1,9 +1,12 @@
 ---
+title: Data Option
 types:
   - breaking
 ---
 
-# Data Option <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# {{ $frontmatter.title }}
+
+<MigrationBadges :badges="$frontmatter.types" />
 
 ## Overview
 
diff --git a/src/guide/migration/events-api.md b/src/guide/migration/events-api.md
index bc3c89e3da..f4e5f235c3 100644
--- a/src/guide/migration/events-api.md
+++ b/src/guide/migration/events-api.md
@@ -4,7 +4,9 @@ types:
   - breaking
 ---
 
-# `$on`, `$off` and `$once` methods removal <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# `$on`, `$off` and `$once` methods
+
+<MigrationBadges :badges="$frontmatter.types" />
 
 ## Overview
 
diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md
index 49bb45777c..2e7e940365 100644
--- a/src/guide/migration/filters.md
+++ b/src/guide/migration/filters.md
@@ -4,7 +4,9 @@ types:
   - breaking
 ---
 
-# Filters <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# Filters
+
+<MigrationBadges :badges="$frontmatter.types" />
 
 ## Overview
 
diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md
index 0da35ca96f..b2020eefd1 100644
--- a/src/guide/migration/functional-components.md
+++ b/src/guide/migration/functional-components.md
@@ -1,13 +1,20 @@
+---
+types:
+  - breaking
+---
+
 # Functional Components
 
+<MigrationBadges :badges="$frontmatter.types" />
+
 ## Overview
 
 In terms of what has changed, at a high level:
 
 - Performance gains from v2 for functional components are now negligible in v3, so we recommend just using stateful components
 - Functional components can only be created using a plain function that receives `props` and `context` (i.e., `slots`, `attrs`, `emit`)
-- **DEPRECATED:** `functional` attribute on single-file component (SFC) `<template>` is deprecated
-- **DEPRECATED:** `{ functional: true }` option in components created by functions is deprecated
+- **BREAKING:** `functional` attribute on single-file component (SFC) `<template>` is removed
+- **BREAKING:** `{ functional: true }` option in components created by functions is removed
 
 For more information, read on!
 
diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md
index 80578c4e39..a501254dac 100644
--- a/src/guide/migration/global-api.md
+++ b/src/guide/migration/global-api.md
@@ -1,8 +1,16 @@
+---
+types:
+  - core
+  - breaking
+---
+
 # Global API Changes
 
+<MigrationBadges :badges="$frontmatter.types" />
+
 Vue 2.x has a number of global APIs and configurations that globally mutate Vue’s behavior. For instance, to create a global component, you would use the `Vue.component` API like this:
 
-``` js
+```js
 Vue.component('button-counter', {
   data: () => ({
     count: 0
@@ -13,7 +21,7 @@ Vue.component('button-counter', {
 
 Similarly, this is how a global directive is declared:
 
-``` js
+```js
 Vue.directive('focus', {
   inserted: el => el.focus()
 })
@@ -21,32 +29,38 @@ Vue.directive('focus', {
 
 While this approach is convenient, it leads to a couple of problems. Technically, Vue 2 doesn't have a concept of an "app". What we define as an app is simply a root Vue instance created via `new Vue()`. Every root instance created from the same Vue constructor **shares the same global configuration**. As a result:
 
-* Global configuration makes it easy to accidentally pollute other test cases during testing. Users need to carefully store original global configuration and restore it after each test (e.g. resetting `Vue.config.errorHandler`). Some APIs like `Vue.use` and `Vue.mixin` don't even have a way to revert their effects. This makes tests involving plugins particularly tricky. In fact, vue-test-utils has to implement a special API `createLocalVue` to deal with this:
- 
-	``` js
+- Global configuration makes it easy to accidentally pollute other test cases during testing. Users need to carefully store original global configuration and restore it after each test (e.g. resetting `Vue.config.errorHandler`). Some APIs like `Vue.use` and `Vue.mixin` don't even have a way to revert their effects. This makes tests involving plugins particularly tricky. In fact, vue-test-utils has to implement a special API `createLocalVue` to deal with this:
+
+      	``` js
+
   import { createLocalVue, mount } from '@vue/test-utils'
-  
+
   // create an extended `Vue` constructor
   const localVue = createLocalVue()
-  
+
   // install a plugin “globally” on the “local” Vue constructor
   localVue.use(MyPlugin)
 
   // pass the `localVue` to the mount options
   mount(Component, { localVue })
-	```
 
-* Global configuration makes it difficult to share the same copy of Vue between multiple "apps" on the same page, but with different global configurations. 
+  ```
+
+  ```
+
+- Global configuration makes it difficult to share the same copy of Vue between multiple "apps" on the same page, but with different global configurations.
 
   ```js
   // this affects both root instances
-  Vue.mixin({ /* ... */ })
-  
+  Vue.mixin({
+    /* ... */
+  })
+
   const app1 = new Vue({ el: '#app-1' })
   const app2 = new Vue({ el: '#app-2' })
   ```
 
-To avoid these problems, in Vue 3 we introduce… 
+To avoid these problems, in Vue 3 we introduce…
 
 ## A New Global API: `createApp`
 
@@ -55,20 +69,20 @@ Calling `createApp` returns an _app instance_, a new concept in Vue 3.
 ```js
 import { createApp } from 'vue'
 
-const app = createApp() 
+const app = createApp()
 ```
 
 An app instance exposes a subset of the current global APIs. The rule of thumb is _any APIs that globally mutate Vue's behavior are now moved to the app instance_. Here is a table of the current global APIs and their corresponding instance APIs:
 
-| 2.x Global API | 3.x Instance API (`app`) |
-|----------------|--------------------------|
-| Vue.config | app.config |
-| Vue.config.productionTip | _removed_ ([see below](config-productiontip-removed)) |
+| 2.x Global API             | 3.x Instance API (`app`)                                                                        |
+| -------------------------- | ----------------------------------------------------------------------------------------------- |
+| Vue.config                 | app.config                                                                                      |
+| Vue.config.productionTip   | _removed_ ([see below](config-productiontip-removed))                                           |
 | Vue.config.ignoredElements | app.config.isCustomElement ([see below](#config-ignoredelements-is-now-config-iscustomelement)) |
-| Vue.component | app.component |
-| Vue.directive | app.directive |
-| Vue.mixin | app.mixin |
-| Vue.use | app.use ([see below](#a-note-for-plugin-authors)) |
+| Vue.component              | app.component                                                                                   |
+| Vue.directive              | app.directive                                                                                   |
+| Vue.mixin                  | app.mixin                                                                                       |
+| Vue.use                    | app.use ([see below](#a-note-for-plugin-authors))                                               |
 
 All other global APIs that do not globally mutate behavior are now named exports, as documented in [Global API Treeshaking](./treeshaking.html).
 
@@ -82,7 +96,7 @@ For ES modules builds, since they are used with bundlers, and in most cases a CL
 
 This config option was introduced with the intention to support native custom elements, so the renaming better conveys what it does. The new option also expects a function which provides more flexibility than the old string / RegExp approach:
 
-``` js
+```js
 // before
 Vue.config.ignoredElements = ['my-el', /^ion-/]
 
@@ -95,19 +109,19 @@ app.config.isCustomElement = tag => tag.startsWith('ion-')
 
 In 3.0, the check of whether an element is a component or not has been moved to the template compilation phase, therefore this config option is only respected when using the runtime compiler. If you are using the runtime-only build, `isCustomElement` must be passed to `@vue/compiler-dom` in the build setup instead - for example, via the [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions).
 
-* If `config.isCustomElement` is assigned to when using a runtime-only build, a warning will be emitted instructing the user to pass the option in the build setup instead;
-* This will be a new top-level option in the Vue CLI config.
-::: 
+- If `config.isCustomElement` is assigned to when using a runtime-only build, a warning will be emitted instructing the user to pass the option in the build setup instead;
+- This will be a new top-level option in the Vue CLI config.
+  :::
 
 ### A Note for Plugin Authors
 
 It is a common practice for plugin authors to install the plugins automatically in their UMD builds using `Vue.use`. For instance, this is how the official `vue-router` plugin installs itself in a browser environment:
 
 ```js
-var inBrowser = typeof window !== 'undefined';
+var inBrowser = typeof window !== 'undefined'
 /* … */
 if (inBrowser && window.Vue) {
-  window.Vue.use(VueRouter);
+  window.Vue.use(VueRouter)
 }
 ```
 
@@ -116,7 +130,7 @@ As the `use` global API is no longer available in Vue 3, this method will cease
 ```js
 const app = createApp(MyApp)
 app.use(VueRouter)
-``` 
+```
 
 ## Mounting App Instance
 
@@ -140,7 +154,7 @@ app.mount(MyApp, '#app', {
 
 With all these changes, the component and directive we have at the beginning of the guide will be rewritten into something like this:
 
-``` js
+```js
 const app = createApp()
 
 app.component('button-counter', {
@@ -154,8 +168,8 @@ app.directive('focus', {
   inserted: el => el.focus()
 })
 
-// now every Vue instance mounted with app.mount(), along with its 
-// component tree, will have the same “button-counter” component 
+// now every Vue instance mounted with app.mount(), along with its
+// component tree, will have the same “button-counter” component
 // and “focus” directive without polluting the global environment
 app.mount(MyApp, '#app')
 ```
@@ -192,7 +206,7 @@ import Bar from './Bar.vue'
 
 const createMyApp = () => {
   const app = createApp()
-  app.directive('focus', /* ... */)
+  app.directive('focus' /* ... */)
 
   return app
 }
diff --git a/src/guide/migration/keycode-modifiers.md b/src/guide/migration/keycode-modifiers.md
index cbb42b3d59..0afbca80ff 100644
--- a/src/guide/migration/keycode-modifiers.md
+++ b/src/guide/migration/keycode-modifiers.md
@@ -1,5 +1,12 @@
+---
+types:
+  - breaking
+---
+
 # KeyCode Modifiers
 
+<MigrationBadges :badges="$frontmatter.types" />
+
 ## Overview
 
 Here is a quick summary of what has changed:
diff --git a/src/guide/migration/treeshaking.md b/src/guide/migration/treeshaking.md
index 05d2a49ba4..f666f8245b 100644
--- a/src/guide/migration/treeshaking.md
+++ b/src/guide/migration/treeshaking.md
@@ -1,5 +1,13 @@
+---
+types:
+  - core
+  - breaking
+---
+
 # Global API Treeshaking
 
+<MigrationBadges :badges="$frontmatter.types" />
+
 ## Previous Syntax
 
 If you’ve ever had to manually manipulate DOM in Vue, you might have come across this pattern:
@@ -20,20 +28,20 @@ import { MyComponent } from './MyComponent.vue'
 
 test('an async feature', async () => {
   const wrapper = shallowMount(MyComponent)
-  
+
   // execute some DOM-related tasks
 
   await wrapper.vm.$nextTick()
 
-// run your assertions
+  // run your assertions
 })
 ```
 
-`Vue.nextTick()` is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()` is just a handy wrapper around `Vue.nextTick()` with the callback’s `this` context automatically bound to the current Vue instance for convenience. 
+`Vue.nextTick()` is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()` is just a handy wrapper around `Vue.nextTick()` with the callback’s `this` context automatically bound to the current Vue instance for convenience.
 
-But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in our app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters. 
+But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in our app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
 
-Module bundlers like [webpack](https://webpack.js.org/) support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for “dead code elimination.” Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()` are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not. 
+Module bundlers like [webpack](https://webpack.js.org/) support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for “dead code elimination.” Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()` are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not.
 
 ## Current Syntax
 
@@ -65,7 +73,7 @@ test('an async feature', async () => {
 })
 ```
 
-Calling `Vue.nextTick()` directly will now result in the infamous `undefined is not a function` error. 
+Calling `Vue.nextTick()` directly will now result in the infamous `undefined is not a function` error.
 
 With this change, provided the module bundler supports tree-shaking, global APIs that are not used in a Vue application will be eliminated from the final bundle, resulting in an optimal file size.
 
@@ -73,13 +81,12 @@ With this change, provided the module bundler supports tree-shaking, global APIs
 
 These global APIs in Vue 2.x are affected by this change:
 
-* `Vue.nextTick`
-* `Vue.observable` (replaced by `Vue.reactive`)
-* `Vue.version`
-* `Vue.compile` (only in full builds)
-* `Vue.set` (only in compat builds)
-* `Vue.delete` (only in compat builds)
-
+- `Vue.nextTick`
+- `Vue.observable` (replaced by `Vue.reactive`)
+- `Vue.version`
+- `Vue.compile` (only in full builds)
+- `Vue.set` (only in compat builds)
+- `Vue.delete` (only in compat builds)
 
 ## Internal Helpers
 
@@ -103,9 +110,9 @@ export function render() {
 }
 ```
 
-This essentially means the `Transition` component only gets imported when the application actually makes use of it. In other words, if the application doesn’t have any `<transition>` component, the code supporting this feature will not be present in the final bundle. 
+This essentially means the `Transition` component only gets imported when the application actually makes use of it. In other words, if the application doesn’t have any `<transition>` component, the code supporting this feature will not be present in the final bundle.
 
-With global tree-shaking, the user only “pay” for the features they actually use. Even better, knowing that optional features won't increase the bundle size for applications not using them, framework size has become much less a concern for additional core features in the future, if at all. 
+With global tree-shaking, the user only “pay” for the features they actually use. Even better, knowing that optional features won't increase the bundle size for applications not using them, framework size has become much less a concern for additional core features in the future, if at all.
 
 ::: warning Important
 The above only applies to the [ES Modules builds](/guide/installation.html#explanation-of-different-builds) for use with tree-shaking capable bundlers - the UMD build still includes all features and exposes everything on the Vue global variable (and the compiler will produce appropriate output to use APIs off the global instead of importing).
@@ -153,7 +160,7 @@ module.exports = {
 
 This will tell webpack to treat the Vue module as an external library and not bundle it.
 
-If your module bundler of choice happens to be [Rollup](https://rollupjs.org/), you basically get the same effect for free, as by default Rollup will treat absolute module IDs (`'vue'` in our case) as external dependencies and not include them in the final bundle. During bundling though, it might emit a [“Treating vue as external dependency”](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency) warning, which can be suppressed with the `external` option: 
+If your module bundler of choice happens to be [Rollup](https://rollupjs.org/), you basically get the same effect for free, as by default Rollup will treat absolute module IDs (`'vue'` in our case) as external dependencies and not include them in the final bundle. During bundling though, it might emit a [“Treating vue as external dependency”](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency) warning, which can be suppressed with the `external` option:
 
 ```js
 // rollup.config.js
diff --git a/src/guide/migration/v-model.md b/src/guide/migration/v-model.md
index 3721638f77..3ca2ea3894 100644
--- a/src/guide/migration/v-model.md
+++ b/src/guide/migration/v-model.md
@@ -1,5 +1,14 @@
+---
+types:
+  - core
+  - breaking
+  - directives
+---
+
 # Changes to `v-model` on custom components
 
+<MigrationBadges :badges="$frontmatter.types" />
+
 ## Overview
 
 In terms of what has changed, at a high level:

From 5da5ab0156d054a38d90a5058fb1ee4a70c3679c Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 28 Jul 2020 20:52:17 -0400
Subject: [PATCH 3/3] feature (#169): update migration badges

---
 src/.vuepress/components/MigrationBadges.vue  | 31 ++++++++++---------
 src/guide/migration/async-components.md       |  7 ++++-
 src/guide/migration/attribute-coercion.md     | 11 +++++--
 src/guide/migration/custom-directives.md      |  7 ++++-
 .../migration/custom-elements-interop.md      |  4 +--
 src/guide/migration/data-option.md            |  6 ++--
 src/guide/migration/events-api.md             |  7 ++---
 src/guide/migration/filters.md                |  7 ++---
 src/guide/migration/fragments.md              |  7 ++++-
 src/guide/migration/functional-components.md  |  6 ++--
 src/guide/migration/global-api-treeshaking.md |  7 ++---
 src/guide/migration/global-api.md             |  7 ++---
 .../migration/inline-template-attribute.md    |  9 +++---
 src/guide/migration/keycode-modifiers.md      |  6 ++--
 src/guide/migration/render-function-api.md    |  7 ++++-
 src/guide/migration/slots-unification.md      |  7 ++++-
 src/guide/migration/v-model.md                |  8 ++---
 17 files changed, 77 insertions(+), 67 deletions(-)

diff --git a/src/.vuepress/components/MigrationBadges.vue b/src/.vuepress/components/MigrationBadges.vue
index 14d8b5a050..d256d78cb6 100644
--- a/src/.vuepress/components/MigrationBadges.vue
+++ b/src/.vuepress/components/MigrationBadges.vue
@@ -1,16 +1,14 @@
 <script>
-const validBadges = {
-  breaking: 'breaking change',
-  core: 'core',
-  directives: 'directives',
-  removal: 'feature removal'
-}
+const validBadges = ['new', 'breaking', 'removed', 'updated']
 
 export default {
   props: {
     badges: {
       type: Array,
-      default: () => []
+      default: () => [],
+      validator(value) {
+        return validBadges.includes(value)
+      }
     }
   }
 }
@@ -35,11 +33,16 @@ export default {
   border: 2px solid #ccc;
   border-radius: 5px;
   margin-right: 0.5rem;
+  margin-top: 0.5rem;
   color: #222;
   padding: 0.25rem 0.25rem;
   font-weight: bold;
 
-  &.is-core {
+  &:first-child {
+    margin-left: 1rem;
+  }
+
+  &.is-new {
     background-color: #228740;
     border-color: #228740;
     color: #fff;
@@ -51,17 +54,17 @@ export default {
     color: #fff;
   }
 
-  &.is-directives {
-    background-color: #fcff44;
-    border-color: #fcff44;
-    color: #222;
-  }
-
   &.is-removed {
     background-color: #cf8700;
     border-color: #cf8700;
     color: #fff;
   }
+
+  &.is-updated {
+    background-color: #fcff44;
+    border-color: #fcff44;
+    color: #222;
+  }
 }
 
 .migration-badge-wrapper {
diff --git a/src/guide/migration/async-components.md b/src/guide/migration/async-components.md
index 372e63cfdf..ee0b1c9f2c 100644
--- a/src/guide/migration/async-components.md
+++ b/src/guide/migration/async-components.md
@@ -1,4 +1,9 @@
-# Async Components
+---
+badges:
+  - new
+---
+
+# Async Components <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/attribute-coercion.md b/src/guide/migration/attribute-coercion.md
index 8a7edf4da4..cd1d169534 100644
--- a/src/guide/migration/attribute-coercion.md
+++ b/src/guide/migration/attribute-coercion.md
@@ -1,4 +1,9 @@
-# Attribute Coercion Behavior
+---
+badges:
+  - breaking
+---
+
+# Attribute Coercion Behavior <MigrationBadges :badges="$frontmatter.badges" />
 
 ::: info Info
 This is a low-level internal API change and does not affect most developers.
@@ -27,7 +32,7 @@ In 2.x, we had the following strategies for coercing `v-bind` values:
 
 The following table describes how Vue coerce "enumerated attributes" differently with normal non-boolean attributes:
 
-| Binding expression       | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
+| Binding expression  | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
 | ------------------- | ----------------------- | --------------------------------- |
 | `:attr="null"`      | /                       | `draggable="false"`               |
 | `:attr="undefined"` | /                       | /                                 |
@@ -53,7 +58,7 @@ For non-boolean attributes, Vue will stop removing them if they are `false` and
 
 The following table describes the new behavior:
 
-| Binding expression       | `foo` <sup>normal</sup>    | `draggable` <sup>enumerated</sup> |
+| Binding expression  | `foo` <sup>normal</sup>    | `draggable` <sup>enumerated</sup> |
 | ------------------- | -------------------------- | --------------------------------- |
 | `:attr="null"`      | /                          | / <sup>†</sup>                    |
 | `:attr="undefined"` | /                          | /                                 |
diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md
index 7e80d040e3..a0a5bb96d5 100644
--- a/src/guide/migration/custom-directives.md
+++ b/src/guide/migration/custom-directives.md
@@ -1,4 +1,9 @@
-# Custom Directives
+---
+badges:
+  - breaking
+---
+
+# Custom Directives <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/custom-elements-interop.md b/src/guide/migration/custom-elements-interop.md
index efdda91626..d492676b76 100644
--- a/src/guide/migration/custom-elements-interop.md
+++ b/src/guide/migration/custom-elements-interop.md
@@ -1,9 +1,9 @@
 ---
-types:
+badges:
   - breaking
 ---
 
-# Custom Elements Interop changes <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+# Custom Elements Interop changes <MigrationBadges :badges="$frontmatter.badges" />
 
 # Overview
 
diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md
index 383e522398..513f3edbbd 100644
--- a/src/guide/migration/data-option.md
+++ b/src/guide/migration/data-option.md
@@ -1,12 +1,10 @@
 ---
 title: Data Option
-types:
+badges:
   - breaking
 ---
 
-# {{ $frontmatter.title }}
-
-<MigrationBadges :badges="$frontmatter.types" />
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/events-api.md b/src/guide/migration/events-api.md
index dd45ccd3ac..ccc447bde4 100644
--- a/src/guide/migration/events-api.md
+++ b/src/guide/migration/events-api.md
@@ -1,12 +1,9 @@
 ---
-types:
-  - removed
+badges:
   - breaking
 ---
 
-# Events API
-
-<MigrationBadges :badges="$frontmatter.types" />
+# Events API <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md
index 9817250225..7f8a29ba7b 100644
--- a/src/guide/migration/filters.md
+++ b/src/guide/migration/filters.md
@@ -1,12 +1,9 @@
 ---
-types:
+badges:
   - removed
-  - breaking
 ---
 
-# Filters
-
-<MigrationBadges :badges="$frontmatter.types" />
+# Filters <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/fragments.md b/src/guide/migration/fragments.md
index bd68409a7b..074179a9ad 100644
--- a/src/guide/migration/fragments.md
+++ b/src/guide/migration/fragments.md
@@ -1,4 +1,9 @@
-# Fragments
+---
+badges:
+  - new
+---
+
+# Fragments <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md
index d28b103bad..056b899688 100644
--- a/src/guide/migration/functional-components.md
+++ b/src/guide/migration/functional-components.md
@@ -1,11 +1,9 @@
 ---
-types:
+badges:
   - breaking
 ---
 
-# Functional Components
-
-<MigrationBadges :badges="$frontmatter.types" />
+# Functional Components <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/global-api-treeshaking.md b/src/guide/migration/global-api-treeshaking.md
index bec2aa84ff..26111c4f06 100644
--- a/src/guide/migration/global-api-treeshaking.md
+++ b/src/guide/migration/global-api-treeshaking.md
@@ -1,12 +1,9 @@
 ---
-types:
-  - core
+badges:
   - breaking
 ---
 
-# Global API Treeshaking
-
-<MigrationBadges :badges="$frontmatter.types" />
+# Global API Treeshaking <MigrationBadges :badges="$frontmatter.badges" />
 
 ## 2.x Syntax
 
diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md
index 33179956f8..d1206a4a01 100644
--- a/src/guide/migration/global-api.md
+++ b/src/guide/migration/global-api.md
@@ -1,12 +1,9 @@
 ---
-types:
-  - core
+badges:
   - breaking
 ---
 
-# Global API
-
-<MigrationBadges :badges="$frontmatter.types" />
+# Global API <MigrationBadges :badges="$frontmatter.badges" />
 
 Vue 2.x has a number of global APIs and configurations that globally mutate Vue’s behavior. For instance, to create a global component, you would use the `Vue.component` API like this:
 
diff --git a/src/guide/migration/inline-template-attribute.md b/src/guide/migration/inline-template-attribute.md
index ea7983d6bc..1ae9810315 100644
--- a/src/guide/migration/inline-template-attribute.md
+++ b/src/guide/migration/inline-template-attribute.md
@@ -1,10 +1,9 @@
 ---
-types:
+badges:
   - breaking
-  - removal
 ---
 
-# Inline Template Attribute
+# Inline Template Attribute <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
@@ -68,7 +67,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
 <!--
@@ -80,4 +79,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!
diff --git a/src/guide/migration/keycode-modifiers.md b/src/guide/migration/keycode-modifiers.md
index 05a41d0749..7d2131423e 100644
--- a/src/guide/migration/keycode-modifiers.md
+++ b/src/guide/migration/keycode-modifiers.md
@@ -1,11 +1,9 @@
 ---
-types:
+badges:
   - breaking
 ---
 
-# KeyCode Modifiers
-
-<MigrationBadges :badges="$frontmatter.types" />
+# KeyCode Modifiers <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md
index 6381572f07..2cb18a07fb 100644
--- a/src/guide/migration/render-function-api.md
+++ b/src/guide/migration/render-function-api.md
@@ -1,4 +1,9 @@
-# Render Function API
+---
+badges:
+  - breaking
+---
+
+# Render Function API <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md
index 5a99e9b5da..ada95d7b22 100644
--- a/src/guide/migration/slots-unification.md
+++ b/src/guide/migration/slots-unification.md
@@ -1,4 +1,9 @@
-# Slots Unification
+---
+badges:
+  - breaking
+---
+
+# Slots Unification <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview
 
diff --git a/src/guide/migration/v-model.md b/src/guide/migration/v-model.md
index c28ecc530c..c035f04c6f 100644
--- a/src/guide/migration/v-model.md
+++ b/src/guide/migration/v-model.md
@@ -1,13 +1,9 @@
 ---
-types:
-  - core
+badges:
   - breaking
-  - directives
 ---
 
-# `v-model`
-
-<MigrationBadges :badges="$frontmatter.types" />
+# `v-model` <MigrationBadges :badges="$frontmatter.badges" />
 
 ## Overview