Vue

Reduce PDFs and photos before upload in a Vue app, with one attribute on your file input or drop zone.

Load the script once in index.html, then add the attribute to your input or drop zone. Your handlers receive the reduced file.

index.html

<script src="https://pdfkind.com/embed.js" defer></script>

File input

Vue

<template>
  <input type="file" data-pdfkind-max="5MB" @change="onFile" />
</template>

<script setup>
function onFile(e) {
  upload(e.target.files[0])   // the reduced file
}
</script>

Drop zone

Vue

<div data-pdfkind-max="5MB" @dragover.prevent @drop.prevent="onDrop">
  Drop your document here
</div>

<script setup>
function onDrop(e) {
  upload(e.dataTransfer.files[0])
}
</script>

For full control, use PDFkind.fit().

PreviousReact Next Angular

Last updated November 3, 2026 · Questions: contact@pdfkind.com