Display published blogs > slugs filter moment mapState fetch

pages/blogs/_slug.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>I AM DETAIL PAGE</h1>
+</template>

pages/blogs.vue

@@ -5,26 +5,17 @@
         <div class="columns is-mobile">
           <!-- posts -->
           <div class="column is-8">
-            <!-- blog -->
-            <div class="section">
-              <div class="post">
-                <div @click="() => {}" class="post-header clickable">
-                  <h4 class="title is-4">Some Blog Title</h4>
-                  <h5 class="subtitle is-5">Some Blog Subtitle</h5>
-                </div>
-                <div class="post-content">
-                  by Filip Jerga, Jul 1
-                </div>
-              </div>
-            </div>
-            <div class="section">
+            <div 
+              v-for="blog in publishedBlogs"
+              :key="blog._id"
+              class="section">
               <div class="post">
-                <div @click="() => {}" class="post-header clickable">
-                  <h4 class="title is-4">Some Blog Title</h4>
-                  <h5 class="subtitle is-5">Some Blog Subtitle</h5>
+                <div @click="$router.push(`/blogs/${blog.slug}`)" class="post-header clickable">
+                  <h4 class="title is-4">{{blog.title}}</h4>
+                  <h5 class="subtitle is-5">{{blog.subtitle}}</h5>
                 </div>
                 <div class="post-content">
-                  by Filip Jerga, Jul 1
+                   by {{blog.author.name}}, {{blog.createdAt | formatDate}}
                 </div>
               </div>
             </div>
@@ -59,7 +50,13 @@
   </div>
 </template>
 <script>
+import { mapState } from 'vuex';
 export default {
+  computed: {
+    ...mapState({
+      publishedBlogs: state => state.blog.items.all
+    })
+  },
   async fetch({store}) {
     await store.dispatch('blog/fetchBlogs')
   }