Set markdown renderer as client only to fix hydration issues. Will later try to improve it and set it back as normal

components/explorer/PreviewContent.vue

@@ -54,9 +54,9 @@ async function fetch()
     fetched.value = true;
     pending.value = true;
 
-    const { data } = await useFetch(`/api/project/${props.project}/file/${encodeURIComponent(props.path)}`);
+    const data = await $fetch(`/api/project/${props.project}/file/${encodeURIComponent(props.path)}`);
 
     pending.value = false;
-    file.value = data.value;
+    file.value = data;
 }
 </script>

components/prose/ProseA.vue

@@ -48,6 +48,7 @@ const { data, status, execute } = await useFetch(`/api/project/${project.value}/
     key: key.value,
     ignoreResponseError: true,
     immediate: false,
+    server: false,
     dedupe: 'defer'
 });
 

components/prose/ProseTag.vue

@@ -1,8 +1,8 @@
 <template>
-    <HoverPopup class="mw-[400px]">
+    <HoverPopup class="mw-[400px]" @before-show="fetch">
         <template #content>
             <Suspense>
-                <div v-if="status === 'pending'" class="loading w-[400px] h-[150px]"></div>
+                <div v-if="fetched === false" class="loading w-[400px] h-[150px]"></div>
                 <template v-else-if="!!data">
                     <div v-if="data.description" class="pb-4 pt-3 px-8">
                         <span class="text-2xl font-semibold">#{{ data.tag }}</span>
@@ -28,6 +28,8 @@
 </template>
 
 <script setup lang="ts">
+import type { Tag } from '~/types/api';
+
 const { tag } = defineProps({
     tag: {
         type: String,
@@ -35,7 +37,15 @@ const { tag } = defineProps({
     }
 });
 
+const data = ref<Tag>(), fetched = ref(false);
 const route = useRoute();
 const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
-const { data, status } = useLazyFetch(`/api/project/${project.value}/tags/${tag}`);
+async function fetch()
+{
+    if(fetched.value)
+        return;
+
+    data.value = await $fetch(`/api/project/${project.value}/tags/${encodeURIComponent(tag)}`);
+    fetched.value = true;
+}
 </script>

components/standard/HoverPopup.vue

@@ -1,6 +1,6 @@
 <template>
-    <Teleport to="#teleports" v-if="display">
-        <div :class="$attrs.class" class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :style="pos"
+    <Teleport to="#teleports">
+        <div v-show="display" :class="$attrs.class" class="absolute border-2 border-light-35 dark:border-dark-35 max-w-[550px] max-h-[450px] bg-light-0 dark:bg-dark-0 text-light-100 dark:text-dark-100" :style="pos"
             @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => { emit('beforeHide'); display = false }, 250)">
             <slot name="content"></slot>
         </div>

components/standard/Markdown.vue

@@ -1,7 +1,7 @@
 <template>
   <template
     v-if="content && content.length > 0">
-    <Suspense>
+    <Suspense :timeout="0">
       <MarkdownRenderer #default :key="key" v-if="node" :node="node"></MarkdownRenderer>
       <template #fallback><div class="loading"></div></template>
     </Suspense>