Integrate CloudPDF inside your Vue.js App

If you already have a Vue.js project you want to integrate with CloudPDF, then you can simply add the CloudPDF Javascript library as a dependency to your project. Let's walk through all the steps to get CloudPDF integrated into your project!

Now add CloudPDF as a dependency to your project. Launch the terminal (command prompt or similar on Windows), point it to your project location, and run the following command:

Terminal

yarn add @cloudpdf/viewer

Terminal

npm install @cloudpdf/viewer --save

HTML

<template>
  <div id="webviewer" ref="viewer"></div>
</template>
<script>
import PDFViewer from "@cloudpdf/viewer";
export default {
  name: "PDFViewer",
  props: {
    id: String,
  },
  mounted() {
    PDFViewer(
      {
        documentId: this.id,
        darkMode: true,
      },
      this.$refs.viewer
    );
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#webviewer {
  height: 400px;
  width: 100%;
}
</style>

documentId After you upload your document to CloudPDF you will receive a documentId. How to upload a document?
darkMode You can set the viewer to light or dark mode by changing this variable to true or false

To view all the options go to viewer options

Live Demo

Integrate CloudPDF inside your Vue.js App

1. Add CloudPDF as a dependency

Using Yarn

Using NPM

2. Render CloudPDF