Add vue router, add TheHeader with slots, use babel-plugin-module-res…

…olver for relative base path

.babelrc

@@ -2,6 +2,11 @@
   "presets": [
     "env"
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": [
+    "transform-runtime",
+    ["module-resolver", {
+      "root": ["./"]
+    }]
+  ],
   "comments": false
 }

package.json

@@ -14,17 +14,21 @@
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",
+    "components": "^0.1.0",
     "http-server": "^0.9.0",
     "npm": "^5.8.0",
+    "src": "^1.1.2",
     "sweetalert": "^2.1.0",
-    "vue": "^2.1.10"
+    "vue": "^2.1.10",
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^1.0.0",
     "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
+    "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-register": "^6.22.0",

src/App.vue

@@ -3,66 +3,9 @@
     <div class='ui centered grid'>
       <div class='twelve wide mobile eight wide tablet six wide computer column'>
 
-        <h2 class="ui dividing header">
-          <i class="green check square outline icon"></i>
-          <div class="content">
-            VueDO
-            <div class="sub header">Vue2 basic demo</div>
-          </div>
-        </h2>
-
-        <!-- v-bind an array -->
-        <todo-list :todos="todos"/>
-
-        <!-- Slots and v-on emitted events -->
-        <create-todo @create-todo="createTodo">
-          Your new Todo
-        </create-todo>
+        <router-view></router-view>
 
       </div>
     </div>
   </div>
 </template>
-
-<script>
-  import sweetalert from 'sweetalert'
-  import TodoList from './components/ListView/_ListView'
-  import CreateTodo from './components/ListView/TodoCreate'
-
-  export default {
-    name: 'app',
-    components: {
-      TodoList,
-      CreateTodo,
-    },
-    data() {
-      return {
-        todos: [{
-          title: 'Todo A',
-          project: 'Project A',
-          done: false,
-        }, {
-          title: 'Todo B',
-          project: 'Project B',
-          done: true,
-        }, {
-          title: 'Todo C',
-          project: 'Project C',
-          done: false,
-        }, {
-          title: 'Todo D',
-          project: 'Project D',
-          done: false,
-        }],
-      }
-    },
-
-    methods: {
-      createTodo(newTodo) {
-        this.todos.push(newTodo)
-
-        sweetalert('Success!', 'To-Do created!', 'success')
-      },
-    },
-  }
-</script>

src/components/ListView/TodoCreate.vue

@@ -1,24 +1,26 @@
 <template>
   <div class='ui basic content center aligned segment'>
     <!--Add button-->
-    <button class="ui circular positive icon button" @click="openForm" v-show="!isCreating">
+    <button class="ui circular positive icon button"
+            @click="openForm"
+            v-show="!isCreating">
       <i class="plus icon"></i>
     </button>
 
     <!--form-->
-    <div class="ui centered card" v-show="isCreating">
+    <div class="ui fluid card" v-show="isCreating">
       <div class="content">
         <div class="ui form">
           <div class="field">
             <label>
-              <slot></slot>
-              <input v-model="titleText" type="text">
+              Your new Todo
+              <input type="text" v-model="titleText">
             </label>
           </div>
           <div class="field">
             <label>
               Project
-              <input v-model="projectText" type="text" >
+              <input type="text" v-model="projectText">
             </label>
           </div>