Setup for loading markdown files

Author: mrahhal

package-lock.json

@@ -11,9 +11,11 @@
   "dependencies": {
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^8.4.1"
+    "vue-property-decorator": "^8.4.1",
+    "vue-showdown": "^2.4.1"
   },
   "devDependencies": {
+    "@types/showdown": "^1.9.3",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
@@ -22,6 +24,7 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "raw-loader": "^4.0.0",
     "sass": "^1.26.3",
     "sass-loader": "^8.0.2",
     "typescript": "~3.8.3",

package.json

@@ -2,11 +2,18 @@ import '@/components/globals';
 import '@/filters/globals';
 
 import Vue from 'vue';
+import VueShowdown from 'vue-showdown';
 
 import App from './App.vue';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+
+Vue.use(VueShowdown, {
+  options: {
+    emoji: true,
+  },
+});
 
 new Vue({
   render: h => h(App),
-}).$mount('#app')
+}).$mount('#app');

src/main.ts

@@ -0,0 +1 @@
+declare module '*.md';

src/typings/global.d.ts

@@ -0,0 +1,10 @@
+module.exports = {
+  configureWebpack: {
+    module: {
+      rules: [{
+        test: /\.md$/i,
+        use: 'raw-loader',
+      }],
+    },
+  },
+};