docs (#155): add filters api migration docs (#164)

* docs (#155): add filters to migration guide

* feature (#155): add simple badge styles

Author: bencodezen

Diff for: src/.vuepress/config.js

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

Diff for: 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 for: 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
 

Diff for: 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.