Vue PDF Viewer black friday icon

Black Friday Deal: Get up to 40% OFF 🎉 Expires in 13d 13h 35m 28s Buy Now

Vue PDF Viewer logovue pdf viewer
Try for free

Render PDF Files
in your Vue Project Easily

The Vue PDF Viewer component that you’ll actually enjoy using in any website or Vue
3 application. Simple and fast to integrate

Step 1

Install Vue PDF Viewer library with your favorite package manager

npm install @vue-pdf-viewer/viewer

bun, pnpm and yarn are also supported.

Need a faster set up? Fork a sample project

Step 2

Select a Vue framework and use the Vue PDF component

src/App.vue

Discover more

Fork Sample Project Demo on StackBlitz Read Documentation

Looking to Get Started Even Faster?

Explore carefully prepared examples and demos for the Vue framework of your choice.

An image of the Vue.js logo
An image of the JavaScript icon
Vue 3 Composition API (JS)

Based on Vue 3 Composition API, a JavaScript example project showing how to install and use the Vue PDF Viewer component.

An image of the Vue.js logo
An image of the TypeScript logo
Vue 3 Composition API (TS)

Based on Vue 3 Composition API, a TypeScript example project showing setup and usage of Vue PDF Viewer component.

An image of the Vue.js logo
An image of the JavaScript icon
Vue 3 Options API (JS)

Based on Vue 3 Options API, a JavaScript example project showing installation and usage of Vue PDF Viewer component.

An image of the Vue.js logo
An image of the TypeScript logo
Vue 3 Options API (TS)

Based on Vue 3 Options API, a TypeScript example project showing the installation and usage of the Vue PDF Viewer component.

An image of the Vue.js logo
An image of the TypeScript logo
Vue 3 + SSR (TS)

Based on Vue 3 with SSR support, a TypeScript example project showing how to use the Vue PDF Viewer component in a server-rendered environment.

An image of the Nuxt.js logo
An image of the TypeScript logo
Nuxt 3 (TS, SSR)

Based on Nuxt 3 SSR runtime, a TypeScript example project showing how to integrate the Vue PDF Viewer component.

An image of the VitePress logo
VitePress

Based on VitePress, a TypeScript example project showing how to install and use the Vue PDF Viewer component.

An image of the Ionic logo
An image of the JavaScript icon
Ionic (JS)

Based on Ionic + Vue, a JavaScript example project showing how to install and use the Vue PDF Viewer component in a mobile application.

An image of the Ionic logo
An image of the TypeScript logo
Ionic (TS)

Based on Ionic + Vue, a TypeScript example project showing how to install and use the Vue PDF Viewer component in a mobile application.

An image of the Electron logo
An image of the JavaScript icon
Electron (JS)

Based on Electron + Vue, a JavaScript example project showing how to load and use the Vue PDF Viewer component.

An image of the Electron logo
An image of the TypeScript logo
Electron (TS)

Based on Electron + Vue, a TypeScript example project showing how to load and use the Vue PDF Viewer component.

An image of the Quasar logo
An image of the JavaScript icon
Quasar (JS)

Based on the Quasar Framework, a JavaScript example project showing how to use the Vue PDF Viewer component.

Can’t find one that fits your need?  Request here

What’s Next?

Now that you successfully used the Vue PDF Viewer component, let's explore how to customize and take advantage of other View PDF Viewer features.

Adjust to your branding Customize Toolbar Control your Viewer with Instance API Annotation Plugin