Guide
Customization
Customize the viewer UI with slots and configuration
KViewer provides several customization options through slots, component prefix configuration, and CSS.
Replace the Header Toolbar
Use the header slot to replace the default ViewerBar with a custom toolbar:
<template>
<div class="h-screen">
<KViewer :source="pdfUrl">
<template #header>
<div class="flex items-center gap-2 p-2 border-b">
<button @click="exportPdf">Download</button>
<span>Custom Toolbar</span>
</div>
</template>
</KViewer>
</div>
</template>
Replacing the header removes all built-in toolbar controls (annotation tools, zoom, search, etc.). Only replace the header when you need a completely custom UI.
Add a Footer
Use the footer slot to add content below the viewer:
<KViewer :source="pdfUrl">
<template #footer>
<div class="flex items-center justify-between p-2 border-t">
<span>Page info</span>
<button @click="saveDraft">Save Draft</button>
</div>
</template>
</KViewer>
Customize KViewerTabs Slots
KViewerTabs provides additional slots for the tab bar:
<KViewerTabs :items="tabs">
<!-- Content before the tab list -->
<template #tabs-leading>
<span class="px-3 font-semibold">My Documents</span>
</template>
<!-- Content after the tab list -->
<template #tabs-trailing>
<button @click="addTab">+ New Tab</button>
</template>
<!-- Custom header for each viewer (receives tab context) -->
<template #header="{ tab }">
<div class="p-2 border-b">
Viewing: {{ tab.label }}
</div>
</template>
<!-- Custom footer for each viewer -->
<template #footer>
<div class="p-2 border-t text-sm text-muted">
Custom footer content
</div>
</template>
<!-- Shown when all tabs are closed -->
<template #empty>
<div class="flex flex-col items-center justify-center h-full">
<p>No documents open</p>
</div>
</template>
</KViewerTabs>
Change the Component Prefix
Customize the component prefix in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['kviewer'],
ssr: false,
kviewer: {
prefix: 'Pdf',
},
})
With prefix: 'Pdf', components are registered as:
PdfViewerinstead ofKViewerPdfViewerTabsinstead ofKViewerTabs
Styling
KViewer uses Tailwind CSS for styling and auto-includes required CSS files:
pdfjs-dist/web/pdf_viewer.cssfor the text layerkviewer.cssfor annotation cursor styles
The viewer components follow your project's Tailwind theme. To customize annotation colors or toolbar appearance, override the relevant CSS custom properties or use Tailwind utilities in your slot content.