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!

1. Add CloudPDF as a dependency

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:

Using Yarn

yarn add @cloudpdf/viewer

Using NPM

npm install @cloudpdf/viewer --save

2. Render CloudPDF

<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

NOTE: In this example we set our document security to public. After uploading a document, the document is by default set on non-public to guarantee security. To view a document that is not public you must first create a signature on your server or you can change the security settings on a document.