✨ configure VPV to work with ssr

Author: kittisakLS

src/App.vue

@@ -1,31 +1,58 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
+  import ClientOnly from './components/ClientOnly.vue';
+  import type { ToolbarOptions } from '@vue-pdf-viewer/viewer';
+  import { defineAsyncComponent, watch, h, ref } from 'vue';
+  
+  const toolbarOptions: Partial<ToolbarOptions> | false = false
+
+  const VPdfViewerComp = defineAsyncComponent(async () => {
+    if (import.meta.env.SSR) return Promise.resolve(h('div', 'Loading...'))
+    const module = await import('./components/PdfViewer.vue');
+    return module.default;
+  })
 </script>
 
 <template>
   <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+    <h1>VPV Starter Toolkit: Vue + SSR + TypeScript</h1>
+    <br />
+    <h2>Default Toolbar</h2>
+    <div>
+      <ClientOnly class="pdf-viewer-wrapper">
+        <VPdfViewerComp
+          src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
+      </ClientOnly>
+    </div>
+    <h2>Without Toolbar</h2>
+    <div>
+      <ClientOnly class="pdf-viewer-wrapper no-toolbar">
+        <VPdfViewerComp src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+          :toolbar-options="toolbarOptions" />
+      </ClientOnly>
+    </div>
+    <h2>Mobile</h2>
+    <div>
+      <ClientOnly class="pdf-viewer-wrapper-mobile">
+        <VPdfViewerComp
+          src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
+      </ClientOnly>
+    </div>
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
+  .pdf-viewer-wrapper {
+    width: 1028px;
+    height: 700px;
+    margin: 0 auto;
+  }
+
+  .pdf-viewer-wrapper-mobile {
+    width: 468px;
+    height: 700px;
+    margin: 0 auto;
+  }
+  .no-toolbar :deep(.vpv-variables) {
+    --vpv-toolbar-size: 0px;
+  }
 </style>

src/components/ClientOnly.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+const isMounted = ref(false);
+
+onMounted(() => {
+  isMounted.value = true;
+});
+
+</script>
+
+<template>
+  <div v-if="isMounted">
+    <slot></slot>
+  </div>
+</template>

src/components/PdfViewer.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { VPdfViewer } from '@vue-pdf-viewer/viewer';
+</script>
+<template>
+  <VPdfViewer
+    v-bind="$attrs"
+    src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
+</template>

vite.config.ts

@@ -3,5 +3,8 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+  ssr: {
+    noExternal: ['@vue-pdf-viewer/viewer', 'pdfjs-dist']
+  },
 })