vue-pdfz

vue-pdfz

A customizable, i18n-ready, SSR-safe PDF viewer for Vue

Features

• 📖 Continuous, single- and two-page layouts
• 📝 Text search, links, annotations and forms
• 🔒 Password-protected files
• 🖨️ Print and download
• 🌍 9 built-in locales, RTL and optional vue-i18n integration
• 🎨 Light and dark themes, design tokens and slots for custom UI
• ⌨️ Keyboard shortcuts and ARIA labels
• ⚡ Lazy rendering and optional virtualization
• 🧩 Typed API, SSR-safe, with Nuxt support

Installation

npm install vue-pdfz

Usage

<script setup>
import { PdfViewer } from 'vue-pdfz'
import 'vue-pdfz/style.css'
</script>

<template>
  <PdfViewer source="/document.pdf" style="height: 600px" />
</template>

Props

Events

Slots

Exposed Methods

const viewer = ref<InstanceType<typeof PdfViewer>>()
viewer.value?.goToPage(1)
viewer.value?.nextPage()
viewer.value?.prevPage()
viewer.value?.setZoom(1)
viewer.value?.zoomIn()
viewer.value?.zoomOut()
viewer.value?.rotate('cw')
const result = await viewer.value?.search('foo')
viewer.value?.nextMatch()
viewer.value?.prevMatch()
viewer.value?.clearSearch()
await viewer.value?.print()
await viewer.value?.download()

Internationalization

Resolution order for any string: vue-i18n adapter (if installed) → per-component messages → plugin messages → built-in bundle for locale → en fallback.

Override individual strings

<PdfViewer :messages="{ download: 'Save' }" />

Add a locale

import { en, type LocaleMessages } from 'vue-pdfz'

const it: LocaleMessages = { ...en, nextPage: 'Pagina successiva' /* ... */ }

// Per instance:
// <PdfViewer locale="it" :messages="it" />

// Or app-wide via the plugin:
// app.use(VuePdfz, { locale: 'it', messages: { it } })

Add an optional vue-i18n adapter

With an adapter to a host vue-i18n instance, keys resolve as ${prefix}${key} (the default prefix is vuePdfz.), with unresolved keys falling back to the built-in bundle.

import { createI18n } from 'vue-i18n'
import VuePdfz, { createVueI18nAdapter } from 'vue-pdfz'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      vuePdfz: {
        download: 'Export',
      },
    },
  },
})

app.use(i18n).use(VuePdfz, { i18nAdapter: createVueI18nAdapter(i18n.global) })

License

MIT