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 user interface (UI).

Test without installing
Jump to example

Rendering a PDF

  1. 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>
    let loadPromiseResolve;
    

    const loadPromise = new Promise((resolve) => {
      loadPromiseResolve = resolve;
    });
    

    useHead({
      script: [
        {
          src: "https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.10.0/nutrient-viewer.js",
          type: "text/javascript",
          onload: () => loadPromiseResolve(),
        },
      ],
    });
    

    /**
    * Nutrient Web SDK 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,
      /**
      * We wait until the template has been rendered to load the document into the library.
      */
      mounted() {
        loadPromise.then(() => {
          this.loadNutrient().then((instance) => {
            this.$emit("loaded", instance);
          });
        });
      },
      /**
      * We 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();
          }
        },
      },
      /**
      * Our component has the `loadNutrient` method. This unloads and cleans up the component and triggers document loading.
      */
      methods: {
        async loadNutrient() {
          if (this.Nutrient) {
            this.Nutrient.unload(".pdf-container");
          }
    

          this.Nutrient = window.NutrientViewer;
    

          return window.NutrientViewer.load({
            document: this.pdfFile,
            container: ".pdf-container",
            useCDN: true,
          });
        },
      },
    };
    </script>
    

    <style scoped>
    .pdf-container {
      height: 100vh;
    }
    </style>

    Note: Adding useCDN: true will load the SDK assets from the CDN if baseUrl isn’t provided. This flag was introduced in version 1.9.0. If your setup relies on the previous behavior of autodetecting the assets without baseUrl, you can omit this flag for now, but be aware that this behavior is deprecated. In future versions, loading from CDN will become a default when baseUrl isn’t explicitly provided. useCDN: true has no effect if baseUrl is set.

  2. 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 || "https://www.nutrient.io/downloads/nutrient-web-demo.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("Nutrient has loaded: ", instance);
          // Do something.
        },
    

        openDocument(event) {
          if (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;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    

    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;
      margin: auto;
    }
    

    .pdf-container {
      flex: 1;
    }
    </style>

  3. Start the development server:

    Terminal window
    npm run dev

  4. You’ll see the PDF rendered in the user interface (UI).

Troubleshooting

Example
Facing issues?