useFetch -> server :false

components/content/ArticleDoi.vue

@@ -22,41 +22,39 @@ const articleAbstract = computed(() => { return props.abstract ?? article.value?
 
 </script>
 <template>
-    <ClientOnly>
-        <v-list-item :href="article?.href" :target="article?.target" density="compact" class="px-1">
-            <template #prepend v-if="!mobile && enumerate">
-                <v-avatar color="primary" size="small" density="compact" variant="tonal">
-                    {{ props.index }}
-                </v-avatar>
-            </template>
-            <!-- <template #append v-if="!mobile">
+    <v-list-item :href="article?.href" :target="article?.target" density="compact" class="px-1">
+        <template #prepend v-if="!mobile && enumerate">
+            <v-avatar color="primary" size="small" density="compact" variant="tonal">
+                {{ props.index }}
+            </v-avatar>
+        </template>
+        <!-- <template #append v-if="!mobile">
             <v-avatar>
                 <v-icon>{{ article?.prependIcon }}</v-icon>
             </v-avatar>
         </template> -->
-            <v-card flat color="transparent" density="compact" class="my-0">
-                <v-card-item density="compact" :class="mobile ? 'px-0' : null">
-                    <v-card-title><span class="text-subtitle-1 font-weight-bold">{{ articleTitle
-                    }}</span></v-card-title>
-                    <v-card-subtitle> {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
-                    <v-card-subtitle> {{ article?.containerTitle ?? "no containerTitle" }} ({{ article?.year
-                    }})</v-card-subtitle>
-                </v-card-item>
-                <v-card-item density="compact" :class="mobile ? 'px-0' : null">
-                    <v-btn v-if="articleAbstract" size="x-small" variant="outlined"
-                        :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-                        @click.stop.prevent="show = !show">Abstract</v-btn>
-                </v-card-item>
-                <v-expand-transition>
-                    <v-card v-show="show" flat color="transparent">
-                        <v-card-text>
-                            {{ articleAbstract }}
-                        </v-card-text>
-                    </v-card>
+        <v-card flat color="transparent" density="compact" class="my-0">
+            <v-card-item density="compact" :class="mobile ? 'px-0' : null">
+                <v-card-title><span class="text-subtitle-1 font-weight-bold">{{ articleTitle
+                }}</span></v-card-title>
+                <v-card-subtitle> {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
+                <v-card-subtitle> {{ article?.containerTitle ?? "no containerTitle" }} ({{ article?.year
+                }})</v-card-subtitle>
+            </v-card-item>
+            <v-card-item density="compact" :class="mobile ? 'px-0' : null">
+                <v-btn v-if="articleAbstract" size="x-small" variant="outlined"
+                    :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                    @click.stop.prevent="show = !show">Abstract</v-btn>
+            </v-card-item>
+            <v-expand-transition>
+                <v-card v-show="show" flat color="transparent">
+                    <v-card-text>
+                        {{ articleAbstract }}
+                    </v-card-text>
+                </v-card>
 
-                </v-expand-transition>
-            </v-card>
-        </v-list-item>
-        <v-divider v-if="props.divider" inset></v-divider>
-    </ClientOnly>
+            </v-expand-transition>
+        </v-card>
+    </v-list-item>
+    <v-divider v-if="props.divider" inset></v-divider>
 </template>
\ No newline at end of file

composables/useFetchArticle.ts

@@ -42,6 +42,7 @@ export function useFetchArticle(doi: string) {
         console.log("dans watch effect")
         article.value = null
         const { data, pending: pendingUseFetch, error, refresh } = await useFetch<RawArticle>(toValue(url), {
+            lazy: true, server: false,
         })
         console.log(data)
         if (data.value?.message) {