index.vue

<template>
  <div>
    <div class="card p-1" v-for="nippo in nippoes">
        <h3 class="card-title">{{ toJpDate(nippo.created_at) }}</h3>
        <p class="card-text">{{ nippo.content }}</p> <router-link :to="{ name: 'edit', params: { id: nippo.id } }" class="btn btn-info">編集</router-link>
    </div>
  </div>
</template>

<script>

import Vue from 'vue';
import NippoDate from '../../mixins/nippo-date.js';
import moment from 'moment';
import axios from 'axios';

export default {
  data: () => {
    return {
      nippoes: []
    }
  },
  mixins: [NippoDate],
  created() {
    this.fetchNippoes();
  },
  methods: {
    fetchNippoes() {
      axios.get('http://localhost:8000/api/nippoes').then((response) => {
        this.nippoes = response.data;
      }).catch((response) => {
        console.log("failure");
      });
    }
  }
}
</script>

nippo.diff

diff --git a/package.json b/package.json
index 7551d11..d29dde7 100644
--- a/package.json
+++ b/package.json
@@ -11,15 +11,9 @@
   "browserify": {
     "transform": [
       "babelify",
-      "vueify",
-      "aliasify"
+      "vueify"
     ]
   },
-  "aliasify": {
-    "aliases": {
-      "vue": "vue/dist/vue.js"
-    }
-  },
   "dependencies": {
     "axios": "^0.15.3",
     "moment": "^2.16.0",
diff --git a/src/js/components/app.vue b/src/js/components/app.vue
index dfe3d25..330a224 100644
--- a/src/js/components/app.vue
+++ b/src/js/components/app.vue
@@ -3,12 +3,7 @@
     <nippo-header></nippo-header>
 
     <p><router-link :to="{ path: '/new' }" class="btn btn-info">new nippo</router-link></p>
-    <template v-for="nippo in nippoes">
-      <div class="card p-1">
-        <h3 class="card-title">{{ toJpDate(nippo.created_at) }}</h3>
-        <p class="card-text">{{ nippo.content }}</p> <router-link :to="{ name: 'edit', params: { id: nippo.id } }" class="btn btn-info">編集</router-link>
-      </div>
-    </template>
+    <router-view></router-view>
   </div>
 </template>
 
@@ -16,31 +11,14 @@
 
 import Vue from 'vue';
 import Header from './header.vue';
-import NippoDate from '../mixins/nippo-date.js';
-import moment from 'moment';
 import axios from 'axios';
 
 export default {
   data: () => {
-    return {
-      nippoes: []
-    }
+    return {}
   },
-  mixins: [NippoDate],
   components: {
     'nippo-header': Header
-  },
-  created() {
-    this.fetchNippoes();
-  },
-  methods: {
-    fetchNippoes() {
-      axios.get('http://localhost:8000/api/nippoes').then((response) => {
-        this.nippoes = response.data;
-      }).catch((response) => {
-        console.log("failure");
-      });
-    }
   }
 }
 </script>
diff --git a/src/js/components/nippo/edit.vue b/src/js/components/nippo/edit.vue
index 638009a..6a75cf4 100644
--- a/src/js/components/nippo/edit.vue
+++ b/src/js/components/nippo/edit.vue
@@ -1,14 +1,10 @@
 <template>
-  <div>
-    <nippo-header></nippo-header>
-
-    <div class="card p-1">
-      <h3 class="card-title">{{ toJpDate(nippo.created_at) }}の日報</h3>
-      <textarea class="form-control" rows="10" v-model="nippo.content"></textarea><br />
-      <button @click="updateNippo" class="btn btn-primary">更新</button>
-      <button @click="deleteNippo" class="btn btn-warning">削除</button>
-      <router-link :to="{ path: '/' }" class="btn btn-secondary">戻る</router-link>
-    </div>
+  <div class="card p-1">
+    <h3 class="card-title">{{ toJpDate(nippo.created_at) }}の日報</h3>
+    <textarea class="form-control" rows="10" v-model="nippo.content"></textarea><br />
+    <button @click="updateNippo" class="btn btn-primary">更新</button>
+    <button @click="deleteNippo" class="btn btn-warning">削除</button>
+    <router-link :to="{ path: '/' }" class="btn btn-secondary">戻る</router-link>
   </div>
 </template>
 
@@ -26,9 +22,6 @@ export default {
     }
   },
   mixins: [NippoDate],
-  components: {
-    'nippo-header': Header
-  },
   created() {
     this.fetchNippo(this.$route.params.id);
   },
diff --git a/src/js/components/nippo/new.vue b/src/js/components/nippo/new.vue
index 7c2f63b..5228bbe 100644
--- a/src/js/components/nippo/new.vue
+++ b/src/js/components/nippo/new.vue
@@ -1,12 +1,8 @@
 <template>
-  <div>
-    <nippo-header></nippo-header>
-
-    <div class="card p-1">
-      <textarea class="form-control" rows="10" v-model="content"></textarea><br />
-      <button @click="createNippo" class="btn btn-primary">登録</button>
-      <router-link :to="{ path: '/' }" class="btn btn-secondary">戻る</router-link>
-    </div>
+  <div class="card p-1">
+    <textarea class="form-control" rows="10" v-model="content"></textarea><br />
+    <button @click="createNippo" class="btn btn-primary">登録</button>
+    <router-link :to="{ path: '/' }" class="btn btn-secondary">戻る</router-link>
   </div>
 </template>
 
@@ -22,9 +18,6 @@ export default {
       content: ''
     }
   },
-  components: {
-    'nippo-header': Header
-  },
   methods: {
     createNippo() {
       axios.post('http://localhost:8000/api/nippoes', { content: this.content }).then((response) => {
diff --git a/src/js/main.js b/src/js/main.js
index 74fcb24..05ac3e6 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,13 +1,14 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './components/app.vue';
+import Index from './components/nippo/index.vue';
 import New from './components/nippo/new.vue';
 import Edit from './components/nippo/edit.vue';
 
 Vue.use(VueRouter);
 
 const routes = [
-  { path: '/', component: App },
+  { path: '/', component: Index},
   { path: '/new', component: New},
   { path: '/:id/edit', name: 'edit', component: Edit},
 ];
@@ -16,4 +17,10 @@ const router = new VueRouter({
   routes
 });
 
-new Vue({router}).$mount('#app');
+new Vue({
+  router,
+  el: '#app',
+  render: (h) => {
+    return h(App)
+  }
+});