adding support for markdown in pages

.gitignore

@@ -6,3 +6,4 @@ node_modules
 dist
 .env
 .env.*
+package-lock.json

README.md

@@ -46,3 +46,45 @@ prev: '/docs/wiki-publisher/'
 next: '/docs/digitalme/'
 ---
 ```
+
+### Adding a markdown to your page i.e About.vue
+
+```
+<template>
+  <Layout :hideHeader="false" :disableScroll="true">
+
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
+
+      <VacationCard
+        img="/img/garden.jpg"
+        imgAlt="Beach in Cancun"
+        eyebrow="Private Villa"
+        title="
+              - Relaxing All-Inclusive Resort in Cancun
+              - Test
+              "
+        pricing="$299 USD per night"
+        url="/vacations/cancun"
+      />
+      <vue-markdown>
+# This is markdown
+### Hello world!
+      </vue-markdown>
+    </div>
+</Layout>
+</template>
+
+<script>
+import VueMarkdown from 'vue-markdown'
+
+export default {
+  metaInfo: {
+    title: "About us"
+  },
+
+  components: {
+    VueMarkdown
+  }
+};
+</script>
+```

package.json

@@ -11,6 +11,7 @@
     "@gridsome/transformer-remark": "^0.6.2",
     "@noxify/gridsome-remark-classes": "^1.0.0",
     "@noxify/gridsome-remark-table-align": "^1.0.0",
+    "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "gridsome": "^0.7.20",
     "gridsome-plugin-tailwindcss": "^3.0.1",
@@ -22,7 +23,8 @@
     "tailwindcss": "^1.8.4",
     "tailwindcss-gradients": "^3.0.0",
     "tailwindcss-tables": "^0.4.0",
-    "v-tooltip": "^2.0.3"
+    "v-tooltip": "^2.0.3",
+    "vue-markdown": "^2.2.4"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
@@ -30,4 +32,4 @@
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/vue-fontawesome": "^2.0.0"
   }
-}
+}

src/main.js

@@ -26,4 +26,6 @@ export default function (Vue, {router, head, isClient}) {
     defaultPlacement: 'top-end',
     defaultClass: 'bg-black text-xs px-2 leading-normal py-1 rounded absolute text-gray-400 max-w-xs mb-1'
   })
+  var VueMarkdown = require('vue-markdown');
+  Vue.use(VueMarkdown);
 }

src/pages/About.vue

@@ -14,20 +14,24 @@
         pricing="$299 USD per night"
         url="/vacations/cancun"
       />
-
-
+      <vue-markdown>
+# This is markdown
+### Hello world!
+      </vue-markdown>
     </div>
-
-
-
-  </Layout>
+</Layout>
 </template>
 
 <script>
+import VueMarkdown from 'vue-markdown'
 
 export default {
   metaInfo: {
     title: "About us"
+  },
+
+  components: {
+    VueMarkdown
   }
 };
 </script>