Make reference a link

components/content/ReferencesList.vue

 <template>
   <ProseOl v-if="computedItems.length > 0">
-    <ProseLi v-for="item in computedItems" :key="item.DOI" class="refArticle">
-      <div class="ref-title">{{ item.title }}.</div>
-      <div class="ref-authors">{{ item.authorsString }}</div>
-      <div>{{ item?.containerTitle }}</div>
-    </ProseLi>
+    <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>
 </template>
 
@@ -15,6 +22,7 @@ const props = defineProps<{
   items: string[];
 }>();
 
+const doiBaseUrl = ref(new URL("https://doi.org/"));
 const fetchedDoi = ref(
   await Promise.all(
     props.items.map(async (doi) => {
@@ -53,6 +61,7 @@ const computedItems = computed(() => {
         authorsString: toAuthorsString(doi?.message?.author ?? []),
         containerTitle: cts?.length > 0 ? cts[0] : ct?.length > 0 ? ct[0] : "",
         abstract,
+        href: getReferenceUrl(DOI),
       };
     } else {
       return {};
@@ -67,6 +76,10 @@ function toAuthorsString(authors: Array<{ family: string; given: string }>) {
     })
     .join(", ");
 }
+
+function getReferenceUrl(doi) {
+  return new URL(doi, doiBaseUrl.value).href;
+}
 </script>
 
 <style lang="ts">