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'],
})

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 components use Tailwind CSS classes. You need to add a @source directive so Tailwind scans the KViewer component files and generates the required styles.

Add this to your main CSS file:

@import 'tailwindcss';
@import '@nuxt/ui';

@source '../node_modules/kviewer/dist/runtime/**/*.vue';

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.