Add & use timeago lib

frontend/components/Note.vue

@@ -14,9 +14,9 @@
             </div>
         </div>
 
-        <div class="mt-auto" v-if="!!updatedAt">
+        <div class="mt-auto" v-if="updatedAt">
             <v-divider/>
-            <v-card-subtitle>{{ updatedAt }}</v-card-subtitle>
+            <v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
         </div>
     </v-card>
 </template>
@@ -41,7 +41,7 @@
                 default: null,
             },
         },
-    };
+    }
 </script>
 
 <style>

frontend/pages/notes.vue

@@ -1,51 +1,48 @@
 <template>
     <v-container fluid>
-        <v-row dense
+        <v-row dense align-content="stretch" align="stretch">
-               align-content="stretch"
-               align="stretch"
-        >
             <v-col
                 v-for="(note, index) in notes"
                 :key="index"
-                cols="12" sm="6" md="4" xl="3"
+                cols="12"
-                class="viewer">
+                sm="6"
+                md="4"
+                xl="3"
+                class="viewer"
+            >
                 <v-hover v-slot:default="{ hover }">
                     <Note
                         :hover="hover"
                         :title="note.title"
                         :tags="note.tags"
-                        :updated-at="note.updatedAt"
+                        :updated-at="format(note.updatedAt)"
                     >
                         {{ note.content }}
                     </Note>
                 </v-hover>
             </v-col>
-
         </v-row>
 
         <v-btn to="/create" fab fixed bottom right large color="accent">
             <v-icon>mdi-plus</v-icon>
         </v-btn>
-
     </v-container>
-
 </template>
 
 <script>
-    import Note from '@/components/Note'
+import Note from '@/components/Note';
+import { format } from 'timeago.js';
 
-    export default {
+export default {
-        name: "notes",
+    name: 'notes',
-        title: "Notes",
+    title: 'Notes',
-        components: {
+    components: { Note },
-            Note,
-        },
     data: () => ({
-            notes: []
+        notes: [],
     }),
+    methods: { format },
     mounted() {
-            this.$axios.get('/notes')
+        this.$axios.get('/notes').then(e => (this.notes = e.data));
-                .then(e => this.notes = e.data)
+    },
-        }
+};
-    }
 </script>

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "timeago.js": "^4.0.2"
+  }
+}

yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+timeago.js@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
+  integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==