Add & use timeago lib

frontend/pages/notes.vue

@@ -1,51 +1,48 @@
 <template>
     <v-container fluid>
-        <v-row dense
-               align-content="stretch"
-               align="stretch"
-        >
+        <v-row dense align-content="stretch" align="stretch">
             <v-col
                 v-for="(note, index) in notes"
                 :key="index"
-                cols="12" sm="6" md="4" xl="3"
-                class="viewer">
+                cols="12"
+                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 {
-        name: "notes",
-        title: "Notes",
-        components: {
-            Note,
-        },
-        data: () => ({
-            notes: []
-        }),
-        mounted() {
-            this.$axios.get('/notes')
-                .then(e => this.notes = e.data)
-        }
-    }
+export default {
+    name: 'notes',
+    title: 'Notes',
+    components: { Note },
+    data: () => ({
+        notes: [],
+    }),
+    methods: { format },
+    mounted() {
+        this.$axios.get('/notes').then(e => (this.notes = e.data));
+    },
+};
 </script>