⚡️ (async component) define as much async components as possible

src/components/FluxNote.vue

@@ -1,5 +1,4 @@
-<script lang="ts">
-import HeaderNote from '@/components/HeaderNote.vue'
+<script lang="ts" setup>
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useNote } from '@/hooks/useNote.hook'
@@ -11,7 +10,6 @@ import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
 import {
   computed,
   defineAsyncComponent,
-  defineComponent,
   nextTick,
   onMounted,
   onUnmounted,
@@ -19,25 +17,31 @@ import {
   watch
 } from 'vue'
 
+const HeaderNote = defineAsyncComponent(
+  () => import('@/components/HeaderNote.vue')
+)
+
 const StackedNote = defineAsyncComponent(
   () => import('@/components/StackedNote.vue')
 )
 
-export default defineComponent({
-  name: 'FluxNote',
-  components: {
-    HeaderNote,
-    StackedNote
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true },
-    content: { type: String, required: false, default: null },
-    parseContent: { type: Boolean, required: false, default: true },
-    withContent: { type: Boolean, required: false, default: true },
-    withHeader: { type: Boolean, required: false, default: true }
-  },
-  setup(props) {
+const props = withDefaults(
+  defineProps<{
+    user: string
+    repo: string
+    content?: string | null
+    parseContent?: boolean
+    withContent?: boolean
+    withHeader?: boolean
+  }>(),
+  {
+    content: null,
+    parseContent: true,
+    withContent: true,
+    withHeader: true
+  }
+)
+
 const refProps = toRefs(props)
 const store = useUserRepoStore()
 useUserSettings()
@@ -84,18 +88,7 @@ export default defineComponent({
   resetStackedNotes()
 })
 
-    return {
-      hasContent,
-      isLoading,
-      renderedContent,
-      stackedNotes,
-      resetStackedNotes,
-      userSettings: computed(() => store.userSettings),
-      focus: () => scrollToFocusedNote(undefined, true),
-      titles
-    }
-  }
-})
+const focus = () => scrollToFocusedNote(undefined, true)
 </script>
 
 <template>

src/components/StackedNote.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import LinkedNotes from '@/components/LinkedNotes.vue'
 import { useFile } from '@/hooks/useFile.hook'
 import { useImages } from '@/hooks/useImages.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
@@ -9,7 +8,11 @@ import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { filenameToNoteTitle } from '@/utils/noteTitle'
 import { generateTweets } from '@/utils/twitter'
-import { computed, nextTick, watch } from 'vue'
+import { computed, defineAsyncComponent, nextTick, watch } from 'vue'
+
+const LinkedNotes = defineAsyncComponent(
+  () => import('@/components/LinkedNotes.vue')
+)
 
 const props = defineProps<{
   user: string