@embedpdf/vue-pdf-viewer 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +150 -55
  2. package/package.json +6 -5
package/README.md CHANGED
@@ -1,8 +1,45 @@
1
- # @embedpdf/vue-pdf-viewer
1
+ <div align="center">
2
+ <a href="https://www.embedpdf.com/vue-pdf-viewer">
3
+ <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
4
+ </a>
2
5
 
3
- Vue 3 component for embedding PDF documents with full-featured viewing capabilities.
6
+ <h1>Vue PDF Viewer</h1>
7
+ <p>The easiest way to embed PDF files in your Vue 3 application with a complete, ready‑to‑use interface.</p>
4
8
 
5
- ## Installation
9
+ <a href="https://www.embedpdf.com/vue-pdf-viewer"><img alt="Documentation" src="https://img.shields.io/badge/View%20Docs-0af?style=for-the-badge&labelColor=000000"></a>
10
+ <a href="https://app.embedpdf.com/"><img alt="Live Demo" src="https://img.shields.io/badge/Try%20Live%20Demo-ff1493.svg?style=for-the-badge&labelColor=000000"></a>
11
+ <a href="https://www.npmjs.com/package/@embedpdf/vue-pdf-viewer"><img alt="NPM Version" src="https://img.shields.io/npm/v/@embedpdf/vue-pdf-viewer?style=for-the-badge&labelColor=000000&color=blue"></a>
12
+
13
+ </div>
14
+
15
+ ---
16
+
17
+ ## 📚 Documentation
18
+
19
+ The full walkthrough, advanced examples, and API reference live in our docs site:
20
+
21
+ 👉 **[https://www.embedpdf.com/vue-pdf-viewer](https://www.embedpdf.com/vue-pdf-viewer)**
22
+
23
+ ---
24
+
25
+ ## 🚀 Introduction
26
+
27
+ The `@embedpdf/vue-pdf-viewer` package provides a complete, production-ready PDF viewing experience for Vue 3 applications.
28
+
29
+ It is designed to be the fastest way to get a high-quality PDF viewer into your app. You don't need to build toolbars, handle layout logic, or worry about CSS—it just works.
30
+
31
+ ### Key Features
32
+
33
+ - **Ready-to-use UI** — Includes a polished toolbar, sidebar, and thumbnails.
34
+ - **Responsive** — Adapts seamlessly to mobile and desktop screens.
35
+ - **Themable** — Built-in light/dark modes and support for custom brand colors.
36
+ - **Configurable** — Easily disable features you don't need (e.g., printing or downloading).
37
+ - **TypeScript** — Fully typed for a great developer experience.
38
+ - **Nuxt Ready** — Works seamlessly with Nuxt 3 and SSR.
39
+
40
+ ---
41
+
42
+ ## 📦 Installation
6
43
 
7
44
  ```bash
8
45
  npm install @embedpdf/vue-pdf-viewer
@@ -12,81 +49,139 @@ pnpm add @embedpdf/vue-pdf-viewer
12
49
  yarn add @embedpdf/vue-pdf-viewer
13
50
  ```
14
51
 
15
- ## Usage
52
+ ---
53
+
54
+ ## 🛠 Basic Usage
55
+
56
+ Import the `PDFViewer` component and render it with a PDF source.
16
57
 
17
58
  ```vue
18
59
  <template>
19
- <PDFViewer
20
- :config="{
21
- src: '/document.pdf',
22
- theme: { preference: 'system' },
23
- }"
24
- :style="{ width: '100%', height: '100vh' }"
25
- @ready="onReady"
26
- />
60
+ <div style="height: 100vh">
61
+ <PDFViewer
62
+ :config="{
63
+ src: 'https://snippet.embedpdf.com/ebook.pdf',
64
+ theme: { preference: 'light' },
65
+ }"
66
+ />
67
+ </div>
27
68
  </template>
28
69
 
29
- <script setup lang="ts">
70
+ <script setup>
30
71
  import { PDFViewer } from '@embedpdf/vue-pdf-viewer';
31
- import type { PluginRegistry } from '@embedpdf/vue-pdf-viewer';
32
-
33
- function onReady(registry: PluginRegistry) {
34
- console.log('PDF viewer ready', registry);
35
- }
36
72
  </script>
37
73
  ```
38
74
 
39
- ## Props
75
+ That's it! You now have a fully functional PDF viewer.
40
76
 
41
- | Prop | Type | Description |
42
- | -------- | ----------------- | ---------------------------------------- |
43
- | `config` | `PDFViewerConfig` | Full configuration object for the viewer |
44
- | `class` | `string` | CSS class name for the container |
45
- | `style` | `CSSProperties` | Inline styles for the container |
77
+ ### Nuxt 3 Usage
46
78
 
47
- The `config` prop accepts all configuration options from `@embedpdf/snippet`, including:
79
+ The component works seamlessly with Nuxt 3. Since it uses browser APIs (Canvas, WebAssembly), wrap it in `<ClientOnly>` to avoid hydration errors:
48
80
 
49
- - `src` - URL or path to the PDF document
50
- - `theme` - Theme configuration
51
- - `zoom` - Zoom configuration
52
- - `scroll` - Scroll configuration
53
- - `annotations` - Annotation configuration
54
- - And more...
81
+ ```vue
82
+ <template>
83
+ <ClientOnly>
84
+ <PDFViewer :config="{ src: '/document.pdf' }" />
85
+ </ClientOnly>
86
+ </template>
87
+ ```
55
88
 
56
- ## Events
89
+ ---
57
90
 
58
- | Event | Payload | Description |
59
- | ------- | ------------------- | ---------------------------------- |
60
- | `init` | `EmbedPdfContainer` | Emitted when viewer is initialized |
61
- | `ready` | `PluginRegistry` | Emitted when registry is ready |
91
+ ## 🎨 Customization
62
92
 
63
- ## Accessing the Registry
93
+ ### Theme
64
94
 
65
- Use a template ref to access the viewer container and registry:
95
+ The viewer includes a robust theming system. You can set the preference to `'light'`, `'dark'`, or `'system'`, and even override specific colors to match your brand.
66
96
 
67
97
  ```vue
68
- <template>
69
- <PDFViewer
70
- ref="viewerRef"
71
- :config="{ src: '/document.pdf' }"
72
- :style="{ width: '100%', height: '100vh' }"
73
- />
74
- <button @click="handleClick">Get Registry</button>
75
- </template>
98
+ <PDFViewer
99
+ :config="{
100
+ src: '/document.pdf',
101
+ theme: {
102
+ preference: 'system',
103
+ light: {
104
+ accent: {
105
+ primary: '#42b883', // Custom brand color (Vue Green)
106
+ },
107
+ },
108
+ },
109
+ }"
110
+ />
111
+ ```
112
+
113
+ ### Disabling Features
76
114
 
77
- <script setup lang="ts">
78
- import { ref } from 'vue';
79
- import { PDFViewer, type PDFViewerExpose } from '@embedpdf/vue-pdf-viewer';
115
+ Easily customize the UI by disabling features you don't need via the `disabledCategories` option:
80
116
 
81
- const viewerRef = ref<PDFViewerExpose | null>(null);
117
+ ```vue
118
+ <PDFViewer
119
+ :config="{
120
+ src: '/document.pdf',
121
+ disabledCategories: ['annotation', 'print', 'export'],
122
+ }"
123
+ />
124
+ ```
125
+
126
+ Available categories include: `zoom`, `annotation`, `redaction`, `document`, `page`, `panel`, `tools`, `selection`, and `history`.
127
+
128
+ ---
129
+
130
+ ## ⚙️ Configuration Options
131
+
132
+ The `config` prop accepts the following top-level options:
133
+
134
+ | Option | Type | Description |
135
+ | :------------------- | :---------------------------------- | :--------------------------------------------- |
136
+ | `src` | `string` | URL or path to the PDF document. |
137
+ | `theme` | `object` | Theme configuration (preference, overrides). |
138
+ | `tabBar` | `'always' \| 'multiple' \| 'never'` | Control visibility of the document tab bar. |
139
+ | `disabledCategories` | `string[]` | Hide specific UI features by category. |
140
+ | `i18n` | `object` | Configure locales and translations. |
141
+ | `annotations` | `object` | Configure annotation defaults (author, tools). |
142
+ | `zoom` | `object` | Configure default zoom levels and limits. |
143
+ | `scroll` | `object` | Configure scroll direction and logic. |
82
144
 
83
- async function handleClick() {
84
- const registry = await viewerRef.value?.registry;
85
- // Use registry to access plugins
145
+ ---
146
+
147
+ ## 🔌 Events & Registry
148
+
149
+ We emit standard Vue events for initialization and readiness.
150
+
151
+ ```vue
152
+ <template>
153
+ <PDFViewer :config="{ src: '/doc.pdf' }" @ready="onReady" />
154
+ </template>
155
+
156
+ <script setup>
157
+ function onReady(registry) {
158
+ const engine = registry.getEngine();
159
+ console.log('Engine ready:', engine);
86
160
  }
87
161
  </script>
88
162
  ```
89
163
 
90
- ## License
164
+ ### Available Events
165
+
166
+ - `@init` - Emitted when the viewer container is initialized.
167
+ - `@ready` - Emitted when the plugin registry is ready and plugins are loaded.
168
+
169
+ ---
170
+
171
+ ## 🧩 Headless Mode
172
+
173
+ Need complete control over the UI? Building a custom design system?
174
+
175
+ Check out our **Headless Composables** which provide reactive state and logic without the UI:
176
+
177
+ ```bash
178
+ npm install @embedpdf/core @embedpdf/plugin-zoom ...
179
+ ```
180
+
181
+ Read the [Headless Documentation](https://www.embedpdf.com/docs/vue/headless/introduction) for more details.
182
+
183
+ ---
184
+
185
+ ## 📄 License
91
186
 
92
- MIT
187
+ EmbedPDF is [MIT licensed](https://github.com/embedpdf/embed-pdf-viewer/blob/main/LICENSE). Commercial use is welcome—just keep the copyright headers intact.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@embedpdf/vue-pdf-viewer",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "description": "Vue component for embedding PDF documents",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -8,6 +8,7 @@
8
8
  "license": "MIT",
9
9
  "type": "module",
10
10
  "sideEffects": false,
11
+ "homepage": "https://www.embedpdf.com/vue-pdf-viewer",
11
12
  "exports": {
12
13
  ".": {
13
14
  "types": "./dist/index.d.ts",
@@ -20,15 +21,15 @@
20
21
  "README.md"
21
22
  ],
22
23
  "dependencies": {
23
- "@embedpdf/snippet": "2.0.0"
24
+ "@embedpdf/snippet": "2.0.2"
24
25
  },
25
26
  "devDependencies": {
26
- "@vitejs/plugin-vue": "^6.0.0",
27
- "rimraf": "^5.0.5",
27
+ "@vitejs/plugin-vue": "^6.0.3",
28
+ "rimraf": "^6.1.2",
28
29
  "typescript": "^5.1.6",
29
30
  "unplugin-dts": "1.0.0-beta.6",
30
31
  "vite": "^6.3.5",
31
- "vue": "^3.4.0"
32
+ "vue": "^3.5.26"
32
33
  },
33
34
  "peerDependencies": {
34
35
  "vue": ">=3.0.0"