[vue-pdf-embed@2] Basic usage example

Basic usage example of embedding a PDF document into a Vue application using vue-pdf-embed. Learn more at https://npmjs.com/package/vue-pdf-embed

by hrynko

HTML

<script src="https://unpkg.com/vue@3.3.0/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-pdf-embed@2.1.0/dist/index.umd.js"></script>

<template id="appTemplate">
  <vue-pdf-embed source="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf" />
</template>

<div id="app"></div>

CSS

body {
  padding: 16px;
  background-color: #ccc;
}

.vue-pdf-embed {
  margin: 0 auto;
}

.vue-pdf-embed__page {
  margin-bottom: 8px;
  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
}

JavaScript

Vue.createApp({
  template: document.getElementById('appTemplate').innerHTML,
  components: {
    'vue-pdf-embed': VuePdfEmbed,
  },
}).mount('#app')