From 85e2a7b28c99e6e555f8e96b6c27b5474567992f Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Wed, 18 Feb 2026 22:04:15 +0100
Subject: [PATCH] Add PDF viewer modal with @vue-pdf-viewer

---
 components/IconButton.vue |  8 ++++----
 components/PdfViewer.vue  | 19 +++++++++++++++++++
 layouts/default.vue       |  3 +++
 nuxt.config.ts            | 12 +++++++++++-
 package.json              |  2 ++
 stores/ModalStore.js      |  5 +++--
 6 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 components/PdfViewer.vue

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 950783c..7aa9211 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,17 +2,17 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <NuxtLink v-if="type === 'score' && !newTab" :to="link" class="inline-flex p-1">
+            <button v-if="type === 'score' && !newTab" @click="modalStore.setModalProps('pdf', 'aspect-[8.5/11]', true, '', '', '', link)" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
-            </NuxtLink>
+            </button>
 
             <a v-else-if="type === 'score' && newTab" :href="link" class="inline-flex p-1" target="_blank" rel="noopener noreferrer">
                 <Icon name="ion:book-sharp" style="color: white" />
             </a>
 
-            <NuxtLink v-else-if="type === 'document' && !newTab" class="inline-flex p-1" :to="link">
+            <button v-else-if="type === 'document' && !newTab" @click="modalStore.setModalProps('pdf', 'aspect-[8.5/11]', true, '', '', '', link)" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
-            </NuxtLink>
+            </button>
 
             <a v-else-if="type === 'document' && newTab" :href="link" class="inline-flex p-1" target="_blank" rel="noopener noreferrer">
                 <Icon name="ion:book-sharp" style="color: white" />
diff --git a/components/PdfViewer.vue b/components/PdfViewer.vue
new file mode 100644
index 0000000..92b633d
--- /dev/null
+++ b/components/PdfViewer.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { VPdfViewer } from '@vue-pdf-viewer/viewer'
+import pdfWorker from 'pdfjs-dist/build/pdf.worker?url'
+
+defineProps<{
+  src: string
+}>()
+</script>
+
+<template>
+  <ClientOnly>
+    <VPdfViewer :src="src" :workerUrl="pdfWorker" class="h-[80vh] w-full" />
+    <template #fallback>
+      <div class="flex items-center justify-center h-[80vh]">
+        <p>Loading PDF...</p>
+      </div>
+    </template>
+  </ClientOnly>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
index c1edae5..c133210 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -37,6 +37,9 @@
       <ModalBody :class="modalStore.aspect">
         <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
         <iframe v-if="modalStore.type === 'video'" :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <div v-if="modalStore.type === 'pdf'" class="w-[90vw] max-w-[90vw]">
+          <PdfViewer :src="modalStore.pdfUrl" />
+        </div>
       </ModalBody>
   </Modal>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5c7fa0d..251c637 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -28,5 +28,15 @@ export default defineNuxtConfig({
   },
   experimental: {
     payloadExtraction: true
-  }
+  },
+  vite: {
+    optimizeDeps: {
+      include: ['pdfjs-dist'],
+    },
+    esbuildOptions: {
+      supported: {
+        topLevelAwait: true,
+      },
+    },
+  },
 })
diff --git a/package.json b/package.json
index 83b5e73..8cb2b36 100644
--- a/package.json
+++ b/package.json
@@ -25,10 +25,12 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.11.3",
+    "@vue-pdf-viewer/viewer": "^3.8.0",
     "mongodb": "^7.1.0",
     "nuxt": "^4.3.1",
     "nuxt-swiper": "^1.2.2",
     "nuxt-umami": "^3.2.1",
+    "pdfjs-dist": "^5.4.624",
     "pinia": "^3.0.4",
     "sharp": "^0.34.5"
   }
diff --git a/stores/ModalStore.js b/stores/ModalStore.js
index b883b19..c8ff811 100644
--- a/stores/ModalStore.js
+++ b/stores/ModalStore.js
@@ -1,15 +1,16 @@
 import {defineStore} from "pinia";
 
 export const useModalStore = defineStore("ModalStore", {
-    state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid":""}),
+    state: () => ({ "type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid":"", "pdfUrl":""}),
     actions: {
-        setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid) {
+        setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl = '') {
           this.type = type
           this.aspect = aspect
           this.isOpen = isOpen
           this.bucket = bucket
           this.gallery = gallery
           this.vimeo_trackid = vimeo_trackid
+          this.pdfUrl = pdfUrl
         }
       }
 })
\ No newline at end of file