Syncfusion Vue PDF Viewer

Syncfusion Vue Pdfviewer – UI Sample Generator

Target package: @syncfusion/ej2-vue-pdfviewer

Generate Code for the User's Project (default)

Trigger keywords: "how to", "add pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "component", "create sample", "vue sample".

Purpose: Generate minimal, copy-pasteable Vue SFC (.vue) code that the user can integrate directly into their Vue 2 or Vue 3 project.

Workflow: ⚠️ CRITICAL — Feature Support Policy (STRICT MODE):

FUNDAMENTAL RULE: Only generate code using APIs and properties that are EXPLICITLY listed in the reference files. ANY deviation is a VIOLATION.

• MANDATORY CHECKS BEFORE GENERATING ANY CODE:

  1. Search the reference files for the exact API/property name
  2. Verify it appears in the Method Reference, Properties, or Events tables
  3. If NOT found in ANY reference file, STOP immediately
  4. Do NOT generate or suggest undocumented APIs under any circumstances

• STRICT ENFORCEMENT - ZERO TOLERANCE:

  • NO custom properties - Only use properties from reference file tables
  • NO invented methods - Only use methods from reference file tables
  • NO workarounds with undefined APIs - Forbidden
  • NO assumptions about undocumented behavior - Forbidden
  • NO alternative implementations using guess-work - Forbidden
  • NO pretending support exists - Forbidden

• MANDATORY RESPONSE FOR UNSUPPORTED FEATURES:

  • If a requested scenario/feature/API is NOT listed in any reference file, you MUST respond with:

    "This feature is not supported in the current Syncfusion Vue PDF Viewer implementation."
    

  • Then list what IS supported from the appropriate reference file
  • Never suggest alternatives unless explicitly documented in reference files

• REFERENCE FILE HIERARCHY:

  • Each reference file contains complete, authoritative documentation for its domain
  • The tables (Method Reference, Properties, Events) are the SOURCE OF TRUTH
  • Content outside these tables in reference files is explanatory only
  • Do NOT extend beyond what appears in the reference file tables

• AUDIT YOUR GENERATION:

  • Before providing any code, verify EVERY API used appears in a reference file table
  • Document which reference file each API comes from
  • If you cannot cite a reference file table entry, DELETE that code

• This is a CRITICAL REQUIREMENT. Violations compromise the skill's integrity and reliability.

Step 1 — Detect the Application Type (REQUIRED - DO NOT SKIP)

• Use file_search and read_file tools to inspect workspace project files:
  • package.json (project configuration and dependencies)
  • vite.config.js or vite.config.ts (Vue 3 Vite build config)
  • vue.config.js (Vue 2 Vue-CLI config)
  • App.vue (root component)
  • main.js or main.ts (app entry point — check for Vue.use(...) for Vue 2 vs createApp(...) for Vue 3)
  • Any existing .vue files in src/ folder
• Output: Confirm the detected application type is Vue 2 or Vue 3 before proceeding, as the component registration and API patterns differ.

Step 2 — Generate Code from Reference Files Only (REQUIRED)

• Before generating: Confirm that Step 1 is complete
• Read the relevant references/*.md file(s) for the requested feature
• Cross-reference EVERY API, property, and method against these tables
• COMPONENT-BASED APPROACH (MANDATORY - VUE PATTERNS ONLY):
  • Use Vue SFC (.vue) syntax with <template>, <script>, and <style> sections
  • Use <ejs-pdfviewer> as the component tag
  • Bind all PDF Viewer properties using Vue's :prop="value" binding syntax
  • Vue 2: Register component via components: { "ejs-pdfviewer": PdfViewerComponent } and inject services via provide: { PdfViewer: [...] }
  • Vue 3 Composition API: Import PdfViewerComponent as EjsPdfviewer and use provide('PdfViewer', [...]) from vue
  • Vue 3 Options API: Use components + provide options just like Vue 2 but with createApp entry
  • Use ref / $refs (Vue 2) or ref() + template ref attribute (Vue 3) for programmatic viewer access
• MANDATORY: Before generating ANY code, verify that reference files exist and are accessible
• Read the appropriate reference file(s) for the requested feature:
  • Use read_file tool on relevant references/*.md files
  • Confirm file contains Methods/Properties/Events tables
  • Verify tables are complete and readable
• If reference file is missing or cannot be read:
  • STOP code generation
  • Respond: "Reference file for this feature is not available. Please ensure all reference files are present in the references/ directory."
  • List the missing reference file name
• This is a BLOCKER step: Cannot proceed without reference file validation
• If an API/property does NOT appear in the reference file table, DO NOT USE IT
• Do NOT invent, guess, or suggest any API, method, property, class, or namespace not explicitly present in the reference files

Reference File Routing

All templates and operation snippets live in references/*.md. Each file is a focused snippet or template the agent will combine when generating samples.

Flow: Always start with getting-started.md, then merge matched features into its anchors (PROPS, EVENTS, UI_BUTTONS, HANDLERS). If no keyword matches, return only the basic sample.

Checklist Before Generating Code

• Detected Vue version? Vue 2 → use data() + provide:{} | Vue 3 → use ref()/reactive() + provide()
• Count the settings properties: 1-3? → Use inline binding | 4+? → Use data constant
• Are enums involved? Yes → Import required enums | No → Skip enum imports
• Is it reused elsewhere? Yes → Use data/ref constant | No → Prefer inline
• Is the component prop simple enough? Yes → Keep inline | No → Extract to data/ref

🎯 Core Setup & Configuration

📐 Navigation & Page Management

🔍 Viewing & Interaction

🛠️ Toolbar & Context Menu

Toolbar Configuration

⚠️ STRICT VALIDATION FOR TOOLBAR ITEM NAMES

When generating toolbar configurations, you MUST follow these rules to prevent incorrect toolbar item names:

1. ALWAYS reference exact item names from toolbar-settings.md

   • Do NOT invent, guess, or assume toolbar item names
   • Do NOT apply naming pattern logic to derive names
   • Use ONLY names listed in the "Available Primary Toolbar Items", "Available Annotation Toolbar Items", and "Available Form Designer Items" sections in toolbar-settings.md

2. VALIDATE item names character-by-character

   • Case sensitivity matters: HighlightTool ≠ HighlightOption
   • Exact names only: AnnotationEditTool ≠ AnotatetionEditTool
   • No abbreviations or shortcuts

3. Before generating toolbar configuration code:

   • Open toolbar-settings.md reference file
   • Locate: "Available Primary Toolbar Items" section
   • Locate: "Available Annotation Toolbar Items" section
   • Locate: "Available Form Designer Items" section
   • Copy exact names from THESE SECTIONS ONLY
   • Cross-check every single item name character-by-character
   • If ANY item name is not in the reference sections, DO NOT USE IT
   • Consult the "❌ COMMON MISTAKES TO AVOID" table in toolbar-settings.md if unsure

4. Common errors to prevent:

   • ❌ AnotatetionEditTool → ✅ AnnotationEditTool (typo)
   • ❌ CalibrationOption → ✅ CalibrateTool (wrong suffix)
   • ❌ ShapeAnnotationOption → ✅ ShapeTool (annotation toolbar version)
   • ❌ InkAnnotationOption → ✅ InkAnnotationTool (annotation toolbar version)
   • For complete list of mistakes to avoid, see toolbar-settings.md "❌ COMMON MISTAKES TO AVOID" table

Context Menu Customization

📝 Annotations

📄 Forms

📋 Document Actions

⚙️ Advanced Features

Quick Start Example

<template>
  <ejs-pdfviewer
    ref="pdfViewer"
    :resourceUrl="resourceUrl"
    :documentPath="documentPath"
    style="height: 640px">
  </ejs-pdfviewer>
</template>

<script setup>
import { provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
         BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
         Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';

const resourceUrl = window.location.origin + "/asset/ej2-pdfviewer-lib";
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

provide('PdfViewer', [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
                       Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields ]);
</script>

<style>
  /* Refer to the CSS Configuration section for the full import list */
  @import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
