From 48fbcc1866c1d790802ce41556489d027936130b Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 13 Jul 2020 20:16:53 -0400
Subject: [PATCH 1/2] docs (#155): add filters to migration guide

---
 src/.vuepress/config.js        |  3 +-
 src/guide/migration/filters.md | 75 ++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/guide/migration/filters.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index af6106dce0..56bc0f6af1 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/filters'
       ]
     },
     {
diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md
new file mode 100644
index 0000000000..4f294ecad2
--- /dev/null
+++ b/src/guide/migration/filters.md
@@ -0,0 +1,75 @@
+---
+types:
+  - removed
+  - breaking
+---
+
+# Filters <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+
+## Overview
+
+Filters are removed from Vue 3.0 and no longer be supported.
+
+## 2.x Syntax
+
+In 2.x, developers could use filters in order to apply common text formatting.
+
+For example:
+
+```html
+<template>
+  <h1>Bank Account Balance</h1>
+  <p>{{ accountBalance | currencyUSD }}</p>
+</template>
+
+<script>
+  export default {
+    props: {
+      accountBalance: {
+        type: Number,
+        required: true
+      }
+    },
+    filters: {
+      currencyUSD(value) {
+        return '$' + value
+      }
+    }
+  }
+</script>
+```
+
+While this seems like a convenience, it requires a custom syntax that breaks the assumption of expressions inside of curly braces being "just JavaScript," which has both learning and implementation costs.
+
+## 3.x Update
+
+In 3.x, filters are removed and no longer supported. Instead, we recommend replacing with method calls or computed properties instead.
+
+Using the example above, here is one example of how it could be implemented.
+
+```html
+<template>
+  <h1>Bank Account Balance</h1>
+  <p>{{ accountInUSD }}</p>
+</template>
+
+<script>
+  export default {
+    props: {
+      accountBalance: {
+        type: Number,
+        required: true
+      }
+    },
+    computed: {
+      accountInUSD() {
+        return '$' + this.accountBalance
+      }
+    }
+  }
+</script>
+```
+
+## How to Migrate
+
+Instead of using filters, we recommend replacing them with computed properties or methods.

From 0496985b2d1c85dad27f69df33a0501c3df8cc60 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 13 Jul 2020 20:17:27 -0400
Subject: [PATCH 2/2] feature (#155): add simple badge styles

---
 src/.vuepress/styles/index.styl       | 10 ++++++++++
 src/.vuepress/theme/styles/index.styl |  5 +++++
 2 files changed, 15 insertions(+)

diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl
index fd40ef0fd5..1ed44dd2bd 100644
--- a/src/.vuepress/styles/index.styl
+++ b/src/.vuepress/styles/index.styl
@@ -156,3 +156,13 @@
   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 e3940e582d..b63f1b4093 100644
--- a/src/.vuepress/theme/styles/index.styl
+++ b/src/.vuepress/theme/styles/index.styl
@@ -119,12 +119,17 @@ h1, h2, h3, h4, h5, h6
     margin-bottom 0
 
     &:first-child
+      display flex
+      align-items center
       margin-top -1.5rem
       margin-bottom 1rem
 
       + p, + pre, + .custom-block
         margin-top 2rem
 
+      .badge:first-of-type
+        margin-left 0.5rem
+
   &:hover .header-anchor
     opacity: 1