Getting Started with the Kendo UI for Vue PDF Viewer

Updated on Jul 31, 2026

This guide provides essential information about using the Kendo UI for Vue PDF Viewer package. You will learn how to install the PDF Viewer package, add a Vue PDF Viewer component to your project, style the component, and activate your license.

After completing this guide, you will be able to reproduce the following example.

Change Theme

Theme

Loading ...

Before You Begin

sh

npm create vite@latest my-app -- --template vue-ts

This guide requires that you have basic knowledge of Vue and TypeScript, and that you have already created a blank Vue project.

Install the Component

sh

npm i @progress/kendo-vue-pdf-viewer

Importing the Component

After installing the package, import the PDF Viewer component in your Vue App.

In the component file of your Vue project, import the PDFViewer component from the PDF Viewer package.

js

import { PDFViewer } from '@progress/kendo-vue-pdf-viewer';

Using the Component

1. After installing the PDF Viewer package and importing the component, add the PDFViewer tag to the template of your Vue component.

2. Set the url prop to a local PDF file in order to display initial PDF content in the viewer.

   html

   <template>
     <PDFViewer :url="'sample.pdf'" />
   </template>
   
   <script setup>
   import { PDFViewer } from '@progress/kendo-vue-pdf-viewer';
   </script>

3. To style the PDF Viewer, install and import the Default theme, which is one of the three beautiful themes for Kendo UI for Vue.

   3.1. Install the Default theme package.

   sh

   npm i @progress/kendo-theme-default

   3.2. Import the CSS file from the package in your main entry file. Add this import before your existing styles.

   js

   import '@progress/kendo-theme-default/dist/all.css';

4. Build and run the application by typing the following command in the root folder of your project:

   sh

   npm run dev

5. Navigate to http://localhost:5173 to see the Kendo UI for Vue PDF Viewer component on the page.

Activating Your License Key

Using the Kendo UI for Vue PDF Viewer requires a license key to be installed in your project.

Follow the instructions on the Kendo UI for Vue My License page to download and install your license key file. You can skip this step if your application already contains a Kendo UI for Vue license file.

Suggested Links

• PDF Viewer Overview
• Toolbar
• Events
• Custom Rendering