Get/Send Barks to Firebase thanks to Brian, also added some flexbox, …

src/App.vue

@@ -1,13 +1,19 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link> |
-      <router-link to="/login" v-if="!authenticated">Log in</router-link>
-      <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')">Log out</a>
-    </div>
-    <router-view/>
+      <div class="col-md-3" > 
+          <div id="nav">
+            <router-link to="/">Home</router-link> |
+            <router-link to="/about">About</router-link> |
+            <router-link to="/login" v-if="!authenticated">Log in</router-link>
+            <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')">Log out</a>
+          </div>
+      </div>
+      <div class="col-md-9">
+          <router-view/>
+      </div>
   </div>
+
+
 </template>
 
 <script>
@@ -16,7 +22,6 @@ import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 Vue.use(BootstrapVue)
 Vue.use(IconsPlugin)
 
-import addBark from './components/addBark.vue';
 
 export default {
   name: 'app',
@@ -42,6 +47,8 @@ export default {
 }
 #nav {
   padding: 30px;
+  display:flex;
+  flex-direction: column;
   a {
     font-weight: bold;
     color: #2c3e50;

src/views/Home.vue

@@ -1,21 +1,96 @@
 <template>
-  <div class="home">
-    <img alt="Bark Logo" src="../assets/dog.png" width="200px">
-    <add-bark> </add-bark>
-  </div>
+    <div class="motherfont">
+        <h2>Compose a Bark</h2>
+
+         <img alt="Bark Logo" src="../assets/dog.png" width="200px">
+
+        <form v-if="!submitted">
+            <input type="text" placeholder="Write your Bark here..." v-model.lazy="bark.content" required />
+            <button @click.prevent="post" once>Add Bark</button>
+        </form>
+        <div v-if="submitted">
+            <h3>Thanks for adding your post</h3>
+        </div>
+        <div>
+                 <ul>
+                 <li v-for="(bark, index) in allBarks" :key=index>
+                    {{ bark.content }} by {{ bark.user.displayName }}
+                </li>
+                </ul>
+        </div>
+    </div>
 </template>
 
 <script>
+// Imports
+export default {
+    data () {
+        return {
+            bark: {
+                content: '',
+            },
+            allBarks: [],
+            submitted: false
+        }
+    },
+    methods: {
+    post(){
+
+        let newBark = {
+          user: this.$store.state.user, // object with: { uid, displayName, photoURL, email, phoneNumber }
+          content:this.bark.content,
+          createdAt: new Date()
+        };
 
-import addBark from '@/components/addBark.vue';
+        db.collection('barks').add(newBark)
+        this.content=null;
 
-export default {
-  name: 'home',
-  components: {
-    'add-bark':addBark
-  },
-  mounted() {
-    // console.log(db);
-  }
+
+        this.allBarks.unshift(newBark);
+        // Update the list
+        //this.display();
+    },
+        getBarks(){
+            db.collection("barks").get().then(querySnapshot => {
+            querySnapshot.forEach(doc => {
+                // doc.data() is never undefined for query doc snapshots
+                console.log(doc.id, " => ", doc.data());
+                this.allBarks.push(doc.data())
+            });
+        });
+
+        }
+    },
+    mounted(){
+        this.getBarks();
+
+
+    }
 }
+
+    //     post: function(){
+    //         this.$http.post('https://dmd4470-50f92.firebaseio.com/tweets.json',this.bark).then(function(data){
+    //             console.log(data);
+    //             this.submitted = true;
+    //         });
+    //     }
+    // }
 </script>
+
+<style scoped>
+#add-blog *{
+    box-sizing: border-box;
+}
+#add-blog{
+    margin: 20px auto;
+    max-width: 500px;
+}
+label{
+    display: block;
+    margin: 20px 0 10px;
+}
+input[type="text"], textarea{
+    display: block;
+    width: 100%;
+    padding: 8px;
+}