initial commit

src/components/Ad.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    This is an ad ☠️
+  </div>
+</template>
+
+<style scoped>
+  div {
+    background-color: tomato;
+    border-radius: 5px;
+    color: white;
+    padding: 20px;
+  }
+</style>

src/components/CurrentTime.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    Time: {{ new Date() }}
+  </div>  
+</template>
+
+<style scoped>
+  div {
+    background-color: black;
+    border-radius: 5px;
+    color: white;
+    padding: 20px;
+  }
+</style>

src/components/Preview.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <p>
+      Rendered Preview:
+    </p>
+    <component :is="component" v-if="component" />
+    <p>
+      Code:
+    </p>
+    <pre v-if="content" class="language-markup"><code class="language-markup" v-html="$options.filters.highlight(content, 'markup')"></code></pre>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      component: null,
+      content: null,
+    }
+  },
+
+  mounted() {
+    this.content = require(`!!raw-loader!~/components/${this.path}`).default
+    this.component = require(`~/components/${this.path}`).default
+  }
+}
+</script>