Refactor: Split components

frontend/pages/notes/_uuid.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ note.title }}
+            <v-spacer />
+            <TagsGroup :tags="note.tags" />
+        </v-card-title>
+        <v-card-text>
+            <div v-html="renderedMarkdown"></div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+import TagsGroup from '@/components/TagsGroup'
+import renderMarkdown from '@/utils/markdown'
+
+export default {
+    name: 'Note',
+    components: {
+        TagsGroup,
+    },
+    data: () => ({
+        note: {
+            tags: [],
+        },
+    }),
+    computed: {
+        renderedMarkdown() {
+            if (!this.note.chapters) return ''
+            return renderMarkdown(this.note.chapters[0].content).contents
+        },
+    },
+    mounted() {
+        this.$axios
+            .$get(`/notes/${this.$route.params.uuid}`)
+            .then((note) => (this.note = note))
+    },
+}
+</script>

frontend/pages/notes/index.vue

@@ -16,7 +16,8 @@
                 lg="4"
                 xl="3"
             >
-                <Note
+                <NoteCard
+                    :uuid="note.uuid"
                     :title="note.title"
                     :updated-at="note.updatedAt"
                     :tags="note.tags"
@@ -28,11 +29,11 @@
 
 <script>
 import { mapState } from 'vuex'
-import Note from '@/components/Note.vue'
+import NoteCard from '@/components/NoteCard.vue'
 
 export default {
     name: 'Notes',
-    components: { Note },
+    components: { NoteCard },
     data: () => ({
         loading: true,
     }),