Installation
Install the Package
pnpm add kviewer
npm install kviewer
yarn add kviewer
bun add kviewer
Add the Module
Add kviewer to your nuxt.config.ts:
export default defineNuxtConfig({
modules: ['kviewer'],
})
@nuxt/ui for you, so you don't need to add it to modules yourself. If your app already uses Nuxt UI, keep your existing entry — KViewer detects it and leaves your configuration untouched.KViewer components depend on browser APIs (Canvas, DOM) through pdfjs-dist and Konva, so they cannot render on the server. You have two options:
Option 1: Disable SSR globally
If your app doesn't need server-side rendering:
export default defineNuxtConfig({
modules: ['kviewer'],
ssr: false,
})
Option 2: Use <ClientOnly>
If your app uses SSR, wrap KViewer in a <ClientOnly> component to skip server rendering for just the viewer:
<template>
<div class="h-screen">
<ClientOnly fallback-tag="div" fallback="Loading viewer...">
<KViewer source="/sample.pdf" />
</ClientOnly>
</div>
</template>
You can also disable SSR on specific pages using definePageMeta:
<script setup lang="ts">
definePageMeta({
ssr: false,
})
</script>
<template>
<div class="h-screen">
<KViewer source="/sample.pdf" />
</div>
</template>
Module Options
You can customize the component prefix (default: K):
export default defineNuxtConfig({
modules: ['kviewer'],
kviewer: {
prefix: 'K', // Components registered as KViewer, KViewerTabs, etc.
},
})
Setting the prefix to 'Pdf' would register components as PdfViewer and PdfViewerTabs.
Configure Tailwind CSS
KViewer's UI is built on Nuxt UI and Tailwind CSS. Tailwind needs a main stylesheet to compile against — create one (or extend your existing one) with three imports:
@import 'tailwindcss';
@import '@nuxt/ui';
@import 'kviewer';
Then register it in nuxt.config.ts:
export default defineNuxtConfig({
modules: ['kviewer'],
css: ['~/assets/css/main.css'],
})
@import 'kviewer' registers KViewer's components as a Tailwind source, so the utility classes used by the viewer toolbar and UI get generated. The import resolves through the package automatically — no fragile node_modules path to maintain. Without it, the viewer renders unstyled.@import 'tailwindcss' and @import '@nuxt/ui' lines are Nuxt UI's standard setup. If your app already has a Tailwind + Nuxt UI stylesheet, just add the single @import 'kviewer' line to it.Verify Installation
Create a page with a simple viewer to confirm everything works:
<template>
<div class="h-screen">
<KViewer source="/sample.pdf" />
</div>
</template>
Place a PDF file at public/sample.pdf and run pnpm dev. You should see the PDF rendered with the default toolbar.
KViewer must have a defined height. The component uses h-full internally, so it expands to fill its parent.