add basic tab

src/components/Tab/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <pre v-if="formattedCode"><code>{{ formattedCode }}</code></pre>
+</template>
+
+<script>
+import { outdent } from '@mvasilkov/outdent'
+
+export default {
+  data() {
+    return {
+      formattedCode: null
+    }
+  },
+
+  methods: {
+    updateCode() {
+      const text = this.$slots.default[0].text
+
+      if (text) {
+        this.formattedCode = outdent(text)
+      }
+    }
+  },
+
+  beforeUpdate() {
+    this.updateCode()
+  },
+
+  mounted() {
+    this.updateCode()
+  },
+}
+</script>

src/main.js

@@ -2,10 +2,12 @@ import Prism from 'prismjs'
 import 'prismjs/themes/prism-coy.css'
 import DefaultLayout from '~/layouts/Default.vue'
 import Demo from '~/components/Demo'
+import Tab from '~/components/Tab'
 
 export default function (Vue, { router, head, isClient }) {
   Vue.component('Layout', DefaultLayout)
   Vue.component('Demo', Demo)
+  Vue.component('Tab', Tab)
   Vue.filter('highlight', (code, lang = 'javascript') => {
     return Prism.highlight(code, Prism.languages[lang], lang)
   })