Update..

frontend/pages/notes/_uuid.vue

@@ -6,6 +6,8 @@
             <TagsGroup :tags="note.tags" />
         </v-card-title>
         <v-card-text>
+            <!-- html is sanitized -->
+            <!-- eslint-disable-next-line -->
             <div v-html="renderedMarkdown"></div>
         </v-card-text>
     </v-card>
@@ -23,8 +25,9 @@ export default {
     }),
     computed: {
         renderedMarkdown() {
-            if (!this.note.chapters) return ''
-            return renderMarkdown(this.note.chapters[0].content).contents
+            return !this.note.content
+                ? ''
+                : renderMarkdown(this.note.content).contents
         },
     },
     mounted() {

frontend/pages/notes/index.vue

@@ -1,13 +1,16 @@
 <template>
     <div>
         <v-progress-circular
-            v-if="loading && notes.length === 0"
+            v-if="!isInitialized"
             :size="100"
             :width="7"
             color="purple"
             indeterminate
         ></v-progress-circular>
-        <v-row>
+        <v-card v-if="isEmpty">
+            <v-card-text>No notes yet :/</v-card-text>
+        </v-card>
+        <v-row v-else>
             <v-col
                 v-for="note in notes"
                 :key="note.uuid"
@@ -28,7 +31,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters, mapActions } from 'vuex'
 
 export default {
     name: 'Notes',
@@ -36,10 +39,14 @@ export default {
         loading: true,
     }),
     computed: {
-        ...mapState('notes', { notes: (state) => state.notes }),
+        ...mapState('notes', ['notes', 'isInitialized']),
+        ...mapGetters('notes', ['isEmpty']),
     },
     mounted() {
-        this.$store.dispatch('notes/load').then(() => (this.loading = false))
+        if (!this.initialized) this.load()
+    },
+    methods: {
+        ...mapActions('notes', ['load']),
     },
     head: () => ({
         title: 'My notes',