vuetify-pdfjs

vuetify-pdfjs

nice but Simple PDF viewer. Needs vuetify@2 and @mdi/js.

This project demonstrates how a simple PDF viewer could be implemented using Vue, Vuetify and PDF.js. This is not a fully-featured PDF document viewer with sophisticated controls, but could serve as the basis for one.

Versions

1.2 : FOR VUE2 ONLY 1.2.3 : Blurred pages corrected
1.2.4 : Correct paginator color
1.2.5 : Update vue version to 2.7.14
1.2.6 : Come back to vue verison 2.6.14

1.3 : FOR VUE3 ONLY 1.3.0 : renewed 1.3.1 : reduce bundle size

Setup for NUXT 3

To install the plugin inside your project :

$ npm install vuetify-pdfjs@1.3.0 and above

$ npm install nuxt (tested with version 3.8.1  [vue version 3.3.8])
$ npm install vuetify-nuxt-module (tested with version 0.6.7)
$ npm install @mdi/js -D (tested with version 7.3.67)
$ npm install sass -D (tested with version 1.69.5)

And, in your nuxt.config.ts file :

export default defineNuxtConfig( {
  ...,
  vite: {
    optimizeDeps: {
      esbuildOptions: {
          target: "esnext",
      },
    },
  },
  ...
})

Create a plugins/vuetifyPdfjs.ts file with this code :

import VuetifyPdfJs from 'vuetify-pdfjs/src/VuetifyPdfJs.vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VuetifyPdfJs', VuetifyPdfJs)
})

Then, copy this code where you want inside you project (nested in v-app component) :

<template>
  <v-app>
    ...
    <VuetifyPdfJs :url="url" thumbnailColor="#DEDEDE" backgroundColor="#DEDEDE" previewColor="#999999"/>
    ... 
  </v-app>
</template>

<script>
export default {
  data: () => ({
    url:'https://cors-anywhere.herokuapp.com/YourUrl.pdf'
  })
}
</script>