Add PDF functionality with Nuxt

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.

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

Installation

1. Add the Nutrient Web SDK (@nutrient-sdk/viewer) dependency:

   npm

   npm i @nutrient-sdk/viewer

   pnpm

   pnpm add @nutrient-sdk/viewer

   yarn

   yarn add @nutrient-sdk/viewer

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

   cp -R ./node_modules/@nutrient-sdk/viewer/dist/ public/js/nutrient/

Render a PDF

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

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

   <template>
     <div class="pdf-container"></div>
   </template>
   
   <script>
   /**
   * Nutrient for Web example component.
   */
   export default {
     name: "Nutrient",
     /**
     * The component receives `pdfFile` as a prop, which is type of `String` and is required.
     */
     props: {
       pdfFile: {
         type: String,
         required: true,
       },
     },
     Nutrient: null,
     /**
     * Wait until the template has been rendered to load the document into the library.
     */
     mounted() {
       this.loadNutrient().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.loadNutrient();
         }
       },
     },
     /**
     * The loadNutrient method unloads and cleans up the component and triggers document loading.
     */
     methods: {
       async loadNutrient() {
         import("Nutrient")
           .then((Nutrient) => {
             this.Nutrient = Nutrient;
             Nutrient.unload(".pdf-container");
             return Nutrient.load({
               document: this.pdfFile,
               container: ".pdf-container",
               baseUrl: "http://localhost:3000/js/nutrient/",
             });
           })
           .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:

   <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" />
       <NutrientContainer :pdfFile="pdfFile" @loaded="handleLoaded" />
     </div>
   </template>
   
   <script>
   import NutrientContainer from "../components/NutrientContainer.vue";
   
   export default {
     name: "app",
     /**
     * Render the `NutrientContainer` component.
     */
     components: {
       NutrientContainer,
     },
   
     data() {
       return {
         pdfFile: this.pdfFile || "/document.pdf",
       };
     },
   
     /**
     * Two methods: one to check when the document is loaded, and the other to open the document.
     */
     methods: {
       handleLoaded(instance) {
         console.log("Nutrient 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.