diff --git a/examples/vue-quasar/.browserslistrc b/examples/vue-quasar/.browserslistrc
new file mode 100644
index 00000000..dc3bc09a
--- /dev/null
+++ b/examples/vue-quasar/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
diff --git a/examples/vue-quasar/.editorconfig b/examples/vue-quasar/.editorconfig
new file mode 100644
index 00000000..ecea360f
--- /dev/null
+++ b/examples/vue-quasar/.editorconfig
@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/examples/vue-quasar/.gitignore b/examples/vue-quasar/.gitignore
new file mode 100644
index 00000000..11f5d714
--- /dev/null
+++ b/examples/vue-quasar/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue-quasar/README.md b/examples/vue-quasar/README.md
new file mode 100644
index 00000000..a2129faf
--- /dev/null
+++ b/examples/vue-quasar/README.md
@@ -0,0 +1,118 @@
+<div align="center">
+  <a href="https://www.embedpdf.com">
+    <img alt="EmbedPDF logo" src="https://www.embedpdf.com/logo-192.png" height="96">
+  </a>
+
+  <h1>EmbedPDF</h1>
+
+  <!-- Badges -->
+
+<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>
+<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>
+
+</div>
+
+# Vue Quasar PDF Viewer Example
+
+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.
+
+- **Live demo:** _(coming soon)_
+- **Docs:** [https://www.embedpdf.com](https://www.embedpdf.com)
+
+---
+
+## Key features on display
+
+| Feature                                                    | Plugin(s)                                                                         |
+| ---------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| Virtualised scrolling with smooth page rendering           | `@embedpdf/plugin-scroll` + `@embedpdf/plugin-render` + `@embedpdf/plugin-tiling` |
+| Zoom controls (fit page, fit width, marquee zoom, presets) | `@embedpdf/plugin-zoom`                                                           |
+| Pan/hand tool                                              | `@embedpdf/plugin-pan`                                                            |
+| Rotate pages                                               | `@embedpdf/plugin-rotate`                                                         |
+| Single and spread layouts                                  | `@embedpdf/plugin-spread`                                                         |
+| In‑document text search                                    | `@embedpdf/plugin-search`                                                         |
+| Thumbnail sidebar navigation                               | `@embedpdf/plugin-thumbnail`                                                      |
+| Annotation tools (text, shapes, stamp)                     | `@embedpdf/plugin-annotation`                                                     |
+| Redaction tools (text selection, marquee)                  | `@embedpdf/plugin-redaction`                                                      |
+| File picker, download & print                              | `@embedpdf/plugin-loader`, `@embedpdf/plugin-export`, `@embedpdf/plugin-print`    |
+| Fullscreen support                                         | `@embedpdf/plugin-fullscreen`                                                     |
+
+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.
+
+---
+
+## Quick start
+
+> **Prerequisites**
+>
+> - Node 18 or newer
+> - **pnpm** 10 (recommended) or a recent pnpm 8/9
+
+1.  **Clone the repo** (or your fork) and install dependencies:
+
+    ```bash
+    git clone https://github.com/embedpdf/embed-pdf-viewer.git
+    cd embed-pdf-viewer
+    pnpm install
+    ```
+
+2.  **Build the core packages** once so that the example can import them:
+
+    ```bash
+    pnpm run build --filter "./packages/*"
+    # or keep them rebuilt automatically while you work:
+    pnpm watch build --filter "./packages/*"
+    ```
+
+3.  **Run the example dev server**:
+
+    ```bash
+    pnpm --filter @embedpdf/example-vue-quasar run dev
+    ```
+
+    Vite will start on [http://localhost:3000](http://localhost:3000) and open the browser automatically.
+
+---
+
+## Building a production bundle
+
+To create an optimized build (under `examples/vue-quasar/dist`):
+
+```bash
+pnpm --filter @embedpdf/example-vue-quasar run build
+```
+
+The output is a static site you can deploy to any CDN or static host.
+
+---
+
+## Folder layout
+
+```
+examples/vue-quasar
+├── public/              # Static assets (favicon)
+└── src/
+    ├── components/      # Quasar‑based UI parts (Toolbar, Search, …)
+    │   └── drawer-system/ # Reusable logic for side drawers/bottom sheets
+    ├── plugins/         # Quasar plugin setup
+    ├── App.vue          # Root Vue component
+    ├── Application.vue  # Main viewer shell and plugin wiring
+    └── main.ts          # Vue entry + theming
+```
+
+The PDFium WebAssembly bundle is loaded automatically by the `usePdfiumEngine` hook in `src/Application.vue`, which passes it to EmbedPDF’s **WebWorkerEngine**.
+
+---
+
+## Customisation tips
+
+- **Swap icons or colours:** The UI uses standard Quasar components and props, so styling tweaks are straightforward.
+- **Add or remove plugins:** Open `src/Application.vue` and edit the `plugins` array.
+
+For deep dives, check the [EmbedPDF documentation](https://www.embedpdf.com) and the source of this example.
+
+---
+
+## License
+
+Example code is released under the MIT license, the same as EmbedPDF itself.
diff --git a/examples/vue-quasar/components.d.ts b/examples/vue-quasar/components.d.ts
new file mode 100644
index 00000000..0d251be4
--- /dev/null
+++ b/examples/vue-quasar/components.d.ts
@@ -0,0 +1,26 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {};
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AnnotationSelectionMenu: typeof import('./src/components/AnnotationSelectionMenu.vue')['default']
+    AnnotationToolbar: typeof import('./src/components/AnnotationToolbar.vue')['default']
+    Application: typeof import('./src/components/Application.vue')['default']
+    Drawer: typeof import('./src/components/drawer-system/Drawer.vue')['default']
+    DrawerProvider: typeof import('./src/components/drawer-system/DrawerProvider.vue')['default']
+    DrawerToggleButton: typeof import('./src/components/drawer-system/DrawerToggleButton.vue')['default']
+    PageControls: typeof import('./src/components/PageControls.vue')['default']
+    PrintDialog: typeof import('./src/components/PrintDialog.vue')['default']
+    RedactionSelectionMenu: typeof import('./src/components/RedactionSelectionMenu.vue')['default']
+    RedactToolbar: typeof import('./src/components/RedactToolbar.vue')['default']
+    Search: typeof import('./src/components/Search.vue')['default']
+    Sidebar: typeof import('./src/components/Sidebar.vue')['default']
+    Toolbar: typeof import('./src/components/Toolbar.vue')['default']
+    ZoomControls: typeof import('./src/components/ZoomControls.vue')['default']
+  }
+}
diff --git a/examples/vue-quasar/env.d.ts b/examples/vue-quasar/env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/examples/vue-quasar/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/vue-quasar/index.html b/examples/vue-quasar/index.html
new file mode 100644
index 00000000..c25b2c0c
--- /dev/null
+++ b/examples/vue-quasar/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EmbedPDF + Vue + Quasar</title>
+  </head>
+  <body>
+    <div id="app" style="height: 100dvh;"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue-quasar/package.json b/examples/vue-quasar/package.json
new file mode 100644
index 00000000..7209b1cf
--- /dev/null
+++ b/examples/vue-quasar/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@embedpdf/example-vue-quasar",
+  "private": true,
+  "type": "module",
+  "license": "MIT",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "@embedpdf/core": "workspace:*",
+    "@embedpdf/engines": "workspace:*",
+    "@embedpdf/models": "workspace:*",
+    "@embedpdf/plugin-loader": "workspace:*",
+    "@embedpdf/plugin-viewport": "workspace:*",
+    "@embedpdf/plugin-scroll": "workspace:*",
+    "@embedpdf/plugin-render": "workspace:*",
+    "@embedpdf/plugin-tiling": "workspace:*",
+    "@embedpdf/plugin-interaction-manager": "workspace:*",
+    "@embedpdf/plugin-selection": "workspace:*",
+    "@embedpdf/plugin-rotate": "workspace:*",
+    "@embedpdf/plugin-fullscreen": "workspace:*",
+    "@embedpdf/plugin-zoom": "workspace:*",
+    "@embedpdf/plugin-pan": "workspace:*",
+    "@embedpdf/plugin-export": "workspace:*",
+    "@embedpdf/plugin-spread": "workspace:*",
+    "@embedpdf/plugin-print": "workspace:*",
+    "@embedpdf/plugin-search": "workspace:*",
+    "@embedpdf/plugin-annotation": "workspace:*",
+    "@embedpdf/plugin-redaction": "workspace:*",
+    "@embedpdf/plugin-thumbnail": "workspace:*",
+    "@embedpdf/utils": "workspace:*",
+    "@quasar/extras": "^1.17.0",
+    "quasar": "^2.16.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "@quasar/vite-plugin": "^1.10.0",
+    "npm-run-all2": "^7.0.2",
+    "sass-embedded": "^1.89.2",
+    "typescript": "^5.7.3",
+    "vite": "^6.3.5",
+    "vue-tsc": "^3.0.1"
+  }
+}
diff --git a/examples/vue-quasar/public/favicon.ico b/examples/vue-quasar/public/favicon.ico
new file mode 100644
index 00000000..5ed37164
Binary files /dev/null and b/examples/vue-quasar/public/favicon.ico differ
diff --git a/examples/vue-quasar/src/App.vue b/examples/vue-quasar/src/App.vue
new file mode 100644
index 00000000..1f26297c
--- /dev/null
+++ b/examples/vue-quasar/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <Application />
+</template>
+
+<script setup lang="ts">
+import Application from './components/Application.vue';
+</script>
diff --git a/examples/vue-quasar/src/components/AnnotationSelectionMenu.vue b/examples/vue-quasar/src/components/AnnotationSelectionMenu.vue
new file mode 100644
index 00000000..de602de8
--- /dev/null
+++ b/examples/vue-quasar/src/components/AnnotationSelectionMenu.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useAnnotationCapability } from '@embedpdf/plugin-annotation/vue';
+import type { TrackedAnnotation } from '@embedpdf/plugin-annotation';
+import type { MenuWrapperProps } from '@embedpdf/utils/vue';
+import type { Rect } from '@embedpdf/models';
+
+interface AnnotationSelectionMenuProps {
+  menuWrapperProps: MenuWrapperProps;
+  annotation: TrackedAnnotation;
+  rect: Rect;
+}
+
+const props = defineProps<AnnotationSelectionMenuProps>();
+
+const { provides: annotation } = useAnnotationCapability();
+
+const handleDelete = (e: Event) => {
+  e.stopPropagation();
+  const api = annotation.value;
+  if (!api) return;
+  const { pageIndex, id } = props.annotation.object;
+  api.deleteAnnotation(pageIndex, id);
+};
+</script>
+
+<template>
+  <span v-bind="menuWrapperProps">
+    <q-card
+      flat
+      bordered
+      class="menu-card q-pa-xs"
+      :style="{
+        position: 'absolute',
+        top: `${rect.size.height + 8}px`,
+        left: '0',
+        zIndex: 1000,
+        cursor: 'default',
+        pointerEvents: 'auto',
+      }"
+    >
+      <div class="row items-center q-gutter-xs">
+        <q-btn
+          flat
+          round
+          dense
+          size="sm"
+          icon="mdi-delete-outline"
+          @click="handleDelete"
+          aria-label="Delete annotation"
+        />
+      </div>
+    </q-card>
+  </span>
+</template>
+
+<style scoped>
+.menu-card {
+  min-width: 40px;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/AnnotationToolbar.vue b/examples/vue-quasar/src/components/AnnotationToolbar.vue
new file mode 100644
index 00000000..17f5cca0
--- /dev/null
+++ b/examples/vue-quasar/src/components/AnnotationToolbar.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useAnnotation } from '@embedpdf/plugin-annotation/vue';
+
+const { provides, state } = useAnnotation();
+
+const activeToolId = computed(() => state.value.activeToolId);
+
+const toggleTool = (toolId: string) => {
+  const currentId = activeToolId.value;
+  provides.value?.setActiveTool(currentId === toolId ? null : toolId);
+};
+</script>
+
+<template>
+  <div class="annotation-toolbar bg-white text-dark">
+    <q-toolbar dense class="q-px-md q-gutter-sm justify-center">
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-format-text"
+        :color="activeToolId === 'freeText' ? 'primary' : undefined"
+        @click="toggleTool('freeText')"
+      >
+        <q-tooltip>Free Text</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-gesture"
+        :color="activeToolId === 'ink' ? 'primary' : undefined"
+        @click="toggleTool('ink')"
+      >
+        <q-tooltip>Ink</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-circle-outline"
+        :color="activeToolId === 'circle' ? 'primary' : undefined"
+        @click="toggleTool('circle')"
+      >
+        <q-tooltip>Circle</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-square-outline"
+        :color="activeToolId === 'square' ? 'primary' : undefined"
+        @click="toggleTool('square')"
+      >
+        <q-tooltip>Rectangle</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-arrow-top-right"
+        :color="activeToolId === 'lineArrow' ? 'primary' : undefined"
+        @click="toggleTool('lineArrow')"
+      >
+        <q-tooltip>Arrow</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-check-circle-outline"
+        :color="activeToolId === 'stampApproved' ? 'primary' : undefined"
+        @click="toggleTool('stampApproved')"
+      >
+        <q-tooltip>Approved Stamp</q-tooltip>
+      </q-btn>
+    </q-toolbar>
+  </div>
+</template>
+
+<style scoped>
+.annotation-toolbar {
+  border-bottom: 1px solid #cfd4da;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/Application.vue b/examples/vue-quasar/src/components/Application.vue
new file mode 100644
index 00000000..cf151787
--- /dev/null
+++ b/examples/vue-quasar/src/components/Application.vue
@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { usePdfiumEngine } from '@embedpdf/engines/vue';
+import { EmbedPDF } from '@embedpdf/core/vue';
+import { createPluginRegistration, PluginRegistry } from '@embedpdf/core';
+import { LoaderPluginPackage } from '@embedpdf/plugin-loader/vue';
+import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/vue';
+import { Scroller, ScrollPluginPackage, ScrollStrategy } from '@embedpdf/plugin-scroll/vue';
+import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/vue';
+import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/vue';
+import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/vue';
+import {
+  InteractionManagerPluginPackage,
+  GlobalPointerProvider,
+  PagePointerProvider,
+} from '@embedpdf/plugin-interaction-manager/vue';
+import { RotatePluginPackage } from '@embedpdf/plugin-rotate/vue';
+import { Rotate } from '@embedpdf/plugin-rotate/vue';
+import { FullscreenPluginPackage } from '@embedpdf/plugin-fullscreen/vue';
+import { ZoomMode, ZoomPluginPackage, MarqueeZoom } from '@embedpdf/plugin-zoom/vue';
+import { PanPluginPackage } from '@embedpdf/plugin-pan/vue';
+import { ExportPluginPackage } from '@embedpdf/plugin-export/vue';
+import { SpreadPluginPackage } from '@embedpdf/plugin-spread/vue';
+import { PrintPluginPackage } from '@embedpdf/plugin-print/vue';
+import { SearchPluginPackage, SearchLayer } from '@embedpdf/plugin-search/vue';
+import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/vue';
+import { RedactionPluginPackage, RedactionLayer } from '@embedpdf/plugin-redaction/vue';
+import {
+  AnnotationLayer,
+  AnnotationPluginPackage,
+  AnnotationPlugin,
+} from '@embedpdf/plugin-annotation/vue';
+import type { AnnotationTool } from '@embedpdf/plugin-annotation/vue';
+import { PdfAnnotationSubtype } from '@embedpdf/models';
+import type { PdfStampAnnoObject } from '@embedpdf/models';
+import Toolbar from './Toolbar.vue';
+import PageControls from './PageControls.vue';
+import RedactionSelectionMenu from './RedactionSelectionMenu.vue';
+import AnnotationSelectionMenu from './AnnotationSelectionMenu.vue';
+
+import Search from './Search.vue';
+import Sidebar from './Sidebar.vue';
+
+const leftDrawerOpen = ref(false);
+const rightDrawerOpen = ref(false);
+
+const toggleLeftDrawer = () => {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+  if (leftDrawerOpen.value && rightDrawerOpen.value) {
+    rightDrawerOpen.value = false;
+  }
+};
+
+const toggleRightDrawer = () => {
+  rightDrawerOpen.value = !rightDrawerOpen.value;
+  if (leftDrawerOpen.value && rightDrawerOpen.value) {
+    leftDrawerOpen.value = false;
+  }
+};
+
+const closeDrawers = () => {
+  leftDrawerOpen.value = false;
+  rightDrawerOpen.value = false;
+};
+const { engine, isLoading: engineLoading, error: engineError } = usePdfiumEngine();
+
+const handleInitialized = async (registry: PluginRegistry) => {
+  const annotation = registry.getPlugin<AnnotationPlugin>('annotation')?.provides();
+  annotation?.addTool<AnnotationTool<PdfStampAnnoObject>>({
+    id: 'stampApproved',
+    name: 'Stamp Approved',
+    interaction: {
+      exclusive: false,
+      cursor: 'crosshair',
+    },
+    matchScore: () => 0,
+    defaults: {
+      type: PdfAnnotationSubtype.STAMP,
+      imageSrc:
+        'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Eo_circle_green_checkmark.svg/512px-Eo_circle_green_checkmark.svg.png',
+      imageSize: { width: 20, height: 20 },
+    },
+  });
+};
+</script>
+
+<template>
+  <div class="application fit">
+    <!-- Loading state -->
+    <div v-if="engineLoading" class="state-container column items-center justify-center">
+      <q-spinner size="64px" color="primary" />
+      <div class="text-subtitle1 text-grey-7 q-mt-md">Loading PDF engine...</div>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="engineError" class="state-container column items-center justify-center">
+      <q-banner class="q-ma-md" rounded dense color="negative" text-color="white">
+        <div class="text-subtitle1 text-weight-medium">Error</div>
+        <div class="text-body2 q-mt-xs">{{ engineError.message }}</div>
+      </q-banner>
+    </div>
+
+    <!-- Main application -->
+    <div v-else-if="engine" class="application__root">
+      <div class="application__embed">
+        <EmbedPDF
+          :engine="engine"
+          :on-initialized="handleInitialized"
+          :plugins="[
+          createPluginRegistration(LoaderPluginPackage, {
+            loadingOptions: {
+              type: 'url',
+              pdfFile: {
+                id: 'sample-pdf',
+                name: 'embedpdf-ebook.pdf',
+                url: 'https://snippet.embedpdf.com/ebook.pdf',
+              },
+            },
+          }),
+          createPluginRegistration(ViewportPluginPackage, {
+            viewportGap: 10,
+          }),
+          createPluginRegistration(ScrollPluginPackage, {
+            strategy: ScrollStrategy.Vertical,
+            pageGap: 10,
+          }),
+          createPluginRegistration(RenderPluginPackage),
+          createPluginRegistration(TilingPluginPackage, {
+            tileSize: 768,
+            overlapPx: 2.5,
+            extraRings: 0,
+          }),
+          createPluginRegistration(InteractionManagerPluginPackage),
+          createPluginRegistration(SelectionPluginPackage),
+          createPluginRegistration(RotatePluginPackage),
+          createPluginRegistration(FullscreenPluginPackage),
+          createPluginRegistration(ZoomPluginPackage, {
+            defaultZoomLevel: ZoomMode.FitPage,
+          }),
+          createPluginRegistration(PanPluginPackage),
+          createPluginRegistration(ExportPluginPackage),
+          createPluginRegistration(SpreadPluginPackage),
+          createPluginRegistration(PrintPluginPackage),
+          createPluginRegistration(ThumbnailPluginPackage, {
+            imagePadding: 10,
+            labelHeight: 25,
+          }),
+          createPluginRegistration(SearchPluginPackage, {
+            flags: [],
+            showAllResults: true,
+          }),
+          createPluginRegistration(RedactionPluginPackage),
+          createPluginRegistration(AnnotationPluginPackage),
+        ]"
+        >
+          <template #default="{ pluginsReady }">
+            <div class="application__shell">
+              <Toolbar
+                :left-drawer-open="leftDrawerOpen"
+                :right-drawer-open="rightDrawerOpen"
+                @toggle-left-drawer="toggleLeftDrawer"
+                @toggle-right-drawer="toggleRightDrawer"
+              />
+
+              <div class="application__body">
+                <aside
+                  class="application__drawer application__drawer--left"
+                  :class="{ 'is-open': leftDrawerOpen }"
+                  aria-hidden="true"
+                >
+                  <Sidebar />
+                </aside>
+
+                <div class="application__main">
+                  <GlobalPointerProvider class="application__pointer-provider">
+                    <Viewport class="application__viewport">
+                      <div
+                        v-if="!pluginsReady"
+                        class="state-container column items-center justify-center"
+                      >
+                        <q-spinner size="48px" color="primary" />
+                        <div class="text-body2 text-grey-7 q-mt-sm">Loading plugins...</div>
+                      </div>
+
+                      <Scroller v-else>
+                        <template #default="{ page }">
+                          <Rotate
+                            :key="page.document?.id"
+                            :page-size="{ width: page.width, height: page.height }"
+                          >
+                            <PagePointerProvider
+                              :page-index="page.pageIndex"
+                              :page-width="page.width"
+                              :page-height="page.height"
+                              :rotation="page.rotation"
+                              :scale="page.scale"
+                              class="page-layer"
+                            >
+                              <RenderLayer
+                                :page-index="page.pageIndex"
+                                class="layer"
+                                style="pointer-events: none"
+                              />
+                              <TilingLayer
+                                :page-index="page.pageIndex"
+                                :scale="page.scale"
+                                class="layer"
+                                style="pointer-events: none"
+                              />
+                              <MarqueeZoom :page-index="page.pageIndex" :scale="page.scale" />
+                              <SearchLayer :page-index="page.pageIndex" :scale="page.scale" />
+                              <AnnotationLayer
+                                :page-index="page.pageIndex"
+                                :scale="page.scale"
+                                :page-width="page.width"
+                                :page-height="page.height"
+                                :rotation="page.rotation"
+                              >
+                                <template
+                                  #selection-menu="{ annotation, selected, menuWrapperProps, rect }"
+                                >
+                                  <AnnotationSelectionMenu
+                                    v-if="selected"
+                                    :annotation="annotation"
+                                    :menu-wrapper-props="menuWrapperProps"
+                                    :rect="rect"
+                                  />
+                                </template>
+                              </AnnotationLayer>
+                              <RedactionLayer
+                                :page-index="page.pageIndex"
+                                :scale="page.scale"
+                                :rotation="page.rotation"
+                              >
+                                <template
+                                  #selection-menu="{ item, selected, menuWrapperProps, rect }"
+                                >
+                                  <RedactionSelectionMenu
+                                    v-if="selected"
+                                    :item="item"
+                                    :menu-wrapper-props="menuWrapperProps"
+                                    :rect="rect"
+                                  />
+                                </template>
+                              </RedactionLayer>
+                              <SelectionLayer :page-index="page.pageIndex" :scale="page.scale" />
+                            </PagePointerProvider>
+                          </Rotate>
+                        </template>
+                      </Scroller>
+
+                      <PageControls />
+                    </Viewport>
+                  </GlobalPointerProvider>
+                </div>
+
+                <aside
+                  class="application__drawer application__drawer--right"
+                  :class="{ 'is-open': rightDrawerOpen }"
+                  aria-hidden="true"
+                >
+                  <Search />
+                </aside>
+
+              </div>
+            </div>
+          </template>
+        </EmbedPDF>
+      </div>
+    </div>
+
+    <!-- Engine not ready state -->
+    <div v-else class="state-container column items-center justify-center">
+      <div class="text-body1 text-grey-7 text-center">Engine not ready</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.application {
+  user-select: none;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.application__root {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  height: 100%;
+}
+
+.application__embed {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  height: 100%;
+}
+
+.application__shell {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.application__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.application__drawer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+  background-color: #ffffff;
+  border-right: 1px solid var(--q-color-grey-4);
+  overflow: auto;
+  transform: translateX(-100%);
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  pointer-events: none;
+  opacity: 0;
+  z-index: 2;
+}
+
+.application__drawer--left {
+  left: 0;
+}
+
+.application__drawer--right {
+  right: 0;
+  left: auto;
+  border-right: none;
+  border-left: 1px solid var(--q-color-grey-4);
+  transform: translateX(100%);
+}
+
+.application__drawer.is-open {
+  transform: translateX(0);
+  pointer-events: auto;
+  opacity: 1;
+}
+
+.application__main {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+.application__pointer-provider {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+.application__viewport {
+  flex: 1 1 auto;
+  min-height: 0;
+  background-color: #f5f5f5;
+  overflow: auto;
+  position: relative;
+}
+
+.layer {
+  pointer-events: none;
+}
+
+.page-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.state-container {
+  height: 100%;
+  display: flex;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/PageControls.vue b/examples/vue-quasar/src/components/PageControls.vue
new file mode 100644
index 00000000..ca2eca20
--- /dev/null
+++ b/examples/vue-quasar/src/components/PageControls.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { useViewportCapability } from '@embedpdf/plugin-viewport/vue';
+import { useScroll } from '@embedpdf/plugin-scroll/vue';
+import { ref, computed, watch, onUnmounted } from 'vue';
+
+const { provides: viewport } = useViewportCapability();
+const { provides: scroll, state } = useScroll();
+
+const isVisible = ref(false);
+const isHovering = ref(false);
+const hideTimeoutRef = ref<number | null>(null);
+const inputValue = ref<string>('1');
+
+// Update input value when current page changes
+watch(
+  () => state.value.currentPage,
+  (newPage) => {
+    inputValue.value = newPage.toString();
+  },
+  { immediate: true },
+);
+
+const startHideTimer = () => {
+  if (hideTimeoutRef.value) {
+    clearTimeout(hideTimeoutRef.value);
+  }
+  hideTimeoutRef.value = setTimeout(() => {
+    if (!isHovering.value) {
+      isVisible.value = false;
+    }
+  }, 4000);
+};
+
+// Watch for scroll activity
+watch(
+  viewport,
+  (newViewport) => {
+    if (!newViewport) return;
+
+    return newViewport.onScrollActivity((activity) => {
+      if (activity) {
+        isVisible.value = true;
+        startHideTimer();
+      }
+    });
+  },
+  { immediate: true },
+);
+
+onUnmounted(() => {
+  if (hideTimeoutRef.value) {
+    clearTimeout(hideTimeoutRef.value);
+  }
+});
+
+const handleMouseEnter = () => {
+  isHovering.value = true;
+  isVisible.value = true;
+};
+
+const handleMouseLeave = () => {
+  isHovering.value = false;
+  startHideTimer();
+};
+
+const handlePageSubmit = () => {
+  const page = parseInt(inputValue.value);
+
+  if (!isNaN(page) && page >= 1 && page <= state.value.totalPages && scroll.value) {
+    scroll.value.scrollToPage({
+      pageNumber: page,
+    });
+  }
+};
+
+const handlePreviousPage = () => {
+  if (state.value.currentPage > 1 && scroll.value) {
+    scroll.value.scrollToPage({
+      pageNumber: state.value.currentPage - 1,
+    });
+  }
+};
+
+const handleNextPage = () => {
+  if (state.value.currentPage < state.value.totalPages && scroll.value) {
+    scroll.value.scrollToPage({
+      pageNumber: state.value.currentPage + 1,
+    });
+  }
+};
+
+const handleInputChange = (value: string | number | null) => {
+  // Only allow numeric input
+  const stringValue = value === null ? '' : String(value);
+  const numericValue = stringValue.replace(/[^0-9]/g, '');
+  inputValue.value = numericValue;
+};
+
+const isPreviousDisabled = computed(() => state.value.currentPage === 1);
+const isNextDisabled = computed(() => state.value.currentPage === state.value.totalPages);
+</script>
+<template>
+  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" class="page-controls">
+    <q-card flat bordered class="page-controls-card row items-center q-gutter-sm">
+      <!-- Previous page button -->
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-chevron-left"
+        :disable="isPreviousDisabled"
+        @click="handlePreviousPage"
+      />
+
+      <!-- Page input form -->
+      <form @submit.prevent="handlePageSubmit" class="page-form row items-center q-gutter-xs">
+        <q-input
+          dense
+          outlined
+          class="page-input"
+          input-class="text-center"
+          :model-value="inputValue"
+          @update:model-value="handleInputChange"
+          @keyup.enter.prevent="handlePageSubmit"
+          hide-bottom-space
+        />
+        <span class="page-text">/</span>
+        <span class="page-text">{{ state.totalPages }}</span>
+      </form>
+
+      <!-- Next page button -->
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-chevron-right"
+        :disable="isNextDisabled"
+        @click="handleNextPage"
+      />
+    </q-card>
+  </div>
+</template>
+
+<style scoped>
+.page-controls {
+  position: fixed;
+  left: 50%;
+  bottom: 32px;
+  transform: translateX(-50%);
+  z-index: 1000;
+  opacity: v-bind('isVisible ? 1 : 0');
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.page-controls-card {
+  background-color: #f8f9fa;
+  padding: 6px 10px;
+  border-radius: 10px;
+  pointer-events: auto;
+}
+
+.page-input {
+  width: 48px;
+}
+
+.page-text {
+  color: #6c757d;
+  font-size: 14px;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/PrintDialog.vue b/examples/vue-quasar/src/components/PrintDialog.vue
new file mode 100644
index 00000000..9bcb2c0c
--- /dev/null
+++ b/examples/vue-quasar/src/components/PrintDialog.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { usePrintCapability } from '@embedpdf/plugin-print/vue';
+import { useScroll } from '@embedpdf/plugin-scroll/vue';
+import type { PdfPrintOptions } from '@embedpdf/models';
+
+interface Props {
+  open: boolean;
+}
+
+interface Emits {
+  (e: 'close'): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const { provides: printCapability } = usePrintCapability();
+const { state } = useScroll();
+
+// Dialog state
+type PageSelection = 'all' | 'current' | 'custom';
+const selection = ref<PageSelection>('all');
+const customPages = ref('');
+const includeAnnotations = ref(true);
+const isLoading = ref(false);
+
+const canSubmit = computed(() => {
+  if (isLoading.value) return false;
+  return selection.value !== 'custom' || customPages.value.trim().length > 0;
+});
+
+const pageOptions = computed(() => [
+  { label: 'All pages', value: 'all' as PageSelection },
+  { label: `Current page (${state.value.currentPage})`, value: 'current' as PageSelection },
+  { label: 'Specify pages', value: 'custom' as PageSelection },
+]);
+
+const dialogModel = computed({
+  get: () => props.open,
+  set: (value: boolean) => {
+    if (!value) {
+      handleClose();
+    }
+  },
+});
+
+const handleClose = () => {
+  emit('close');
+  // Reset form when closing
+  selection.value = 'all';
+  customPages.value = '';
+  includeAnnotations.value = true;
+  isLoading.value = false;
+};
+
+const handlePrint = async () => {
+  if (!printCapability.value || !canSubmit.value) return;
+
+  isLoading.value = true;
+
+  let pageRange: string | undefined;
+
+  if (selection.value === 'current') {
+    pageRange = String(state.value.currentPage);
+  } else if (selection.value === 'custom') {
+    pageRange = customPages.value.trim() || undefined;
+  }
+
+  const options: PdfPrintOptions = {
+    includeAnnotations: includeAnnotations.value,
+    pageRange,
+  };
+
+  try {
+    const task = printCapability.value.print(options);
+
+    if (task) {
+      task.wait(
+        () => {
+          handleClose();
+        },
+        (error) => {
+          console.error('Print failed:', error);
+          isLoading.value = false;
+        },
+      );
+    }
+  } catch (err) {
+    console.error('Print failed:', err);
+    isLoading.value = false;
+  }
+};
+</script>
+<template>
+  <q-dialog v-model="dialogModel" persistent>
+    <q-card style="max-width: 500px; width: 100%;">
+      <q-card-section class="text-h6">Print Settings</q-card-section>
+      <q-separator />
+      <q-card-section class="column q-gutter-lg">
+        <!-- Pages to print -->
+        <div class="column q-gutter-sm">
+          <div class="text-subtitle2 text-weight-medium">Pages to print</div>
+          <q-option-group
+            v-model="selection"
+            :options="pageOptions"
+            type="radio"
+            dense
+          />
+          <q-input
+            v-model="customPages"
+            placeholder="e.g., 1-3, 5, 8-10"
+            outlined
+            dense
+            :disable="selection !== 'custom'"
+            hint="Use commas to separate individual pages or ranges."
+            hide-bottom-space
+          />
+          <div v-if="customPages.trim() && state.totalPages > 0" class="text-caption text-grey-7">
+            Total pages in document: {{ state.totalPages }}
+          </div>
+        </div>
+
+        <!-- Include annotations -->
+        <q-checkbox v-model="includeAnnotations" label="Include annotations" dense />
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" :disable="isLoading" @click="handleClose" />
+        <q-btn
+          unelevated
+          color="primary"
+          label="Print"
+          :disable="!canSubmit"
+          :loading="isLoading"
+          @click="handlePrint"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/examples/vue-quasar/src/components/RedactToolbar.vue b/examples/vue-quasar/src/components/RedactToolbar.vue
new file mode 100644
index 00000000..948cff15
--- /dev/null
+++ b/examples/vue-quasar/src/components/RedactToolbar.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { RedactionMode, useRedaction } from '@embedpdf/plugin-redaction/vue';
+
+const { provides, state } = useRedaction();
+
+const handleTextRedact = () => {
+  provides?.value?.toggleRedactSelection();
+};
+
+const handleAreaRedact = () => {
+  provides?.value?.toggleMarqueeRedact();
+};
+
+const handleCommitPending = () => {
+  provides?.value?.commitAllPending();
+};
+
+const handleClearPending = () => {
+  provides?.value?.clearPending();
+};
+</script>
+
+<template>
+  <div class="redact-toolbar text-dark bg-white">
+    <q-toolbar dense class="q-px-md q-gutter-sm justify-center">
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-format-text-variant"
+        :color="state.activeType === RedactionMode.RedactSelection ? 'primary' : undefined"
+        @click="handleTextRedact"
+      >
+        <q-tooltip>Redact Text</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-selection-drag"
+        :color="state.activeType === RedactionMode.MarqueeRedact ? 'primary' : undefined"
+        @click="handleAreaRedact"
+      >
+        <q-tooltip>Marquee Redact</q-tooltip>
+      </q-btn>
+      <q-separator spaced vertical />
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-check"
+        :disable="state.pendingCount === 0"
+        @click="handleCommitPending"
+      >
+        <q-tooltip>Apply Pending Redactions</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-close"
+        :disable="state.pendingCount === 0"
+        @click="handleClearPending"
+      >
+        <q-tooltip>Clear Pending Redactions</q-tooltip>
+      </q-btn>
+    </q-toolbar>
+  </div>
+</template>
+
+<style scoped>
+.redact-toolbar {
+  border-bottom: 1px solid #cfd4da;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/RedactionSelectionMenu.vue b/examples/vue-quasar/src/components/RedactionSelectionMenu.vue
new file mode 100644
index 00000000..1092d15a
--- /dev/null
+++ b/examples/vue-quasar/src/components/RedactionSelectionMenu.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useRedactionCapability } from '@embedpdf/plugin-redaction/vue';
+import type { RedactionItem } from '@embedpdf/plugin-redaction';
+import type { MenuWrapperProps } from '@embedpdf/utils/vue';
+import type { Rect } from '@embedpdf/models';
+
+interface RedactionSelectionMenuProps {
+  menuWrapperProps: MenuWrapperProps;
+  item: RedactionItem;
+  rect: Rect;
+}
+
+const props = defineProps<RedactionSelectionMenuProps>();
+
+const { provides: redaction } = useRedactionCapability();
+
+const handleDelete = (e: Event) => {
+  e.stopPropagation();
+  const api = redaction.value;
+  if (!api) return;
+  const { page, id } = props.item;
+  api.removePending(page, id);
+};
+
+const handleCommit = (e: Event) => {
+  e.stopPropagation();
+  const api = redaction.value;
+  if (!api) return;
+  const { page, id } = props.item;
+  api.commitPending(page, id);
+};
+</script>
+
+<template>
+  <span v-bind="menuWrapperProps">
+    <q-card
+      flat
+      bordered
+      class="menu-card q-pa-xs"
+      :style="{
+        position: 'absolute',
+        top: `${rect.size.height + 8}px`,
+        left: '0',
+        zIndex: 1000,
+        cursor: 'default',
+        pointerEvents: 'auto',
+      }"
+    >
+      <div class="row items-center q-gutter-xs">
+        <q-btn
+          flat
+          round
+          dense
+          size="sm"
+          icon="mdi-delete-outline"
+          @click="handleDelete"
+          aria-label="Delete redaction"
+        />
+        <q-btn
+          flat
+          round
+          dense
+          size="sm"
+          icon="mdi-check"
+          @click="handleCommit"
+          aria-label="Commit redaction"
+        />
+      </div>
+    </q-card>
+  </span>
+</template>
+
+<style scoped>
+.menu-card {
+  min-width: 80px;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/Search.vue b/examples/vue-quasar/src/components/Search.vue
new file mode 100644
index 00000000..5f02b158
--- /dev/null
+++ b/examples/vue-quasar/src/components/Search.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted } from 'vue';
+import { useSearch } from '@embedpdf/plugin-search/vue';
+import { useScrollCapability } from '@embedpdf/plugin-scroll/vue';
+import { MatchFlag } from '@embedpdf/models';
+import type { SearchResult } from '@embedpdf/models';
+import type { QInput } from 'quasar';
+
+const { state, provides } = useSearch();
+const { provides: scroll } = useScrollCapability();
+
+const inputValue = ref(state.value.query || '');
+const inputRef = ref<QInput | null>(null);
+
+// Focus input when component mounts
+onMounted(async () => {
+  await nextTick();
+  inputRef.value?.focus();
+  inputValue.value = state.value.query || '';
+});
+
+// Watch for input changes and trigger search
+watch(inputValue, (newValue) => {
+  if (newValue === '') {
+    provides.value?.stopSearch();
+  } else {
+    provides.value?.searchAllPages(newValue);
+  }
+});
+
+// Auto-scroll to active result when it changes
+watch(
+  () => [state.value.activeResultIndex, state.value.loading, state.value.query, state.value.flags],
+  ([activeIndex]) => {
+    if (typeof activeIndex === 'number' && !state.value.loading) {
+      scrollToItem(activeIndex);
+    }
+  },
+);
+
+const handleFlagChange = (flag: MatchFlag, checked: boolean) => {
+  const currentFlags = state.value.flags;
+  if (checked) {
+    provides.value?.setFlags([...currentFlags, flag]);
+  } else {
+    provides.value?.setFlags(currentFlags.filter((f) => f !== flag));
+  }
+};
+
+const clearInput = () => {
+  inputValue.value = '';
+  inputRef.value?.focus();
+};
+
+const scrollToItem = (index: number) => {
+  const item = state.value.results[index];
+  if (!item) return;
+
+  const minCoordinates = item.rects.reduce(
+    (min, rect) => ({
+      x: Math.min(min.x, rect.origin.x),
+      y: Math.min(min.y, rect.origin.y),
+    }),
+    { x: Infinity, y: Infinity },
+  );
+
+  scroll.value?.scrollToPage({
+    pageNumber: item.pageIndex + 1,
+    pageCoordinates: minCoordinates,
+    center: true,
+  });
+};
+
+const groupByPage = (results: SearchResult[]) => {
+  return results.reduce<Record<number, { hit: SearchResult; index: number }[]>>((map, r, i) => {
+    (map[r.pageIndex] ??= []).push({ hit: r, index: i });
+    return map;
+  }, {});
+};
+
+const grouped = computed(() => groupByPage(state.value.results));
+
+const handleHitClick = (index: number) => {
+  provides.value?.goToResult(index);
+};
+
+const isMatchCaseChecked = computed(() => state.value.flags.includes(MatchFlag.MatchCase));
+
+const isWholeWordChecked = computed(() => state.value.flags.includes(MatchFlag.MatchWholeWord));
+</script>
+<template>
+  <div class="search-container column fit">
+    <!-- Search Input -->
+    <div class="q-pa-md column q-gutter-md">
+      <q-input
+        ref="inputRef"
+        v-model="inputValue"
+        placeholder="Search"
+        dense
+        outlined
+        clearable
+        autocomplete="off"
+        @clear="clearInput"
+      >
+        <template #prepend>
+          <q-icon name="mdi-magnify" />
+        </template>
+      </q-input>
+
+      <!-- Search Options -->
+      <div class="column q-gutter-xs">
+        <q-checkbox
+          :model-value="isMatchCaseChecked"
+          dense
+          label="Case sensitive"
+          @update:model-value="(checked) => handleFlagChange(MatchFlag.MatchCase, !!checked)"
+        />
+        <q-checkbox
+          :model-value="isWholeWordChecked"
+          dense
+          label="Whole word"
+          @update:model-value="(checked) => handleFlagChange(MatchFlag.MatchWholeWord, !!checked)"
+        />
+      </div>
+
+      <q-separator />
+
+      <!-- Results Summary -->
+      <div
+        v-if="state.active && !state.loading"
+        class="row items-center justify-between text-body2"
+      >
+        <q-chip dense color="primary" outline size="sm">
+          {{ state.total }} results found
+        </q-chip>
+        <div v-if="state.total > 1" class="row items-center q-gutter-xs">
+          <q-btn
+            flat
+            round
+            dense
+            icon="mdi-chevron-up"
+            @click="provides?.previousResult()"
+          />
+          <q-btn
+            flat
+            round
+            dense
+            icon="mdi-chevron-down"
+            @click="provides?.nextResult()"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Results List -->
+    <div class="results-list col scroll q-px-md q-pb-md">
+      <div v-if="state.loading" class="column items-center justify-center q-gutter-sm">
+        <q-spinner size="24px" color="primary" />
+        <div class="text-caption text-grey-7">Searching…</div>
+      </div>
+      <div v-else>
+        <div v-for="[page, hits] in Object.entries(grouped)" :key="page" class="q-mb-md">
+          <div class="text-caption text-grey-7 q-mb-sm">Page {{ Number(page) + 1 }}</div>
+          <div class="column q-gutter-sm">
+            <q-card
+              v-for="{ hit, index } in hits"
+              :key="index"
+              clickable
+              flat
+              bordered
+              :class="[
+                'search-result-card',
+                index === state.activeResultIndex ? 'search-result-card--active' : '',
+              ]"
+              @click="handleHitClick(index)"
+            >
+              <q-card-section class="q-pa-sm">
+                <div class="text-body2">
+                  <span v-if="hit.context.truncatedLeft">… </span>
+                  <span>{{ hit.context.before }}</span>
+                  <span class="text-primary text-weight-medium">{{ hit.context.match }}</span>
+                  <span>{{ hit.context.after }}</span>
+                  <span v-if="hit.context.truncatedRight"> …</span>
+                </div>
+              </q-card-section>
+            </q-card>
+          </div>
+        </div>
+        <div v-if="!state.total" class="text-caption text-grey-6">
+          No matches yet — start typing to search the document.
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.search-container {
+  min-height: 0;
+}
+
+.results-list {
+  min-height: 0;
+}
+
+.search-result-card {
+  transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+.search-result-card:hover {
+  transform: translateY(-1px);
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+.search-result-card--active {
+  border-color: var(--q-primary);
+  background-color: rgba(17, 132, 255, 0.08);
+}
+</style>
diff --git a/examples/vue-quasar/src/components/Sidebar.vue b/examples/vue-quasar/src/components/Sidebar.vue
new file mode 100644
index 00000000..d64d5ac8
--- /dev/null
+++ b/examples/vue-quasar/src/components/Sidebar.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ThumbnailsPane, ThumbImg } from '@embedpdf/plugin-thumbnail/vue';
+import { useScroll } from '@embedpdf/plugin-scroll/vue';
+
+const { provides: scroll, state } = useScroll();
+
+const getIsActive = (pageIndex: number) =>
+  computed(() => state.value.currentPage === pageIndex + 1);
+
+const handleClick = (pageIndex: number) => {
+  scroll.value?.scrollToPage({
+    pageNumber: pageIndex + 1,
+    behavior: 'smooth',
+  });
+};
+</script>
+
+<template>
+  <div class="sidebar">
+    <ThumbnailsPane class="thumbs-viewport" :style="{ width: '100%', height: '100%' }">
+      <template #default="{ meta }">
+        <div
+          class="thumb-row"
+          :class="{ active: getIsActive(meta.pageIndex).value }"
+          :style="{
+            position: 'absolute',
+            top: meta.top + 'px',
+            left: 0,
+            right: 0,
+            height: meta.wrapperHeight + 'px',
+          }"
+          @click="handleClick(meta.pageIndex)"
+        >
+          <div
+            class="thumb-img-wrapper"
+            :style="{
+              padding: (meta.padding || 0) + 'px',
+              boxSizing: 'content-box',
+            }"
+          >
+            <ThumbImg
+              class="thumb-img"
+              :meta="meta"
+              :style="{
+                width: meta.width + 'px',
+                height: meta.height + 'px',
+                display: 'block',
+              }"
+            />
+          </div>
+          <div class="thumb-label" :style="{ height: meta.labelHeight + 'px' }">
+            Page {{ meta.pageIndex + 1 }}
+          </div>
+        </div>
+      </template>
+    </ThumbnailsPane>
+  </div>
+</template>
+
+<style scoped>
+.sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.thumbs-viewport {
+  position: relative;
+}
+
+.thumb-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
+}
+
+.thumb-row:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.thumb-row.active {
+  background: rgba(17, 132, 255, 0.1);
+  background: color-mix(in srgb, var(--q-primary) 15%, transparent);
+  border-left-color: var(--q-primary);
+}
+
+.thumb-img-wrapper {
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.thumb-img {
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.08) inset,
+    0 1px 2px rgba(0, 0, 0, 0.12);
+}
+
+.thumb-label {
+  font-size: 12px;
+  line-height: 16px;
+  color: rgba(0, 0, 0, 0.54);
+}
+</style>
diff --git a/examples/vue-quasar/src/components/Toolbar.vue b/examples/vue-quasar/src/components/Toolbar.vue
new file mode 100644
index 00000000..35526b6c
--- /dev/null
+++ b/examples/vue-quasar/src/components/Toolbar.vue
@@ -0,0 +1,331 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useFullscreen } from '@embedpdf/plugin-fullscreen/vue';
+import { usePan } from '@embedpdf/plugin-pan/vue';
+import { useRotateCapability } from '@embedpdf/plugin-rotate/vue';
+import { useExportCapability } from '@embedpdf/plugin-export/vue';
+import { useLoaderCapability } from '@embedpdf/plugin-loader/vue';
+import { useSpread, SpreadMode } from '@embedpdf/plugin-spread/vue';
+import { useInteractionManager } from '@embedpdf/plugin-interaction-manager/vue';
+import PrintDialog from './PrintDialog.vue';
+import ZoomControls from './ZoomControls.vue';
+import AnnotationToolbar from './AnnotationToolbar.vue';
+import RedactToolbar from './RedactToolbar.vue';
+
+const props = defineProps<{
+  leftDrawerOpen: boolean;
+  rightDrawerOpen: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: 'toggle-left-drawer'): void;
+  (event: 'toggle-right-drawer'): void;
+}>();
+
+const { provides: fullscreenProvider, state: fullscreenState } = useFullscreen();
+const { provides: panProvider, isPanning } = usePan();
+const { provides: rotateProvider } = useRotateCapability();
+const { provides: exportProvider } = useExportCapability();
+const { provides: loaderProvider } = useLoaderCapability();
+const { spreadMode, provides: spreadProvider } = useSpread();
+const { provides: pointerProvider, state: interactionManagerState } = useInteractionManager();
+
+// Menu state
+const mainMenuOpen = ref(false);
+const pageSettingsMenuOpen = ref(false);
+const printDialogOpen = ref(false);
+const mode = ref<'view' | 'annotate' | 'redact'>('view');
+
+const handleFullscreenToggle = () => {
+  fullscreenProvider?.value?.toggleFullscreen();
+  mainMenuOpen.value = false;
+  pageSettingsMenuOpen.value = false;
+};
+
+const handlePanMode = () => {
+  panProvider?.value?.togglePan();
+};
+
+const handlePointerMode = () => {
+  pointerProvider?.value?.activate('pointerMode');
+};
+
+const handleRotateForward = () => {
+  rotateProvider?.value?.rotateForward();
+  pageSettingsMenuOpen.value = false;
+};
+
+const handleRotateBackward = () => {
+  rotateProvider?.value?.rotateBackward();
+  pageSettingsMenuOpen.value = false;
+};
+
+const handleDownload = () => {
+  exportProvider?.value?.download();
+  mainMenuOpen.value = false;
+};
+
+const handleOpenFilePicker = () => {
+  loaderProvider?.value?.openFileDialog();
+  mainMenuOpen.value = false;
+};
+
+const handleSpreadModeChange = (mode: SpreadMode) => {
+  spreadProvider?.value?.setSpreadMode(mode);
+  pageSettingsMenuOpen.value = false;
+};
+
+const handlePrint = () => {
+  printDialogOpen.value = true;
+  mainMenuOpen.value = false;
+};
+
+const handlePrintDialogClose = () => {
+  printDialogOpen.value = false;
+};
+</script>
+
+<template>
+  <div class="toolbar bg-white text-dark">
+    <div class="toolbar__inner row items-center no-wrap q-px-md q-gutter-sm">
+      <!-- Main Menu -->
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-menu"
+        :color="mainMenuOpen ? 'primary' : undefined"
+      >
+        <q-menu v-model="mainMenuOpen" anchor="bottom left" self="top left">
+          <q-list dense padding class="q-py-sm">
+            <q-item clickable @click="handleOpenFilePicker">
+              <q-item-section avatar>
+                <q-icon name="mdi-file-document-outline" />
+              </q-item-section>
+              <q-item-section>Open File</q-item-section>
+            </q-item>
+            <q-item clickable @click="handleDownload">
+              <q-item-section avatar>
+                <q-icon name="mdi-download-outline" />
+              </q-item-section>
+              <q-item-section>Download</q-item-section>
+            </q-item>
+            <q-item clickable @click="handlePrint">
+              <q-item-section avatar>
+                <q-icon name="mdi-printer-outline" />
+              </q-item-section>
+              <q-item-section>Print</q-item-section>
+            </q-item>
+            <q-item clickable @click="handleFullscreenToggle">
+              <q-item-section avatar>
+                <q-icon
+                  :name="fullscreenState.isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
+                />
+              </q-item-section>
+              <q-item-section>
+                {{ fullscreenState.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen' }}
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+
+      <q-separator vertical spaced />
+
+      <!-- Sidebar Toggle -->
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-dock-left"
+        :color="props.leftDrawerOpen ? 'primary' : undefined"
+        @click="emit('toggle-left-drawer')"
+      >
+        <q-tooltip>Sidebar</q-tooltip>
+      </q-btn>
+
+      <!-- Page Settings Menu -->
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-cog-outline"
+        :color="pageSettingsMenuOpen ? 'primary' : undefined"
+      >
+        <q-menu v-model="pageSettingsMenuOpen" anchor="bottom left" self="top left">
+          <q-list dense padding class="q-py-sm">
+            <q-item-label header>Page Orientation</q-item-label>
+            <q-item clickable @click="handleRotateForward">
+              <q-item-section avatar>
+                <q-icon name="mdi-rotate-right" />
+              </q-item-section>
+              <q-item-section>Rotate Clockwise</q-item-section>
+            </q-item>
+            <q-item clickable @click="handleRotateBackward">
+              <q-item-section avatar>
+                <q-icon name="mdi-rotate-left" />
+              </q-item-section>
+              <q-item-section>Rotate Counter-clockwise</q-item-section>
+            </q-item>
+
+            <q-separator spaced />
+
+            <q-item-label header>Page Layout</q-item-label>
+            <q-item
+              clickable
+              @click="() => handleSpreadModeChange(SpreadMode.None)"
+              :active="spreadMode === SpreadMode.None"
+              active-class="text-primary"
+            >
+              <q-item-section avatar>
+                <q-icon name="mdi-file-document-outline" />
+              </q-item-section>
+              <q-item-section>Single Page</q-item-section>
+            </q-item>
+            <q-item
+              clickable
+              @click="() => handleSpreadModeChange(SpreadMode.Odd)"
+              :active="spreadMode === SpreadMode.Odd"
+              active-class="text-primary"
+            >
+              <q-item-section avatar>
+                <q-icon name="mdi-book-open-page-variant-outline" />
+              </q-item-section>
+              <q-item-section>Odd Pages</q-item-section>
+            </q-item>
+            <q-item
+              clickable
+              @click="() => handleSpreadModeChange(SpreadMode.Even)"
+              :active="spreadMode === SpreadMode.Even"
+              active-class="text-primary"
+            >
+              <q-item-section avatar>
+                <q-icon name="mdi-book-open-outline" />
+              </q-item-section>
+              <q-item-section>Even Pages</q-item-section>
+            </q-item>
+
+            <q-separator spaced />
+
+            <q-item clickable @click="handleFullscreenToggle">
+              <q-item-section avatar>
+                <q-icon
+                  :name="fullscreenState.isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
+                />
+              </q-item-section>
+              <q-item-section>
+                {{ fullscreenState.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen' }}
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+
+      <q-separator vertical spaced />
+
+      <!-- Zoom Controls -->
+      <ZoomControls />
+
+      <q-separator vertical spaced />
+
+      <!-- Pan Mode -->
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-hand-back-left-outline"
+        :color="isPanning ? 'primary' : undefined"
+        @click="handlePanMode"
+      >
+        <q-tooltip>Pan Mode</q-tooltip>
+      </q-btn>
+
+      <!-- Pointer Mode -->
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-cursor-default-outline"
+        :color="interactionManagerState.activeMode === 'pointerMode' ? 'primary' : undefined"
+        @click="handlePointerMode"
+      >
+        <q-tooltip>Pointer Mode</q-tooltip>
+      </q-btn>
+
+      <q-space />
+
+      <div class="mode-tabs-container">
+        <q-tabs
+          v-model="mode"
+          dense
+          shrink
+          indicator-color="primary"
+          active-color="primary"
+          class="mode-tabs"
+        >
+          <q-tab name="view" label="View" />
+          <q-tab name="annotate" label="Annotate" />
+          <q-tab name="redact" label="Redact" />
+        </q-tabs>
+      </div>
+
+      <q-space />
+
+      <!-- Search Toggle -->
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-magnify"
+        :color="props.rightDrawerOpen ? 'primary' : undefined"
+        @click="emit('toggle-right-drawer')"
+      >
+        <q-tooltip>Search</q-tooltip>
+      </q-btn>
+    </div>
+    <div v-if="mode === 'annotate'" class="toolbar__secondary">
+      <div class="toolbar__secondary-inner">
+        <AnnotationToolbar />
+      </div>
+    </div>
+    <div v-else-if="mode === 'redact'" class="toolbar__secondary">
+      <div class="toolbar__secondary-inner">
+        <RedactToolbar />
+      </div>
+    </div>
+    <PrintDialog :open="printDialogOpen" @close="handlePrintDialogClose" />
+  </div>
+</template>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--q-color-grey-4);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.toolbar__inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 56px;
+  flex-wrap: nowrap;
+}
+
+.toolbar__secondary {
+  border-top: 1px solid var(--q-color-grey-4);
+  padding: 8px 16px;
+}
+
+.toolbar__secondary-inner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mode-tabs-container {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/ZoomControls.vue b/examples/vue-quasar/src/components/ZoomControls.vue
new file mode 100644
index 00000000..eb8e819c
--- /dev/null
+++ b/examples/vue-quasar/src/components/ZoomControls.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useZoom, ZoomMode } from '@embedpdf/plugin-zoom/vue';
+import type { ZoomLevel } from '@embedpdf/plugin-zoom';
+import { useInteractionManager } from '@embedpdf/plugin-interaction-manager/vue';
+
+interface ZoomModeItem {
+  value: ZoomLevel;
+  label: string;
+  icon: string;
+}
+
+interface ZoomPresetItem {
+  value: number;
+  label: string;
+}
+
+const ZOOM_PRESETS: ZoomPresetItem[] = [
+  { value: 0.5, label: '50%' },
+  { value: 1, label: '100%' },
+  { value: 1.5, label: '150%' },
+  { value: 2, label: '200%' },
+  { value: 4, label: '400%' },
+  { value: 8, label: '800%' },
+  { value: 16, label: '1600%' },
+];
+
+const ZOOM_MODES: ZoomModeItem[] = [
+  { value: ZoomMode.FitPage, label: 'Fit to Page', icon: 'mdi-fit-to-page-outline' },
+  { value: ZoomMode.FitWidth, label: 'Fit to Width', icon: 'mdi-arrow-expand-horizontal' },
+];
+
+const { state: zoomState, provides: zoomProvider } = useZoom();
+const { state: interactionManagerState } = useInteractionManager();
+
+const menuOpen = ref(false);
+
+const zoomPercentage = computed(() => Math.round(zoomState.value.currentZoomLevel * 100));
+
+const handleMenuItemClick = (value: ZoomLevel) => {
+  zoomProvider.value?.requestZoom(value);
+  menuOpen.value = false;
+};
+
+const handleToggleMarqueeZoom = () => {
+  zoomProvider.value?.toggleMarqueeZoom();
+  menuOpen.value = false;
+};
+
+const handleZoomIn = () => {
+  zoomProvider.value?.zoomIn();
+};
+
+const handleZoomOut = () => {
+  zoomProvider.value?.zoomOut();
+};
+
+const isPresetSelected = (value: number) => {
+  return Math.abs(zoomState.value.currentZoomLevel - value) < 0.01;
+};
+
+const isModeSelected = (value: ZoomLevel) => {
+  return zoomState.value.zoomLevel === value;
+};
+
+const isMarqueeZoomActive = computed(() => {
+  return interactionManagerState.value.activeMode === 'marqueeZoom';
+});
+</script>
+<template>
+  <div class="zoom-controls row items-center q-gutter-xs">
+    <!-- Zoom Level Display with Menu -->
+    <q-btn
+      flat
+      dense
+      class="zoom-display-btn row items-center no-wrap"
+      :color="menuOpen ? 'primary' : undefined"
+    >
+      <span class="zoom-level">{{ zoomPercentage }}%</span>
+      <q-icon
+        size="16px"
+        name="mdi-chevron-down"
+        :class="{ 'menu-arrow': true, 'menu-arrow-open': menuOpen }"
+      />
+      <q-menu v-model="menuOpen" anchor="bottom left" self="top left">
+        <q-list dense padding class="zoom-menu">
+          <!-- Zoom Presets -->
+          <q-item
+            v-for="preset in ZOOM_PRESETS"
+            :key="preset.value"
+            clickable
+            :active="isPresetSelected(preset.value)"
+            active-class="text-primary"
+            @click="() => handleMenuItemClick(preset.value)"
+          >
+            <q-item-section>{{ preset.label }}</q-item-section>
+          </q-item>
+
+          <q-separator spaced />
+
+          <!-- Zoom Modes -->
+          <q-item
+            v-for="mode in ZOOM_MODES"
+            :key="mode.value"
+            clickable
+            :active="isModeSelected(mode.value)"
+            active-class="text-primary"
+            @click="() => handleMenuItemClick(mode.value)"
+          >
+            <q-item-section avatar>
+              <q-icon :name="mode.icon" />
+            </q-item-section>
+            <q-item-section>{{ mode.label }}</q-item-section>
+          </q-item>
+
+          <q-separator spaced />
+
+          <!-- Marquee Zoom -->
+          <q-item
+            clickable
+            :active="isMarqueeZoomActive"
+            active-class="text-primary"
+            @click="handleToggleMarqueeZoom"
+          >
+            <q-item-section avatar>
+              <q-icon name="mdi-crop-free" />
+            </q-item-section>
+            <q-item-section>Marquee Zoom</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
+
+    <!-- Zoom Out Button -->
+    <q-btn flat round dense icon="mdi-minus-circle-outline" @click="handleZoomOut">
+      <q-tooltip>Zoom Out</q-tooltip>
+    </q-btn>
+
+    <!-- Zoom In Button -->
+    <q-btn flat round dense icon="mdi-plus-circle-outline" @click="handleZoomIn">
+      <q-tooltip>Zoom In</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+
+<style scoped>
+.zoom-controls {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 6px;
+  padding: 2px 6px;
+}
+
+.zoom-display-btn {
+  min-width: auto;
+  padding: 0 8px;
+  height: 32px;
+}
+
+.zoom-level {
+  font-size: 14px;
+  font-weight: 500;
+  margin-right: 4px;
+}
+
+.menu-arrow {
+  transition: transform 0.2s ease;
+}
+
+.menu-arrow-open {
+  transform: rotate(180deg);
+}
+
+.zoom-menu {
+  min-width: 200px;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/drawer-system/Drawer.vue b/examples/vue-quasar/src/components/drawer-system/Drawer.vue
new file mode 100644
index 00000000..79dcaf87
--- /dev/null
+++ b/examples/vue-quasar/src/components/drawer-system/Drawer.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { inject, computed, ref } from 'vue';
+import { useQuasar } from 'quasar';
+import type { DrawerComponent, DrawerPosition, DrawerState } from './types';
+
+interface Props {
+  position: DrawerPosition;
+  width?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 320,
+});
+
+const $q = useQuasar();
+const expanded = ref(false);
+
+const drawerContext = inject('drawerContext') as {
+  registeredComponents: { value: DrawerComponent[] };
+  drawerStates: Record<DrawerPosition, DrawerState>;
+  showComponent: (id: string) => void;
+  hideComponent: (position: DrawerPosition) => void;
+  getActiveComponent: (position: DrawerPosition) => DrawerComponent | null;
+};
+
+const isMobile = computed(() => $q.screen.lt.md);
+const isOpen = computed(() => drawerContext.drawerStates[props.position].isOpen);
+const activeComponent = computed(() => drawerContext.getActiveComponent(props.position));
+
+const mobileModel = computed({
+  get: () => isOpen.value,
+  set: (value: boolean) => {
+    if (!value) {
+      handleClose();
+    }
+  },
+});
+
+const desktopModel = computed({
+  get: () => isOpen.value,
+  set: (value: boolean) => {
+    if (!value) {
+      handleClose();
+    }
+  },
+});
+
+const handleClose = () => {
+  expanded.value = false;
+  drawerContext.hideComponent(props.position);
+};
+
+const toggleExpanded = () => {
+  expanded.value = !expanded.value;
+};
+</script>
+
+<template>
+  <!-- Mobile Bottom Sheet -->
+  <q-dialog
+    v-if="isMobile"
+    v-model="mobileModel"
+    position="bottom"
+    :maximized="expanded"
+    transition-show="jump-up"
+    transition-hide="jump-down"
+    class="drawer-mobile"
+  >
+    <q-card
+      class="column full-height"
+      :style="{ height: expanded ? '100vh' : '55vh' }"
+    >
+      <div class="drawer-mobile__header row items-center justify-between q-pa-md">
+        <div class="row items-center">
+          <div class="drawer-grip q-mx-auto" @click="toggleExpanded" />
+          <span v-if="activeComponent" class="q-ml-md text-subtitle1">
+            {{ activeComponent.label }}
+          </span>
+        </div>
+        <q-btn flat round dense icon="mdi-close" @click="handleClose" />
+      </div>
+      <q-separator />
+      <div class="drawer-mobile__content col scroll">
+        <component
+          v-if="activeComponent"
+          :is="activeComponent.component"
+          v-bind="activeComponent.props || {}"
+        />
+      </div>
+    </q-card>
+  </q-dialog>
+
+  <!-- Desktop Side Drawer -->
+  <q-drawer
+    v-else
+    v-model="desktopModel"
+    :side="position"
+    :width="width"
+    bordered
+    behavior="desktop"
+    class="drawer-desktop"
+  >
+    <div v-if="activeComponent" class="column fit">
+      <q-toolbar class="bg-grey-2 text-weight-medium drawer-desktop__toolbar">
+        <q-toolbar-title class="text-subtitle1">
+          {{ activeComponent.label }}
+        </q-toolbar-title>
+        <q-btn flat round dense icon="mdi-close" @click="handleClose" />
+      </q-toolbar>
+      <q-separator />
+      <div class="drawer-desktop__content col scroll">
+        <component :is="activeComponent.component" v-bind="activeComponent.props || {}" />
+      </div>
+    </div>
+  </q-drawer>
+</template>
+
+<style scoped>
+.drawer-desktop {
+  transition: width 0.2s ease;
+}
+
+.drawer-desktop__toolbar {
+  min-height: 48px;
+}
+
+.drawer-desktop__content {
+  padding: 0;
+}
+
+.drawer-mobile__header {
+  min-height: 48px;
+}
+
+.drawer-mobile__content {
+  padding: 0 16px 16px;
+}
+
+.drawer-grip {
+  width: 32px;
+  height: 4px;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.drawer-grip:hover {
+  opacity: 0.6;
+}
+</style>
diff --git a/examples/vue-quasar/src/components/drawer-system/DrawerProvider.vue b/examples/vue-quasar/src/components/drawer-system/DrawerProvider.vue
new file mode 100644
index 00000000..3dd62871
--- /dev/null
+++ b/examples/vue-quasar/src/components/drawer-system/DrawerProvider.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { provide, reactive, computed } from 'vue';
+import { useQuasar } from 'quasar';
+import type { DrawerComponent, DrawerPosition, DrawerState } from './types';
+
+interface Props {
+  components: DrawerComponent[];
+}
+
+const props = defineProps<Props>();
+
+const $q = useQuasar();
+const isMobile = computed(() => $q.screen.lt.md);
+
+const drawerStates = reactive<Record<DrawerPosition, DrawerState>>({
+  left: { isOpen: false, activeComponentId: null },
+  right: { isOpen: false, activeComponentId: null },
+});
+
+const registeredComponents = computed(() => props.components);
+
+const showComponent = (id: string) => {
+  const component = registeredComponents.value.find((c) => c.id === id);
+  if (!component) return;
+
+  // If we're on mobile, close every drawer first
+  if (isMobile.value) {
+    drawerStates.left = { isOpen: false, activeComponentId: null };
+    drawerStates.right = { isOpen: false, activeComponentId: null };
+  }
+
+  drawerStates[component.position] = { isOpen: true, activeComponentId: id };
+};
+
+const hideComponent = (position: DrawerPosition) => {
+  drawerStates[position] = {
+    isOpen: false,
+    activeComponentId: null,
+  };
+};
+
+const getActiveComponent = (position: DrawerPosition): DrawerComponent | null => {
+  const activeId = drawerStates[position].activeComponentId;
+  return registeredComponents.value.find((comp) => comp.id === activeId) || null;
+};
+
+// Provide the drawer context
+provide('drawerContext', {
+  registeredComponents,
+  drawerStates,
+  showComponent,
+  hideComponent,
+  getActiveComponent,
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/examples/vue-quasar/src/components/drawer-system/DrawerToggleButton.vue b/examples/vue-quasar/src/components/drawer-system/DrawerToggleButton.vue
new file mode 100644
index 00000000..77a63edc
--- /dev/null
+++ b/examples/vue-quasar/src/components/drawer-system/DrawerToggleButton.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { inject, computed } from 'vue';
+import type { DrawerComponent, DrawerPosition, DrawerState } from './types';
+
+interface Props {
+  componentId: string;
+}
+
+const props = defineProps<Props>();
+
+const drawerContext = inject('drawerContext') as {
+  registeredComponents: { value: DrawerComponent[] };
+  drawerStates: Record<DrawerPosition, DrawerState>;
+  showComponent: (id: string) => void;
+  hideComponent: (position: DrawerPosition) => void;
+  getActiveComponent: (position: DrawerPosition) => DrawerComponent | null;
+};
+
+const component = computed(() =>
+  drawerContext.registeredComponents.value.find((comp) => comp.id === props.componentId),
+);
+
+const isThisComponentOpen = computed(() => {
+  if (!component.value) return false;
+  const { isOpen, activeComponentId } = drawerContext.drawerStates[component.value.position];
+  return isOpen && activeComponentId === props.componentId;
+});
+
+const handleToggle = () => {
+  if (!component.value) return;
+
+  if (isThisComponentOpen.value) {
+    drawerContext.hideComponent(component.value.position);
+  } else {
+    drawerContext.showComponent(props.componentId);
+  }
+};
+</script>
+
+<template>
+  <q-btn
+    v-if="component"
+    flat
+    round
+    dense
+    :color="isThisComponentOpen ? 'primary' : undefined"
+    size="sm"
+    :icon="component.icon"
+    @click="handleToggle"
+  >
+    <q-tooltip>{{ component.label }}</q-tooltip>
+  </q-btn>
+</template>
diff --git a/examples/vue-quasar/src/components/drawer-system/types.ts b/examples/vue-quasar/src/components/drawer-system/types.ts
new file mode 100644
index 00000000..d4f8c926
--- /dev/null
+++ b/examples/vue-quasar/src/components/drawer-system/types.ts
@@ -0,0 +1,15 @@
+export type DrawerPosition = 'left' | 'right';
+
+export interface DrawerComponent {
+  id: string;
+  component: any; // Vue component
+  icon: string; // Material Design Icon name
+  label: string;
+  position: DrawerPosition;
+  props?: Record<string, any>;
+}
+
+export interface DrawerState {
+  isOpen: boolean;
+  activeComponentId: string | null;
+}
diff --git a/examples/vue-quasar/src/main.ts b/examples/vue-quasar/src/main.ts
new file mode 100644
index 00000000..ddd108b0
--- /dev/null
+++ b/examples/vue-quasar/src/main.ts
@@ -0,0 +1,20 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Quasar and other plugins then mounts the App.
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins';
+
+// Components
+import App from './App.vue';
+
+// Composables
+import { createApp } from 'vue';
+
+const app = createApp(App);
+
+registerPlugins(app);
+
+app.mount('#app');
diff --git a/examples/vue-quasar/src/plugins/README.md b/examples/vue-quasar/src/plugins/README.md
new file mode 100644
index 00000000..62201c7c
--- /dev/null
+++ b/examples/vue-quasar/src/plugins/README.md
@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
diff --git a/examples/vue-quasar/src/plugins/index.ts b/examples/vue-quasar/src/plugins/index.ts
new file mode 100644
index 00000000..cd1f5a2f
--- /dev/null
+++ b/examples/vue-quasar/src/plugins/index.ts
@@ -0,0 +1,17 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import quasar from './quasar';
+
+// Types
+import type { App } from 'vue';
+
+export function registerPlugins(app: App) {
+  app.use(quasar, {
+    config: {},
+  });
+}
diff --git a/examples/vue-quasar/src/plugins/quasar.ts b/examples/vue-quasar/src/plugins/quasar.ts
new file mode 100644
index 00000000..ac69a55a
--- /dev/null
+++ b/examples/vue-quasar/src/plugins/quasar.ts
@@ -0,0 +1,15 @@
+/**
+ * plugins/quasar.ts
+ *
+ * Framework documentation: https://quasar.dev
+ */
+
+import { Quasar } from 'quasar';
+
+// Base styles + icon sets
+import 'quasar/src/css/index.sass';
+import '@quasar/extras/roboto-font/roboto-font.css';
+import '@quasar/extras/mdi-v7/mdi-v7.css';
+import '@quasar/extras/material-icons/material-icons.css';
+
+export default Quasar;
diff --git a/examples/vue-quasar/tsconfig.app.json b/examples/vue-quasar/tsconfig.app.json
new file mode 100644
index 00000000..e14c754d
--- /dev/null
+++ b/examples/vue-quasar/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/examples/vue-quasar/tsconfig.json b/examples/vue-quasar/tsconfig.json
new file mode 100644
index 00000000..66b5e570
--- /dev/null
+++ b/examples/vue-quasar/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
diff --git a/examples/vue-quasar/tsconfig.node.json b/examples/vue-quasar/tsconfig.node.json
new file mode 100644
index 00000000..5a0c6a54
--- /dev/null
+++ b/examples/vue-quasar/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
diff --git a/examples/vue-quasar/vite.config.mts b/examples/vue-quasar/vite.config.mts
new file mode 100644
index 00000000..375d6382
--- /dev/null
+++ b/examples/vue-quasar/vite.config.mts
@@ -0,0 +1,45 @@
+// Plugins
+import Vue from '@vitejs/plugin-vue'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    quasar(),
+  ],
+  define: { 'process.env': {} },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('src', import.meta.url)),
+    },
+    extensions: [
+      '.js',
+      '.json',
+      '.jsx',
+      '.mjs',
+      '.ts',
+      '.tsx',
+      '.vue',
+    ],
+  },
+  server: {
+    port: 3000,
+  },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        api: 'modern-compiler',
+      },
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08b1016f..df271e68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -304,6 +304,115 @@ importers:
         specifier: ^6.3.5
         version: 6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0)
 
