Add error boundary example

Author: simsim0709

docs/.vuepress/components/ErrorBoundary.vue

@@ -0,0 +1,24 @@
+<script>
+export default {
+  name: 'ErrorBoundary',
+  data() {
+    return {
+      error: false,
+      errorMessage: '',
+    };
+  },
+  errorCaptured(err, vm, info) {
+    this.error = true;
+    this.errorMessage = `Sorry, error occured in ${info}`;
+
+    return false;
+  },
+  render(h) {
+    if (this.error) {
+      return h('p', { class: 'demo bg-danger' }, this.errorMessage);
+    }
+
+    return this.$slots.default[0];
+  },
+};
+</script>

docs/.vuepress/components/SFCButton.vue

@@ -19,7 +19,7 @@ export default {
       console.log('clicked');
     },
   },
-}
+};
 </script>
 
 <style scoped>

docs/.vuepress/components/ThrowError.vue

@@ -0,0 +1,25 @@
+<template>
+  <p class="demo">
+    <button class="btn btn-danger" @click.prevent="throwError()">Error Thrown Button ({{count}})</button>
+  </p>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      count: 0,
+    };
+  },
+  watch: {
+    count() {
+      throw new Error('error');
+    },
+  },
+  methods: {
+    throwError() {
+      this.count++;
+    },
+  },
+};
+</script>

docs/.vuepress/override.styl

@@ -0,0 +1,24 @@
+.btn {
+  display: inline-block;
+  font-size: 1.2rem;
+  color: #212121;
+  padding: 0.8rem 1.6rem;
+  border-radius: 4px;
+  transition: background-color 0.1s ease;
+  box-sizing: border-box;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #3eaf7c;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #da5961;
+}
+
+.bg-danger {
+  color: #fff;
+  background-color: #da5961;
+}

docs/patterns/README.md

@@ -31,7 +31,7 @@ export default {
       console.log('clicked');
     },
   },
-}
+};
 </script>
 
 <style scoped>
@@ -962,6 +962,10 @@ export default {
 </error-boundary>
 ```
 
+<ErrorBoundary>
+  <ThrowError></ThrowError>
+</ErrorBoundary>
+
 #### Examples
 
 - [Example 1](https://jsfiddle.net/Linusborg/z84wspcg/)