VuePDF

VuePDF is a Vue 3 component for pdf.js that allows you to flexibly display PDF pages within your project.

npm i @tato30/vue-pdf

yarn add @tato30/vue-pdf

<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf, pages, info } = usePDF('document.pdf')

console.log(`Document has ${pages} pages`)
console.log(`Document info: ${info}`)
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>

• Props
• Events
• Methods
• Slots

This component supports text-selection and annotation-interaction by enabling them with text-layer and annotation-layer props respectively, but for this layers renders correctly is necessary setting css styles, it can be done by importing default styles from @tato30/vue-pdf/style.css.

<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer />
</template>

You can also create your own custom styles and set them in your project, use this examples as guide:

• text-layer styles
• annotation-layer styles

XFA forms also can be supported by enabling them from usePDF.

<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF({
  url: '/example_xfa.pdf',
  enableXfa: true,
})
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>

VuePDF is a client-side library, so if you are working with SSR frameworks like nuxt, surely will throw error during building stage, if that the case, you could wrap library in some "client only" directive or component, also usePDF should be wrapped.

Any idea, suggestion or contribution to the code or documentation are very welcome.

# Clone the repository
git clone https://github.com/TaTo30/VuePDF.git

# Change to code folder
cd VuePDF

# Install node_modules
npm install

# Run code with hot reload
npm run dev