Advanced
Examples
Real-world examples of using Nuxt PDF Kit.
Practical examples showing different use cases.
Basic Viewer
<template>
<div class="h-screen">
<NuxtPdfKit src="/sample.pdf" />
</div>
</template>
Dark Mode
<template>
<NuxtPdfKit src="/document.pdf" theme="dark" />
</template>
Dual Page View
<template>
<NuxtPdfKit
src="/book.pdf"
initial-view-mode="dual-cover"
initial-scroll-mode="page"
/>
</template>
Embedded with Custom Controls
<template>
<div class="flex flex-col gap-4 p-4">
<div class="flex gap-2">
<UButton @click="pdfViewer?.prevPage()">Previous</UButton>
<UButton @click="pdfViewer?.nextPage()">Next</UButton>
<UButton @click="pdfViewer?.zoomIn()">Zoom In</UButton>
<UButton @click="pdfViewer?.zoomOut()">Zoom Out</UButton>
</div>
<div class="h-[600px]">
<NuxtPdfKit
ref="pdfViewer"
src="/document.pdf"
:toolbar="{
pageNavigation: false,
zoom: false,
}"
/>
</div>
</div>
</template>
<script setup>
const pdfViewer = ref(null)
</script>
Dynamic Loading
<template>
<div class="flex flex-col gap-4">
<div class="flex gap-2">
<UButton
v-for="doc in documents"
:key="doc.path"
@click="currentPdf = doc.path"
>
{{ doc.name }}
</UButton>
</div>
<div class="h-[600px]">
<NuxtPdfKit
v-if="currentPdf"
:key="currentPdf"
:src="currentPdf"
/>
</div>
</div>
</template>
<script setup>
const currentPdf = ref(null)
const documents = [
{ name: 'Report', path: '/report.pdf' },
{ name: 'Manual', path: '/manual.pdf' },
]
</script>
Modal Viewer
<template>
<div>
<UButton @click="isOpen = true">View PDF</UButton>
<UModal v-model:open="isOpen" fullscreen>
<template #content>
<NuxtPdfKit src="/document.pdf" />
</template>
</UModal>
</div>
</template>
<script setup>
const isOpen = ref(false)
</script>