Add PDF functionality with Nuxt

PSPDFKit 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 PSPDFKit 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.

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

Installation

1. Add the PSPDFKit dependency:

   npm

   npm i pspdfkit

   pnpm

   pnpm add pspdfkit

   yarn

   yarn add pspdfkit

2. Copy the PSPDFKit for Web library assets to the static directory:

   cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib static/pspdfkit-lib

3. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section of our guides.

4. If you’re using Nuxt 2, make sure PSPDFKit is transpiled correctly. Add the following to your nuxt.config.js file:

   build: {
     transpile: ["pspdfkit"]
   }

Render a PDF

1. Rename the PDF document you want to display in your application to document.pdf, and place it in the static directory. You can use this demo document as an example.

2. In the components folder, create a PSPDFKitContainer.vue file with the following content. This creates a component wrapper for the PSPDFKit library:

   <template>
     <div class="pdf-container"></div>
   </template>
   
   <script>
   /**
   * PSPDFKit for Web example component.
   */
   export default {
     name: "PSPDFKit",
     /**
     * The component receives `pdfFile` as a prop, which is type of `String` and is required.
     */
     props: {
       pdfFile: {
         type: String,
         required: true,
       },
     },
     PSPDFKit: null,
     /**
     * Wait until the template has been rendered to load the document into the library.
     */
     mounted() {
       this.loadPSPDFKit().then((instance) => {
         this.$emit("loaded", instance);
       });
     },
     /**
     * Watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
     */
     watch: {
       pdfFile(val) {
         if (val) {
           this.loadPSPDFKit();
         }
       },
     },
     /**
     * Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
     */
     methods: {
       async loadPSPDFKit() {
         import("pspdfkit")
           .then((PSPDFKit) => {
             this.PSPDFKit = PSPDFKit;
             PSPDFKit.unload(".pdf-container");
             return PSPDFKit.load({
               document: this.pdfFile,
               container: ".pdf-container",
               baseUrl: "http://localhost:3000/",
             });
           })
           .catch((error) => {
             console.error(error);
           });
       },
     },
   };
   </script>
   
   <style scoped>
   .pdf-container {
     height: 100vh;
   }
   </style>

3. Add the newly created component to the pages/index.vue file in the following way:

   <template>
     <div id="app">
       <label for="file-upload" class="custom-file-upload"> Open PDF </label>
       <input id="file-upload" type="file" @change="openDocument" class="btn" />
       <PSPDFKitContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
     </div>
   </template>
   
   <script>
   import PSPDFKitContainer from "../components/PSPDFKitContainer.vue";
   
   export default {
     name: "app",
     /**
     * Render the `PSPDFKitContainer` component.
     */
     components: {
       PSPDFKitContainer,
     },
   
     data() {
       return {
         pdfFile: this.pdfFile || "/document.pdf",
       };
     },
   
     /**
     * Our component has two methods — one to check when the document is loaded, and the other to open the document.
     */
     methods: {
       handleLoaded(instance) {
         console.log("PSPDFKit has loaded: ", instance);
         // Do something.
       },
   
       openDocument(event) {
         if (this.pdfFile && this.pdfFile.startsWith("blob:")) {
           window.URL.revokeObjectURL(this.pdfFile);
         }
         this.pdfFile = window.URL.createObjectURL(event.target.files[0]);
       },
     },
   };
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     text-align: center;
     color: #2c3e50;
   }
   
   body {
     margin: 0;
   }
   
   input[type="file"] {
     display: none;
   }
   
   .custom-file-upload {
     border: 1px solid #ccc;
     border-radius: 4px;
     display: inline-block;
     padding: 6px 12px;
     cursor: pointer;
     background: #4a8fed;
     padding: 10px;
     color: #fff;
     font: inherit;
     font-size: 16px;
     font-weight: bold;
   }
   </style>

4. Start the development server:

   npm

   npm run dev

   pnpm

   pnpm run dev

   yarn

   yarn run dev

5. You should see the PDF rendered in the UI.

Troubleshooting

Example View the example repo on GitHub.

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