Skip to content

Commit da6319b

Browse files
gloratglorat
committed
feat: vue-quasar initial commit
1 parent 6510ee3 commit da6319b

33 files changed

Lines changed: 2356 additions & 0 deletions

‎examples/vue-quasar/.browserslistrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
> 1%
2+
last 2 versions
3+
not dead
4+
not ie 11

‎examples/vue-quasar/.editorconfig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
2+
charset = utf-8
3+
indent_size = 2
4+
indent_style = space
5+
insert_final_newline = true
6+
trim_trailing_whitespace = true

‎examples/vue-quasar/.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?

‎examples/vue-quasar/README.md‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<div align="center">
2+
<a href="https://www.embedpdf.com">
3+
<img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
4+
</a>
5+
6+
<h1>EmbedPDF</h1>
7+
8+
<!-- Badges -->
9+
10+
<a href="https://github.com/embedpdf/embed-pdf-viewer/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/@embedpdf/pdfium.svg?style=for-the-badge&labelColor=000000"></a>
11+
<a href="https://github.com/embedpdf/embed-pdf-viewer/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&labelColor=000000"></a>
12+
13+
</div>
14+
15+
# Vue Quasar PDF Viewer Example
16+
17+
This example shows how to build a fully‑featured PDF viewer with **EmbedPDF**, **Vue 3** and **Quasar 2**. It demonstrates how to combine EmbedPDF’s plugin system with Quasar components to create a polished reading experience that feels right at home in any Vue + Quasar project.
18+
19+
- **Live demo:** _(coming soon)_
20+
- **Docs:** [https://www.embedpdf.com](https://www.embedpdf.com)
21+
22+
---
23+
24+
## Key features on display
25+
26+
| Feature | Plugin(s) |
27+
| ---------------------------------------------------------- | --------------------------------------------------------------------------------- |
28+
| Virtualised scrolling with smooth page rendering | `@embedpdf/plugin-scroll` + `@embedpdf/plugin-render` + `@embedpdf/plugin-tiling` |
29+
| Zoom controls (fit page, fit width, marquee zoom, presets) | `@embedpdf/plugin-zoom` |
30+
| Pan/hand tool | `@embedpdf/plugin-pan` |
31+
| Rotate pages | `@embedpdf/plugin-rotate` |
32+
| Single and spread layouts | `@embedpdf/plugin-spread` |
33+
| In‑document text search | `@embedpdf/plugin-search` |
34+
| Thumbnail sidebar navigation | `@embedpdf/plugin-thumbnail` |
35+
| Annotation tools (text, shapes, stamp) | `@embedpdf/plugin-annotation` |
36+
| Redaction tools (text selection, marquee) | `@embedpdf/plugin-redaction` |
37+
| File picker, download & print | `@embedpdf/plugin-loader`, `@embedpdf/plugin-export`, `@embedpdf/plugin-print` |
38+
| Fullscreen support | `@embedpdf/plugin-fullscreen` |
39+
40+
The UI around these plugins is built with Quasar’s `QHeader`, `QDrawer`, `QMenu`, `QBtn`, and companion components. On mobile, the side drawers collapse into a bottom-sheet style `QDialog` for a more native feel.
41+
42+
---
43+
44+
## Quick start
45+
46+
> **Prerequisites**
47+
>
48+
> - Node 18 or newer
49+
> - **pnpm** 10 (recommended) or a recent pnpm 8/9
50+
51+
1. **Clone the repo** (or your fork) and install dependencies:
52+
53+
```bash
54+
git clone https://github.com/embedpdf/embed-pdf-viewer.git
55+
cd embed-pdf-viewer
56+
pnpm install
57+
```
58+
59+
2. **Build the core packages** once so that the example can import them:
60+
61+
```bash
62+
pnpm run build --filter "./packages/*"
63+
# or keep them rebuilt automatically while you work:
64+
pnpm watch build --filter "./packages/*"
65+
```
66+
67+
3. **Run the example dev server**:
68+
69+
```bash
70+
pnpm --filter @embedpdf/example-vue-quasar run dev
71+
```
72+
73+
Vite will start on [http://localhost:3000](http://localhost:3000) and open the browser automatically.
74+
75+
---
76+
77+
## Building a production bundle
78+
79+
To create an optimized build (under `examples/vue-quasar/dist`):
80+
81+
```bash
82+
pnpm --filter @embedpdf/example-vue-quasar run build
83+
```
84+
85+
The output is a static site you can deploy to any CDN or static host.
86+
87+
---
88+
89+
## Folder layout
90+
91+
```
92+
examples/vue-quasar
93+
├── public/ # Static assets (favicon)
94+
└── src/
95+
├── components/ # Quasar‑based UI parts (Toolbar, Search, …)
96+
│ └── drawer-system/ # Reusable logic for side drawers/bottom sheets
97+
├── plugins/ # Quasar plugin setup
98+
├── App.vue # Root Vue component
99+
├── Application.vue # Main viewer shell and plugin wiring
100+
└── main.ts # Vue entry + theming
101+
```
102+
103+
The PDFium WebAssembly bundle is loaded automatically by the `usePdfiumEngine` hook in `src/Application.vue`, which passes it to EmbedPDF’s **WebWorkerEngine**.
104+
105+
---
106+
107+
## Customisation tips
108+
109+
- **Swap icons or colours:** The UI uses standard Quasar components and props, so styling tweaks are straightforward.
110+
- **Add or remove plugins:** Open `src/Application.vue` and edit the `plugins` array.
111+
112+
For deep dives, check the [EmbedPDF documentation](https://www.embedpdf.com) and the source of this example.
113+
114+
---
115+
116+
## License
117+
118+
Example code is released under the MIT license, the same as EmbedPDF itself.

‎examples/vue-quasar/components.d.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* eslint-disable */
2+
// @ts-nocheck
3+
// Generated by unplugin-vue-components
4+
// Read more: https://github.com/vuejs/core/pull/3399
5+
// biome-ignore lint: disable
6+
export {};
7+
8+
/* prettier-ignore */
9+
declare module 'vue' {
10+
export interface GlobalComponents {
11+
AnnotationSelectionMenu: typeof import('./src/components/AnnotationSelectionMenu.vue')['default']
12+
AnnotationToolbar: typeof import('./src/components/AnnotationToolbar.vue')['default']
13+
Application: typeof import('./src/components/Application.vue')['default']
14+
Drawer: typeof import('./src/components/drawer-system/Drawer.vue')['default']
15+
DrawerProvider: typeof import('./src/components/drawer-system/DrawerProvider.vue')['default']
16+
DrawerToggleButton: typeof import('./src/components/drawer-system/DrawerToggleButton.vue')['default']
17+
PageControls: typeof import('./src/components/PageControls.vue')['default']
18+
PrintDialog: typeof import('./src/components/PrintDialog.vue')['default']
19+
RedactionSelectionMenu: typeof import('./src/components/RedactionSelectionMenu.vue')['default']
20+
RedactToolbar: typeof import('./src/components/RedactToolbar.vue')['default']
21+
Search: typeof import('./src/components/Search.vue')['default']
22+
Sidebar: typeof import('./src/components/Sidebar.vue')['default']
23+
Toolbar: typeof import('./src/components/Toolbar.vue')['default']
24+
ZoomControls: typeof import('./src/components/ZoomControls.vue')['default']
25+
}
26+
}

‎examples/vue-quasar/env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎examples/vue-quasar/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="/favicon.ico">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>EmbedPDF + Vue + Quasar</title>
8+
</head>
9+
<body>
10+
<div id="app" style="height: 100dvh;"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/vue-quasar/package.json‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "@embedpdf/example-vue-quasar",
3+
"private": true,
4+
"type": "module",
5+
"license": "MIT",
6+
"version": "0.0.0",
7+
"scripts": {
8+
"dev": "vite",
9+
"build": "run-p type-check \"build-only {@}\" --",
10+
"preview": "vite preview",
11+
"build-only": "vite build",
12+
"type-check": "vue-tsc --build --force"
13+
},
14+
"dependencies": {
15+
"@embedpdf/core": "workspace:*",
16+
"@embedpdf/engines": "workspace:*",
17+
"@embedpdf/models": "workspace:*",
18+
"@embedpdf/plugin-loader": "workspace:*",
19+
"@embedpdf/plugin-viewport": "workspace:*",
20+
"@embedpdf/plugin-scroll": "workspace:*",
21+
"@embedpdf/plugin-render": "workspace:*",
22+
"@embedpdf/plugin-tiling": "workspace:*",
23+
"@embedpdf/plugin-interaction-manager": "workspace:*",
24+
"@embedpdf/plugin-selection": "workspace:*",
25+
"@embedpdf/plugin-rotate": "workspace:*",
26+
"@embedpdf/plugin-fullscreen": "workspace:*",
27+
"@embedpdf/plugin-zoom": "workspace:*",
28+
"@embedpdf/plugin-pan": "workspace:*",
29+
"@embedpdf/plugin-export": "workspace:*",
30+
"@embedpdf/plugin-spread": "workspace:*",
31+
"@embedpdf/plugin-print": "workspace:*",
32+
"@embedpdf/plugin-search": "workspace:*",
33+
"@embedpdf/plugin-annotation": "workspace:*",
34+
"@embedpdf/plugin-redaction": "workspace:*",
35+
"@embedpdf/plugin-thumbnail": "workspace:*",
36+
"@embedpdf/utils": "workspace:*",
37+
"@quasar/extras": "^1.17.0",
38+
"quasar": "^2.16.0",
39+
"vue": "^3.5.0"
40+
},
41+
"devDependencies": {
42+
"@tsconfig/node22": "^22.0.0",
43+
"@types/node": "^22.9.0",
44+
"@vitejs/plugin-vue": "^5.2.3",
45+
"@vue/tsconfig": "^0.7.0",
46+
"@quasar/vite-plugin": "^1.10.0",
47+
"npm-run-all2": "^7.0.2",
48+
"sass-embedded": "^1.89.2",
49+
"typescript": "^5.7.3",
50+
"vite": "^6.3.5",
51+
"vue-tsc": "^3.0.1"
52+
}
53+
}

‎examples/vue-quasar/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎examples/vue-quasar/src/App.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<Application />
3+
</template>
4+
5+
<script setup lang="ts">
6+
import Application from './components/Application.vue';
7+
</script>

0 commit comments

Comments
 (0)