Components
Slots
Available slots for customizing NuxtPdfKit.
The NuxtPdfKit component provides several slots for customization.
| Slot | Description |
|---|---|
loader | Custom loading state while the PDF is being loaded. |
thumbnail-tool | Custom thumbnail toggle button. |
page-navigation-tool | Custom page navigation controls. |
zoom-tool | Custom zoom controls. |
loader
Custom loading state while the PDF is being loaded.
<template>
<NuxtPdfKit src="/document.pdf">
<template #loader>
<div class="flex items-center gap-2">
<UIcon name="i-lucide-loader" class="animate-spin" />
<span>Loading your document...</span>
</div>
</template>
</NuxtPdfKit>
</template>
Custom Loader Example
<template>
<NuxtPdfKit src="/large-document.pdf">
<template #loader>
<div class="flex flex-col items-center justify-center h-full gap-4">
<div class="relative">
<UIcon
name="i-lucide-file-text"
class="w-16 h-16 text-primary"
/>
<UIcon
name="i-lucide-loader-2"
class="absolute -right-2 -bottom-2 w-6 h-6 animate-spin text-primary"
/>
</div>
<div class="text-center">
<p class="font-semibold">Loading Document</p>
<p class="text-sm text-gray-500">Please wait...</p>
</div>
</div>
</template>
</NuxtPdfKit>
</template>
thumbnail-tool
Custom thumbnail toggle button.
<template>
<NuxtPdfKit src="/document.pdf">
<template #thumbnail-tool>
<UButton icon="i-lucide-panel-left">
Thumbnails
</UButton>
</template>
</NuxtPdfKit>
</template>
page-navigation-tool
Custom page navigation controls.
<template>
<NuxtPdfKit src="/document.pdf">
<template #page-navigation-tool>
<div class="flex items-center gap-2">
<!-- Custom navigation -->
</div>
</template>
</NuxtPdfKit>
</template>
zoom-tool
Custom zoom controls.
<template>
<NuxtPdfKit src="/document.pdf">
<template #zoom-tool>
<div class="flex items-center gap-2">
<!-- Custom zoom controls -->
</div>
</template>
</NuxtPdfKit>
</template>
search, rotate, openFile, print, download, fullscreen, themeToggle, moreOptions) do not expose named slots in the current version. To customize them, hide the built-in tool via the toolbar prop and provide your own control next to the viewer.