Module Configuration

Configuration

Add the kviewer key to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['kviewer'],
  kviewer: {
    prefix: 'K',
  },
})

Options

Component Prefix

The prefix option controls how components are registered:

Client-Side Rendering

KViewer components depend on browser APIs (Canvas, DOM) through pdfjs-dist and Konva. They cannot render on the server. You have three options:

Disable SSR globally

export default defineNuxtConfig({
  modules: ['kviewer'],
  ssr: false,
})

Use <ClientOnly>

Wrap the viewer to skip server rendering while keeping SSR for the rest of your app:

<template>
  <ClientOnly fallback-tag="div" fallback="Loading viewer...">
    <KViewer source="/sample.pdf" />
  </ClientOnly>
</template>

Disable SSR per page

<script setup lang="ts">
definePageMeta({
  ssr: false,
})
</script>

<template>
  <KViewer source="/sample.pdf" />
</template>

Auto-Imported CSS

The module automatically injects these CSS files:

• pdfjs-dist/web/pdf_viewer.css -- Styles for the text selection layer
• kviewer.css -- Cursor styles for annotation tools

No manual CSS imports are needed.

Auto-Imported Components

All KViewer components are auto-imported with the configured prefix. The main components you'll use are:

• KViewer -- Single document viewer (API reference)
• KViewerTabs -- Multi-document tabbed viewer (API reference)