Add PDF viewer modal with @vue-pdf-viewer

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" />

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>

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>

nuxt.config.ts

@@ -28,5 +28,15 @@ export default defineNuxtConfig({
   },
   experimental: {
     payloadExtraction: true
-  }
+  },
+  vite: {
+    optimizeDeps: {
+      include: ['pdfjs-dist'],
+    },
+    esbuildOptions: {
+      supported: {
+        topLevelAwait: true,
+      },
+    },
+  },
 })

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"
   }

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
         }
       }
 })