+  examples/vue-quasar:
+    dependencies:
+      '@embedpdf/core':
+        specifier: workspace:*
+        version: link:../../packages/core
+      '@embedpdf/engines':
+        specifier: workspace:*
+        version: link:../../packages/engines
+      '@embedpdf/models':
+        specifier: workspace:*
+        version: link:../../packages/models
+      '@embedpdf/plugin-annotation':
+        specifier: workspace:*
+        version: link:../../packages/plugin-annotation
+      '@embedpdf/plugin-export':
+        specifier: workspace:*
+        version: link:../../packages/plugin-export
+      '@embedpdf/plugin-fullscreen':
+        specifier: workspace:*
+        version: link:../../packages/plugin-fullscreen
+      '@embedpdf/plugin-interaction-manager':
+        specifier: workspace:*
+        version: link:../../packages/plugin-interaction-manager
+      '@embedpdf/plugin-loader':
+        specifier: workspace:*
+        version: link:../../packages/plugin-loader
+      '@embedpdf/plugin-pan':
+        specifier: workspace:*
+        version: link:../../packages/plugin-pan
+      '@embedpdf/plugin-print':
+        specifier: workspace:*
+        version: link:../../packages/plugin-print
+      '@embedpdf/plugin-redaction':
+        specifier: workspace:*
+        version: link:../../packages/plugin-redaction
+      '@embedpdf/plugin-render':
+        specifier: workspace:*
+        version: link:../../packages/plugin-render
+      '@embedpdf/plugin-rotate':
+        specifier: workspace:*
+        version: link:../../packages/plugin-rotate
+      '@embedpdf/plugin-scroll':
+        specifier: workspace:*
+        version: link:../../packages/plugin-scroll
+      '@embedpdf/plugin-search':
+        specifier: workspace:*
+        version: link:../../packages/plugin-search
+      '@embedpdf/plugin-selection':
+        specifier: workspace:*
+        version: link:../../packages/plugin-selection
+      '@embedpdf/plugin-spread':
+        specifier: workspace:*
+        version: link:../../packages/plugin-spread
+      '@embedpdf/plugin-thumbnail':
+        specifier: workspace:*
+        version: link:../../packages/plugin-thumbnail
+      '@embedpdf/plugin-tiling':
+        specifier: workspace:*
+        version: link:../../packages/plugin-tiling
+      '@embedpdf/plugin-viewport':
+        specifier: workspace:*
+        version: link:../../packages/plugin-viewport
+      '@embedpdf/plugin-zoom':
+        specifier: workspace:*
+        version: link:../../packages/plugin-zoom
+      '@embedpdf/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@quasar/extras':
+        specifier: ^1.17.0
+        version: 1.17.0
+      quasar:
+        specifier: ^2.16.0
+        version: 2.18.5
+      vue:
+        specifier: ^3.5.0
+        version: 3.5.17(typescript@5.9.3)
+    devDependencies:
+      '@quasar/vite-plugin':
+        specifier: ^1.10.0
+        version: 1.10.0(@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.9.3)))(quasar@2.18.5)(vite@6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.9.3))
+      '@tsconfig/node22':
+        specifier: ^22.0.0
+        version: 22.0.2
+      '@types/node':
+        specifier: ^22.0.0
+        version: 22.16.4
+      '@vitejs/plugin-vue':
+        specifier: ^5.2.3
+        version: 5.2.4(vite@6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.9.3))
+      '@vue/tsconfig':
+        specifier: ^0.7.0
+        version: 0.7.0(typescript@5.9.3)(vue@3.5.17(typescript@5.9.3))
+      npm-run-all2:
+        specifier: ^7.0.2
+        version: 7.0.2
+      sass-embedded:
+        specifier: ^1.89.2
+        version: 1.91.0
+      typescript:
+        specifier: ^5.7.3
+        version: 5.9.3
+      vite:
+        specifier: ^6.3.5
+        version: 6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0)
+      vue-tsc:
+        specifier: ^3.0.1
+        version: 3.0.6(typescript@5.9.3)
+
   examples/vue-tailwind:
     dependencies:
       '@embedpdf/core':
