Initial commit

Author: vycoder

README.md

@@ -1,4 +1,16 @@
-# blog-markdown
+# vue-markdown-blog
+> Creating a simple blog using Vue with markdown.
+
+## Getting started
+```
+git clone https://github.com/josephharveyangeles/vue-markdown-blog
+cd vue-markdown-blog
+yarn install
+yarn serve
+```
+
+## Demo
+Demo website is over here: [vue-markdown-blog.netlify.com](https://vue-markdown-blog.netlify.com/)
 
 ## Project setup
 ```
@@ -15,15 +27,7 @@ yarn run serve
 yarn run build
 ```
 
-### Run your tests
-```
-yarn run test
-```
-
 ### Lints and fixes files
 ```
 yarn run lint
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "blog-markdown",
+  "name": "blog-vue-markdown",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,7 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "vue": "^2.6.6"
+    "vue": "^2.6.6",
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.0",
@@ -17,6 +18,9 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "vue-markdown-loader": "^2.4.1",
     "vue-template-compiler": "^2.5.21"
   },
   "eslintConfig": {

src/App.vue

@@ -1,28 +1,18 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div>
+      <router-view/>
+    </div>
   </div>
 </template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'app',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
+<style scoped>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  max-width: 90vw;
+  margin: 0 auto;
 }
+
 </style>

src/components/HelloWorld.vue

@@ -0,0 +1,3 @@
+# This is a test
+## Heading 2
+_lorem ipsum_ dolor __amet__

src/components/foo.md

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  router,
+  render: h => h(App)
 }).$mount('#app')