> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/libraries-and-frameworks/vue.md).

# Build a Vue PDF viewer with Apryse WebViewer SDK

Create a Vue PDF viewer and editor with Apryse WebViewer. Learn how to integrate the SDK into your Vue.js apps and render PDFs in the viewer UI.

This guide shows how to build a Vue PDF viewer using the Apryse [WebViewer SDK](/web/what-is-webviewer/overview.md). You'll learn how to integrate the SDK into a [Vue.js](https://vuejs.org/) application to render, view, and interact with PDF documents using the WebViewer UI.

You can also download a ready-to-use [GitHub sample](https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-vue) to get started quickly, or explore the interactive [Showcase demo](https://showcase.apryse.com/) to see WebViewer's full capabilities in action.

## Prerequisites

This guide assumes basic familiarity with Vue.js development. Before you start:

* Install [Node.js](https://nodejs.org/en/download) and npm. See the [Vue.js documentation](https://vuejs.org/guide/quick-start.html#creating-a-vue-application) for version details.
* Install [Visual Studio Code](https://code.visualstudio.com/Download) or another code editor to develop and debug your code.
* Get your Apryse trial key.

{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %}

## 1. Create a Vue project

In this section, you’ll create a new Vue.js application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have a Vue app, skip this and continue to [Install WebViewer](#2-install-webviewer).

1. In your terminal, go to the directory where you want to create the project.
2. Create a new `webviewer-vue` Vue 3 project using the official Vue tooling and a minimal setup:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes create-vue@latest webviewer-vue --bare
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Info**

Flags are used to skip prompts during project configuration. The setup skips all example code and starts with a blank Vue project. Select different options if preferred.
{% endhint %}

3. Complete the setup prompts with the following settings. Select different options if preferred:

* Don't use TypeScript.
* Don't select any additional Vue or experimental features.

4. Navigate to your new Vue project directory and install Vue dependencies:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
cd webviewer-vue
npm install
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 2. Install WebViewer

Next, install the Apryse WebViewer SDK using npm. This command adds the [WebViewer package](https://www.npmjs.com/package/@pdftron/webviewer) to your project, allowing you to integrate the PDF viewer and editor into your Vue application.

After navigating to your `webviewer-vue` project directory, run the following command to install WebViewer:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm i @pdftron/webviewer
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 3. Copy WebViewer assets

WebViewer needs access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. In a Vue project, you must copy these assets into the `public` directory so they can be served correctly. For more, see [Copying WebViewer static assets](/web/get-started/copy-assets.md).

1. From your project root, create the `public/lib/webviewer` directory if it doesn't already exist:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes shx mkdir -p public/lib/webviewer
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. Copy all WebViewer static assets from `node_modules/@pdftron/webviewer/public` into the new `public/lib/webviewer` directory:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes cpy-cli "node_modules/@pdftron/webviewer/public/**/*" public/lib/webviewer
```

{% endcode %}
{% endtab %}
{% endtabs %}

Your project should now include a similar structure:

{% code lineNumbers="true" %}

```
webviewer-vue/
├── .vscode/
├── node_modules/
├── public/
│   ├── lib/
│   │   └── webviewer/
│   │       ├── core/
│   │       ├── ui/
│   │       └── ...
│   └── favicon.ico
├── src/
└── .gitignore
└── ...
```

{% endcode %}

{% hint style="info" %}
**Info**

The `path` option used when initializing WebViewer must point to this directory (for example, `/lib/webviewer`). If the path is incorrect, WebViewer will fail to load.
{% endhint %}

## 4. Create the PDF viewer

In this section, you'll add WebViewer to your Vue app by creating a component and initializing the viewer. This mounts the WebViewer UI and loads a document in your application.

1. Create a `components` folder in your project's `src` directory:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes mkdirp src/components
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. Create a `WebViewer.vue` file in the `components` folder:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes shx touch src/components/WebViewer.vue
```

{% endcode %}
{% endtab %}
{% endtabs %}

3. In Visual Studio Code, add this code to the `WebViewer.vue` file and save:

<pre class="language-vue" data-line-numbers><code class="lang-vue">&#x3C;template>
  &#x3C;!-- Container element where WebViewer will be mounted -->
  &#x3C;div ref="viewer" style="height: 100vh; width: 100%; margin: 0 auto;">&#x3C;/div>
&#x3C;/template>

&#x3C;script setup>
import { ref, onMounted } from 'vue';
import WebViewer from '@pdftron/webviewer';

// Define component props
const props = defineProps({
  initialDoc: String,
});

// Reference to DOM element used as the WebViewer mount point
const viewer = ref(null);

/**
 * Initialize WebViewer once the component is mounted
 * and the DOM element is available
 */
onMounted(() => {
  WebViewer(
    { 
      // Public path where the WebViewer lib assets are served
      path: '/lib/webviewer',
      // Document to load initially (passed in from App.vue)
      initialDoc: props.initialDoc,
      // Replace with your Apryse license key
      licenseKey: '<code class="expression">visitor.claims.wvKey || "YOUR_LICENSE_KEY"</code>',
    },
    viewer.value,
  );
});
&#x3C;/script>
</code></pre>

{% hint style="info" %}
**Info**

If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.
{% endhint %}

4. Replace the contents of the `src/App.vue` file with the following and save:

{% tabs %}
{% tab title="Vue" %}
{% code title="src/App.vue" lineNumbers="true" %}

```vue
<script setup> 
import WebViewer from './components/WebViewer.vue' 
</script> 

<template> 
  <WebViewer 
    initialDoc="https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf" 
  />
</template> 

```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Info**

If WebViewer doesn't appear in your application, verify that the container element has proper CSS dimensions. WebViewer automatically fills the full width and height of the element it's mounted to.
{% endhint %}

## 5. Verify your output

You can now load and display a PDF document in the WebViewer UI. Run your Vue application to launch WebViewer and see the PDF in your browser.

1. From your project directory, run the following command to start the application:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm run dev
```

{% endcode %}
{% endtab %}
{% endtabs %}

A successful output looks similar to:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
> webviewer-vue@0.0.0 dev
> vite


  VITE v8.0.16  ready in 2896 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. Open the localhost URL from your terminal to view the WebViewer UI and PDF document.

***

### Get started video

In this 4-minute video, learn the fundamentals of Apryse WebViewer, including key concepts for installation and initialization in any web application.

{% embed url="<https://www.youtube.com/embed/UIIWdERmBtU?si=ZIOH-IIi9PqhqEDv>" %}
Overview of Apryse WebViewer fundamentals, including installation and initialization.
{% endembed %}

## Next steps

<a href="/web/what-is-webviewer/usage.md" class="button primary">Usage</a><a href="/web/get-started/guides.md" class="button primary">Guides</a><a href="/web/get-started/samples.md" class="button primary">Samples</a><a href="https://sdk.apryse.com/api/web/index.html" class="button primary">API docs</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/libraries-and-frameworks/vue.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.