@@ -3790,6 +3899,18 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
+  '@quasar/extras@1.17.0':
+    resolution: {integrity: sha512-KqAHdSJfIDauiR1nJ8rqHWT0diqD0QradZKoVIZJAilHAvgwyPIY7MbyR2z4RIMkUIMUSqBZcbshMpEw+9A30w==}
+
+  '@quasar/vite-plugin@1.10.0':
+    resolution: {integrity: sha512-4PJoTclz4ZjAfyqe0+hlkKcFJt0e2NX3Ac3hy8ILqUPdtZ24nCo5/xEHvTxZGBQMKRPwwePbO8CVs4n9EKJEug==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@vitejs/plugin-vue': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+      quasar: ^2.16.0
+      vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vue: ^3.0.0
+
   '@react-aria/focus@3.19.1':
     resolution: {integrity: sha512-bix9Bu1Ue7RPcYmjwcjhB14BMu2qzfJ3tMQLqDc9pweJA66nOw8DThy3IfVr8Z7j2PHktOLf9kcbiZpydKHqzg==}
     peerDependencies:
@@ -9000,6 +9121,10 @@ packages:
   quansync@0.2.10:
     resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
 
+  quasar@2.18.5:
+    resolution: {integrity: sha512-5ItDSsNjqBVRrC7SqcdvT1F5mghVyJ/KmaWNwnaT5mM91a7gWpT/d7wTCIFxxDbWLZdkHKI+cpdudEqnfcSw9A==}
+    engines: {node: '>= 10.18.1', npm: '>= 6.13.4', yarn: '>= 1.21.1'}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -12947,6 +13072,15 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
+  '@quasar/extras@1.17.0': {}
+
+  '@quasar/vite-plugin@1.10.0(@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.9.3)))(quasar@2.18.5)(vite@6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.9.3))':
+    dependencies:
+      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0))(vue@3.5.17(typescript@5.9.3))
+      quasar: 2.18.5
+      vite: 6.3.5(@types/node@22.16.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.91.0)(sass@1.91.0)(terser@5.39.0)(yaml@2.8.0)
+      vue: 3.5.17(typescript@5.9.3)
+
   '@react-aria/focus@3.19.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@react-aria/interactions': 3.23.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -14222,6 +14356,11 @@ snapshots:
       typescript: 5.9.2
       vue: 3.5.17(typescript@5.9.2)
 
+  '@vue/tsconfig@0.7.0(typescript@5.9.3)(vue@3.5.17(typescript@5.9.3))':
+    optionalDependencies:
+      typescript: 5.9.3
+      vue: 3.5.17(typescript@5.9.3)
+
   '@vuetify/loader-shared@2.1.1(vue@3.5.17(typescript@5.9.2))(vuetify@3.9.5)':
     dependencies:
       upath: 2.0.1
@@ -19441,6 +19580,8 @@ snapshots:
 
   quansync@0.2.10: {}
 
+  quasar@2.18.5: {}
+
   queue-microtask@1.2.3: {}
 
   railroad-diagrams@1.0.0: {}
@@ -21262,6 +21403,12 @@ snapshots:
       '@vue/language-core': 3.0.6(typescript@5.9.2)
       typescript: 5.9.2
 
+  vue-tsc@3.0.6(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.23
+      '@vue/language-core': 3.0.6(typescript@5.9.3)
+      typescript: 5.9.3
+
   vue@3.5.17(typescript@5.7.3):
     dependencies:
       '@vue/compiler-dom': 3.5.17