From c87deaeef3e4b595d1eab355b8d7174ab4ba9138 Mon Sep 17 00:00:00 2001
From: Remi PLANEL <rplanel@pasteur.fr>
Date: Thu, 16 Feb 2023 14:39:51 +0100
Subject: [PATCH] Make references list client only to avoid hydration node
mismatch
---
components/content/ReferencesList.vue | 30 ++++++++++++++-------------
1 file changed, 16 insertions(+), 14 deletions(-)
diff --git a/components/content/ReferencesList.vue b/components/content/ReferencesList.vue
index d36b9b11..f72d87d5 100644
--- a/components/content/ReferencesList.vue
+++ b/components/content/ReferencesList.vue
@@ -1,18 +1,20 @@
<template>
- <ProseOl v-if="computedItems.length > 0">
- <ProseA
- v-for="item in computedItems"
- :key="item.DOI"
- :href="item.href"
- target="blank"
- >
- <ProseLi class="refArticle">
- <div class="ref-title">{{ item.title }}.</div>
- <div class="ref-authors">{{ item.authorsString }}</div>
- <div>{{ item?.containerTitle }}</div>
- </ProseLi>
- </ProseA>
- </ProseOl>
+ <ClientOnly fallback-tag="span" fallback="Loading references...">
+ <ProseOl v-if="computedItems.length > 0">
+ <ProseA
+ v-for="item in computedItems"
+ :key="item.DOI"
+ :href="item.href"
+ target="blank"
+ >
+ <ProseLi class="refArticle">
+ <div class="ref-title">{{ item.title }}.</div>
+ <div class="ref-authors">{{ item.authorsString }}</div>
+ <div>{{ item?.containerTitle }}</div>
+ </ProseLi>
+ </ProseA>
+ </ProseOl>
+ </ClientOnly>
</template>
<script setup lang="ts">
--
GitLab