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

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>