done

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^0.16.1",
     "firebase": "^4.0.0",
+    "router": "^1.3.2",
     "vue": "^2.3.3",
     "vue-material": "^0.7.1",
     "vue-router": "^2.3.1",

src/App.vue

@@ -37,15 +37,15 @@
 </template>
 
 <script>
-export {
-  name: 'app'
+export default{
+  name: 'app',
   methods: {
-    toggleSideNavLeft(route) {
-      if (typeof (route) == 'object') {
+    toggleSideNavLeft (route) {
+      if (typeof (route) === 'object') {
         this.$refs.leftSidenav.toggle()
       } else {
         this.$refs.leftSidenav.toggle()
-        this.router.push(route)
+        this.$router.push(route)
       }
     }
   }

src/components/Detail.vue

@@ -23,9 +23,9 @@ export default {
     return {
       cat: {
         asObject: true,
-        source: this.$db.ref('cats').child(this.id),
+        source: this.$db.ref('cats').child(this.id)
       }
-    },
+    }
   }
 }
 </script>

src/components/Home.vue

@@ -1,17 +1,17 @@
 <template lang="html">
   <div id="home">
     <h1>Home</h1>
-    <md-card v-for="cat in latestCats" :key="cat['.key']">
+    <md-card v-for="cat in cats.slice().reverse()" v-bind:key="cat['.key']">
       <md-card-media>
-        <img src="cat.url" :alt="cat.comment">
+        <img :src="cat.url" :alt="cat.comment">
       </md-card-media>
 
       <md-card-header>
         <div class="md-title">{{ cat.comment }}</div>
       </md-card-header>
 
       <md-card-actions>
-        <router-link to="'/detail/'+cat['.key']">
+        <router-link :to="'/detail/'+cat['.key']">
           <md-button>Details</md-button>
         </router-link>
       </md-card-actions>
@@ -22,12 +22,13 @@
 <script>
 export default {
   firebase () {
-    {
-      cats: this.$db.ref('cats');
+    return {
+      cats: this.$db.ref('cats')
     }
   },
   computed: {
-    latestCats: {
+    latestCats: function () {
+      console.log(this.cats)
       this.cats.reverse()
     }
   }

src/components/Post.vue

@@ -43,28 +43,29 @@ export default {
         detail: ''
       },
       loading: true,
-      err: false,
+      err: false
     }
   },
   methods: {
-    getCat() {
-      this.$http.get('http://random.cat/meow')
+    getCat () {
+      this.$http.get('https://yesno.wtf/api')
         .then((response) => {
-          this.randomCat.url = response.data.file
+          console.log(response)
+          this.randomCat.url = response.data.image
           setTimeout(() => { this.loading = false }, 1000)
         })
         .catch((err) => {
           this.err = err
         })
     },
-    postCat() {
+    postCat () {
       console.log('postCat ', this.randomCat)
       this.$db.ref('cats').push(this.randomCat, () => {
-        this.$router.push('/');
+        this.$router.push('/')
       })
     }
   },
-  mounted: {
+  mounted: function () {
     this.getCat()
   }
 }

src/components/firebase.js

@@ -0,0 +1,15 @@
+import { initializeApp } from 'firebase'
+
+const app = initializeApp({
+  apiKey: `AIzaSyCJP2lXoXb1eUxXK0Wh81T1DLbDmZN7jZY`,
+  authDomain: `eksa-projects.firebaseapp.com`,
+  databaseURL: `https://eksa-projects.firebaseio.com`,
+  projectId: `eksa-projects`,
+  storageBucket: ``,
+  messagingSenderId: `677299954434`
+})
+
+export const db = app.database()
+export const roomRefs = db.ref('rooms')
+export const charRefs = db.ref('characters')
+export const userRefs = db.ref('users')

src/main.js

@@ -4,7 +4,7 @@ import Vue from 'vue'
 import VueFire from 'vuefire'
 import axios from 'axios'
 import App from './App'
-import router from 'router'
+import router from './router'
 import VueMaterial from 'vue-material'
 import 'vue-material/dist/vue-material.css'
 import firebase from 'firebase'