</style>

⚙️ SETTINGS CONFIGURATION BEST PRACTICES

When generating code with settings (toolbarSettings, annotationSettings, annotationSelectorSettings, arrowSettings, rectangleSettings, etc.), follow these guidelines to prevent unnecessary complexity:

Rule 1: Simple Settings → Define INLINE in Component Binding

Use this approach when:

• Configuring only 1-3 properties
• Settings are straightforward without complex enums or custom types
• No need for separate data constants

Example (DO THIS):

<template>
  <ejs-pdfviewer
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    :annotationSelectorSettings="{
      selectionBorderColor: '#0000ff',
      selectionBorderThickness: 2,
      resizerBorderColor: '#ff0000',
    }"
    style="height: 640px"
  />
</template>

Benefits:

• ✅ No extra data properties needed
• ✅ Simple and readable
• ✅ Less code clutter

Rule 2: Complex Settings → Define in data() / ref() (OUTSIDE template)

Use this approach when:

• Configuring 4+ properties OR multiple related settings
• Using enums or complex configurations
• Need to reuse the same configuration across multiple components

Example — Vue 2 Options API (DO THIS ONLY FOR COMPLEX CASES):

<template>
  <ejs-pdfviewer
    id="container"
    :documentPath="documentPath"
    :annotationSelectorSettings="annotationSelectorConfig"
    style="height: 640px"
  />
</template>

<script>
import { PdfViewerComponent, Annotation,
         AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'App',
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      annotationSelectorConfig: {
        selectionBorderColor: '#0000ff',
        selectionBorderThickness: 2,
        resizerBorderColor: '#ff0000',
        resizerFillColor: '#4070ff',
        resizerSize: 8,
        resizerShape: 'Square',
        selectorLineDashArray: [5, 6],
        resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
        resizerCursorType: CursorType.grab,
      },
    };
  },
  provide: { PdfViewer: [Annotation] },
};
</script>

Example — Vue 3 Composition API (DO THIS ONLY FOR COMPLEX CASES):

<script setup>
import { provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Annotation,
         AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';

const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
const annotationSelectorConfig = {
  selectionBorderColor: '#0000ff',
  selectionBorderThickness: 2,
  resizerBorderColor: '#ff0000',
  resizerFillColor: '#4070ff',
  resizerSize: 8,
  resizerShape: 'Square',
  selectorLineDashArray: [5, 6],
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab,
};

provide('PdfViewer', [Annotation]);
</script>

When to import enums:

• Import any enums that are used in the settings (e.g., AnnotationResizerLocation, CursorType)
• Keep imports minimal — import ONLY what is used in the settings

Benefits:

• ✅ Proper enum usage
• ✅ Reusable across multiple components
• ✅ Clean template code

Rule 3: NEVER Over-Engineer Simple Cases

❌ DO NOT DO THIS (Over-engineered):

<script>
import { PdfViewerComponent } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      // Unnecessary data property for 1 simple prop
      toolbarSettings: { showTooltip: true },
    };
  },
};
</script>

✅ DO THIS INSTEAD (Simple & Clean):

<ejs-pdfviewer :toolbarSettings="{ showTooltip: true }" ... />