Add client only for articleDOI component

components/content/ArticleDoi.vue

@@ -22,39 +22,41 @@ const articleAbstract = computed(() => { return props.abstract ?? article.value?
 
 </script>
 <template>
-    <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">
+    <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-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>
+                </v-expand-transition>
+            </v-card>
+        </v-list-item>
+        <v-divider v-if="props.divider" inset></v-divider>
+    </ClientOnly>
 </template>
\ No newline at end of file