start add Memos

resources/js/views/Memo/MemoIndex.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <div class="flex-between flex-center mb-1">
+            <a href="#" @click="$router.back()" class="link">
+                < Back
+            </a>
+            <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
+        </div>
+        <div v-if="loading">> Loading...</div>
+        <div v-else>
+            <div v-if="memos.lenght === 0">
+                <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
+            </div>
+            <div v-for="memo in memos">
+                <router-link :to="'/memos/' + memo.data.memo_id" class="link-large relative flex-center p-2">
+                    <h1>{{ memo.data.name }}</h1>
+                    <div class="memo-date">{{ memo.data.last_updated }}</div>
+                </router-link>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "MemoIndex",
+        data: function () {
+            return {
+                loading: true,
+                memos: null,
+            }
+        },
+        mounted() {
+            axios.get('/api/memos')
+                .then(response => {
+                    this.memos = response.data.data
+                    this.loading = false
+                })
+                .catch(error => {
+                    this.loading = false
+                    alert('Unable to fetch memos.')
+                })
+        }
+    }
+</script>