Add PDF functionality with Vue

Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.

This guide walks you through the steps to integrate Nutrient Web SDK into your project. By the end, you'll be able to render a PDF document in the UI.

Test without installing You can test the SDK capabilities in our playground.

View example Prefer to jump straight into code? View the example repo on GitHub.

Installation

You can load Nutrient Web SDK directly from Nutrient's content delivery network (CDN). Nutrient maintains the CDN for customers and it's a good way to get started. For more control and flexibility, you can use local installation.

CDN Installation
Local installation

Add the following in your index.html:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

You're now ready to use Nutrient Web SDK and reference window.PSPDFKit in the client side code.

Add the Nutrient Web SDK (@nutrient-sdk/viewer) dependency:
- npm
- pnpm
- yarn
Terminal window
npm i @nutrient-sdk/viewer
Terminal window
pnpm add @nutrient-sdk/viewer
Terminal window
yarn add @nutrient-sdk/viewer

If you tried CDN installation first, make sure to remove the script tag:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"></script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

We'll add a config in Vite to copy the SDK assets to the public directory. Install the rollup-plugin-copy package:
- npm
- pnpm
- yarn
Terminal window
npm i -D rollup-plugin-copy
Terminal window
pnpm add -D rollup-plugin-copy
Terminal window
yarn add -D rollup-plugin-copy

Update your Vite config:

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";
import copy from "rollup-plugin-copy";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    copy({
      targets: [
        {
          // The Nutrient Web SDK requires its assets to be in the `public` directory so it can load them.
          src: "node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib",
          dest: "public/",
        },
      ],
      hook: "buildStart",
    }),
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Update App.vue or any other component where you're using NutrientViewer:

<script setup lang="ts">
import { onMounted, onUnmounted, useTemplateRef } from "vue";

const containerRef = useTemplateRef("container");
let NutrientViewer: typeof import("@nutrient-sdk/viewer").default | undefined;

onMounted(async () => {
  NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
  const container = containerRef.value;

  if (container && NutrientViewer) {
    NutrientViewer.load({
      container,
      // you may also specify a file in public directory e.g. /document.pdf
      document: "https://www.nutrient.io/downloads/pspdfkit-web-demo.pdf",
      // baseUrl tells the SDK where to load the assets from
      baseUrl: `${window.location.protocol}//${window.location.host}/${import.meta.env.PUBLIC_URL ?? ""}`,
    });
  }
})

onUnmounted(() => {
  const container = containerRef.value;

  if (container && NutrientViewer) {
    NutrientViewer.unload(container);
  }
})
</script>

<template>
  <div ref="container" class="container" />
</template>

<style scoped>
/* we also need to set the container height and width */
.container {
  width: 100vw;
  height: 100vh;
}
</style>

You're now ready to use the Nutrient Web SDK locally in your Vue + Vite app.

Rendering a PDF

This guide uses the new composition API.

Load the PDF file in App.vue or any other component of your choice using NutrientViewer:

<script setup lang="ts">
import { onMounted, onUnmounted, useTemplateRef } from "vue";

const containerRef = useTemplateRef("container");
const { NutrientViewer } = window;

onMounted(() => {
  const container = containerRef.value;

  if (container && NutrientViewer) {
    NutrientViewer.load({
      container,
      // you can also specify a file in public directory, for example /document.pdf
      document: "https://www.nutrient.io/downloads/pspdfkit-web-demo.pdf",
    });
  }
})

onUnmounted(() => {
  const container = containerRef.value;

  if (container && NutrientViewer) {
    NutrientViewer.unload(container);
  }
})
</script>

<template>
  <div ref="container" class="container" />
</template>

<style scoped>
/* we also need to set the container height and width */
.container {
  width: 100vw;
  height: 100vh;
}
</style>

Start the development server:
- npm
- pnpm
- yarn
Terminal window
npm run dev
Terminal window
pnpm run dev
Terminal window
yarn run dev
You should see the PDF rendered in the Nutrient Web SDK UI.

Next steps

Further steps to set up your project.

TypeScript with CDN installation

Nutrient Web SDK comes with built-in support for TypeScript. This should work out of the box for local installation. For the CDN installation follow these steps:

Add the Nutrient Web SDK dependency, if not done previously. You need the package to be installed locally in order to reference the types:
- npm
- pnpm
- yarn
Terminal window
npm i @nutrient-sdk/viewer
Terminal window
pnpm add @nutrient-sdk/viewer
Terminal window
yarn add @nutrient-sdk/viewer

Create a module for custom typings (say global.d.ts in the src directory) to reference the built-in typings for the SDK:

import NutrientViewer from "@nutrient-sdk/viewer";

declare global {
  interface Window {
    // Nutrient Web SDK will be available on window.NutrientViewer once loaded
    NutrientViewer?: typeof NutrientViewer;
  }
}

Restart TS server or your editor if needed.

Optimize CDN installation

If you use the CDN installation approach in production, Nutrient recommends optimizations such as prefetching.

Troubleshooting

Example View the example repo on GitHub.

Facing issues? Visit the troubleshooting guide for solutions to some common errors.