diff --git a/.github/deploy-vitepress.yml b/.github/deploy-vitepress.yml
new file mode 100644
index 0000000..9ffd9b5
--- /dev/null
+++ b/.github/deploy-vitepress.yml
@@ -0,0 +1,51 @@
+name: Deploy VitePress site to Pages
+
+on:
+  push:
+    branches: [main]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Bun
+      - uses: oven-sh/setup-bun@v1
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: bun install
+      - name: Build with VitePress
+        run: bun run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
index 9b1ee42..3f3b368 100644
--- a/.gitignore
+++ b/.gitignore
@@ -173,3 +173,7 @@ dist
 
 # Finder (MacOS) folder config
 .DS_Store
+
+# Vitepress
+docs/.vitepress/cache
+docs/.vitepress/dist
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index e993453..6b9334c 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
new file mode 100644
index 0000000..438405b
--- /dev/null
+++ b/docs/.vitepress/config.ts
@@ -0,0 +1,47 @@
+import { defineConfig } from "vitepress";
+import { version } from "../../packages/vue/package.json";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "vue-pdfjs",
+  description:
+    "A Vue component for displaying PDF files using the standard `pdf.js` viewer. This package provides a simple and powerful integration to embed PDF viewers in Vue applications.",
+  themeConfig: {
+    logo: { src: "/vue_pdfjs.svg", width: 48, height: 48 },
+
+    nav: [
+      { text: "Home", link: "/" },
+      { text: "Examples", link: "/examples/basic-examples" },
+      {
+        text: `v${version}`,
+        items: [
+          {
+            text: "Changelog",
+            link: "https://github.com/tuttarealstep/vue-pdf.js/releases",
+          },
+        ],
+      },
+    ],
+
+    sidebar: [
+      {
+        text: "Introduction",
+        items: [
+          { text: "Getting Started", link: "/guide/getting-started" },
+          { text: "Composables", link: "/guide/composables" },
+        ],
+      },
+      {
+        text: "Examples",
+        items: [
+          { text: "Basic Examples", link: "/examples/basic-examples" },
+          { text: "Usage with Nuxt", link: "/examples/nuxt-example" },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/tuttarealstep/vue-pdf.js" },
+    ],
+  },
+});
diff --git a/docs/examples/basic-examples.md b/docs/examples/basic-examples.md
new file mode 100644
index 0000000..bfea340
--- /dev/null
+++ b/docs/examples/basic-examples.md
@@ -0,0 +1,129 @@
+# Basic examples
+
+## Use another language
+
+```vue
+<script setup lang="ts">
+import { reactive, useTemplateRef } from "vue";
+import { VuePDFjs, usePDF } from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+
+// 1. Import the FTL file
+import it_FTL from "@tuttarealstep/vue-pdf.js/l10n/it/viewer.ftl?raw";
+
+// 2. Create the options object with the locale property
+const options = reactive<NonNullable<VuePDFjsProps["options"]>>({
+  locale: {
+    code: "it",
+    ftl: it_FTL,
+  },
+});
+
+const { pdf: document, info, pages } = usePDF("<URL_TO_PDF>");
+
+console.log(document, info, pages);
+</script>
+
+<template>
+  <div id="app">
+    <!-- 3. Pass the options object to the VuePDFjs component -->
+    <VuePDFjs :source="document" :options="options" />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```
+
+## Use the PDF.js eventBus
+
+In this example, we use the `pdfApp` property to access the `eventBus` and listen to the `pagesloaded` event. When the event is triggered, we search for a specific text in the document.
+
+```vue
+<script setup lang="ts">
+import { reactive, useTemplateRef } from "vue";
+import { VuePDFjs, usePDF } from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+import enUS_FTL from "@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";
+
+const vuepdfjs = useTemplateRef<typeof VuePDFjs>("vuepdfjs");
+
+const options = reactive<NonNullable<VuePDFjsProps["options"]>>({
+  locale: {
+    code: "en-US",
+    ftl: enUS_FTL,
+  },
+  toolbar: {
+    options: {
+      secondaryOpenFile: false, // Hide the open file button
+    },
+  },
+});
+
+const onPdfAppLoaded = () => {
+  console.log("pdf-app:loaded");
+  console.log(vuepdfjs.value?.pdfApp);
+
+  if (!vuepdfjs.value?.pdfApp) {
+    return;
+  }
+
+  // Wait for the pages to be loaded
+  vuepdfjs.value.pdfApp.eventBus.on("pagesloaded", (e: any) => {
+    // Search for a specific text in the document
+    vuepdfjs.value?.pdfApp.eventBus.dispatch("find", {
+      query: [
+        "Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.",
+      ],
+      caseSensitive: false,
+      entireWord: false,
+      highlightAll: true,
+    });
+  });
+};
+
+const {
+  pdf: document,
+  info,
+  pages,
+} = usePDF("compressed.tracemonkey-pldi-09.pdf");
+
+console.log(document, info, pages);
+</script>
+
+<template>
+  <div id="app">
+    <VuePDFjs
+      ref="vuepdfjs"
+      :source="document"
+      :options="options"
+      @pdf-app:loaded="onPdfAppLoaded"
+    />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```
diff --git a/docs/examples/nuxt-example.md b/docs/examples/nuxt-example.md
new file mode 100644
index 0000000..628b675
--- /dev/null
+++ b/docs/examples/nuxt-example.md
@@ -0,0 +1,118 @@
+# Usage with Nuxt
+
+If you want to use `@tuttarealstep/vue-pdf.js` in a Nuxt project, you can follow these steps.
+
+## Create a "client-only" component
+
+In this example we will use the `@tuttarealstep/vue-pdf.js` component to display a PDF file and highlight some text.
+
+Create a new component in the `components` directory, for example `PDFViewer.client.vue`
+
+```vue
+<script setup lang="ts">
+// 1. Import the component and the styles
+import { VuePDFjs } from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+
+// 2. Import the FTL file
+import it_FTL from "@tuttarealstep/vue-pdf.js/l10n/it/viewer.ftl?raw";
+
+// 3. Define the component props if needed
+const props = defineProps<{
+  source: string;
+  highlightText?: string | string[];
+}>();
+
+// 4. Create the template ref for the VuePDFjs component
+const pdfComponent = useTemplateRef<typeof VuePDFjs>("pdfComponent");
+
+// 5. Create the options object with the locale property
+const options = reactive({
+  locale: {
+    code: "it",
+    ftl: it_FTL,
+  },
+  // You can add more options here
+});
+
+// 6. Create the function to set the highlight
+const setHighlight = (text: string | string[]) => {
+  if (pdfComponent.value && pdfComponent.value.pdfApp) {
+    pdfComponent.value.pdfApp?.eventBus?.dispatch("find", {
+      query: text,
+      caseSensitive: false,
+      entireWord: false,
+      highlightAll: true,
+    });
+  }
+};
+
+// 7. Create the function to listen to the "pagesloaded" event
+const onPdfAppLoaded = () => {
+  if (!pdfComponent.value?.pdfApp) {
+    return;
+  }
+
+  pdfComponent.value.pdfApp.eventBus.on("pagesloaded", (e: any) => {
+    if (props.highlightText) {
+      setHighlight(props.highlightText);
+    }
+  });
+};
+
+// 8. Watch the props to set the highlight
+watch(
+  () => props.highlightText,
+  (newVal) => {
+    if (newVal) setHighlight(newVal);
+  }
+);
+
+// 9. Watch the source prop to set the highlight
+watch(
+  () => props.source,
+  (newVal) => {
+    if (newVal && props.highlightText) setHighlight(props.highlightText);
+  }
+);
+</script>
+<template>
+  <div class="pdf-viewer-container">
+    <VuePDFjs
+      ref="pdfComponent"
+      :source="source"
+      :options="options"
+      @pdf-app:loaded="onPdfAppLoaded"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.pdf-viewer-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+}
+</style>
+```
+
+## Use the component in a page
+
+Now you can use the `PDFViewer.client.vue` component in a Nuxt page.
+
+Create a new page in the `pages` directory, for example `pdf-viewer.vue`
+
+```vue
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const pdfUrl = "<URL_TO_PDF>";
+</script>
+<template>
+  <!-- You can use the component in a client-only block -->
+  <ClientOnly>
+    <PDFViewer :source="pdfUrl" :highlight-text="'text to highlight'" />
+  </ClientOnly>
+</template>
+```
diff --git a/docs/guide/composables.md b/docs/guide/composables.md
new file mode 100644
index 0000000..55ab600
--- /dev/null
+++ b/docs/guide/composables.md
@@ -0,0 +1,93 @@
+# Composables
+
+## `usePDF` composable
+
+The `usePDF` composable provides a way to load and prepare a PDF document for the usage with the `@tuttarealstep/vue-pdf.js` component.
+
+It return the pdf source, the pdf metadata and the number of pages.
+
+```js
+import { usePDF } from "@tuttarealstep/vue-pdf.js";
+
+const { pdf, info, pages } = usePDF("<URL_TO_PDF>");
+```
+
+### Parameters
+
+#### `source`
+
+- Type: `string | URL | TypedArray | ArrayBuffer | DocumentInitParameters | File | Blob | PDFDocumentLoadingTask | undefined | null | ref<string | URL | TypedArray | ArrayBuffer | DocumentInitParameters | File | Blob | PDFDocumentLoadingTask | undefined | null>`
+- Required: `true`
+
+The `DocumentInitParameters` type is defined in the [PDF.js source](https://github.com/mozilla/pdf.js/blob/3634dab10ca7dbaf0ca536f645465b231c88f862/src/display/api.js#L116).
+
+#### `options`
+
+- Type: `object`
+- Required: `false`
+
+The options object can contain the following properties:
+
+- `onProgress`: Callback function to enable progress monitor.
+- `onError`: function to handle errors during the loading of the PDF file.
+- `onPassword`: Callback function to request a password. If not provided, the default behavior is to use the `password` parameter.
+- `password`: The password to use for decrypting the PDF file.
+
+```ts
+function onProgress(progressData: OnProgressParameters) {
+  console.log(`Progress: ${progressData.loaded} / ${progressData.total}`);
+}
+
+function onPassword(updatePassword: UpdatePasswordFn, reason: any) {
+  console.log(`Password required: ${reason}`);
+  updatePassword("<PASSWORD>");
+}
+
+function onError(reason: any) {
+  console.error(`Error: ${reason}`);
+}
+
+const { pdf, info, pages } = usePDF("<URL_TO_PDF>", {
+  onPassword,
+  onProgress,
+  onError,
+});
+```
+
+### Return values
+
+::: info
+All the returned values are [ShallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)
+:::
+
+#### `pdf`
+
+- Type: `ShallowRef<PDFDocumentLoadingTask>`
+
+The PDF document loading task. You can read more about it in the [PDF.js source](https://github.com/mozilla/pdf.js/blob/3634dab10ca7dbaf0ca536f645465b231c88f862/src/display/api.js#L587)
+
+#### `info`
+
+- Type: `ShallowRef<PDFInfo>`
+
+This object represents the information of the PDF document. It contains the following properties:
+
+```ts
+  metadata: PDFInfoMetadata; // Metadata
+  attachments: Record<string, unknown>; // Attachments
+  javascript: string[] | null; // JavaScript objects
+  outline: any; // Outline object
+```
+
+The metadata object contains the following properties:
+
+```ts
+info: any; // PDF informations
+metadata: Metadata; // PDF.js Metadata
+```
+
+#### `pages`
+
+- Type: `ShallowRef<number>`
+
+The number of pages in the PDF document.
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
new file mode 100644
index 0000000..4debdba
--- /dev/null
+++ b/docs/guide/getting-started.md
@@ -0,0 +1,110 @@
+# Getting Started
+
+![npm](https://img.shields.io/npm/v/@tuttarealstep/vue-pdf.js)
+
+![Editor](/editor.png)
+
+## Introduction
+
+`@tuttarealstep/vue-pdf.js` is a Vue 3 client-side component that allow you to display PDF files using the standard [Mozilla's PDF.js viewer](https://github.com/mozilla/pdf.js).
+
+## Installation
+
+::: code-group
+
+```sh [npm]
+$ npm i @tuttarealstep/vue-pdf.js
+```
+
+```sh [bun]
+$ bun add @tuttarealstep/vue-pdf.js
+```
+
+```sh [pnpm]
+$ pnpm add @tuttarealstep/vue-pdf.js
+```
+
+```sh [yarn]
+$ yarn add @tuttarealstep/vue-pdf.js
+```
+
+:::
+
+## Usage
+
+Import the component and pass the PDF file to the `source` prop.
+
+### Basic
+
+```vue
+<script setup lang="ts">
+import { VuePDFjs } from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+
+// Replace <URL_TO_PDF> with the URL to the PDF file or any other source
+const pdf = "<URL_TO_PDF>";
+</script>
+
+<template>
+  <div id="app">
+    <VuePDFjs :source="pdf" />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```
+
+### Using the `usePDF` composable
+
+```vue
+<script setup lang="ts">
+import { reactive } from "vue";
+import { VuePDFjs, usePDF } from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+import enUS_FTL from "@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";
+
+// The composable provides the document, info and pages
+const { pdf, info, pages } = usePDF("<URL_TO_PDF>");
+console.log(document, info, pages);
+
+// Also using the i18n FTL file
+const options = reactive({
+  locale: {
+    code: "en-US",
+    ftl: enUS_FTL,
+  },
+});
+</script>
+
+<template>
+  <div id="app">
+    <VuePDFjs :source="pdf" :options="options" />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..fc5830e
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,52 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "vue-pdfjs"
+  text: "Display PDF files using the standard PDF.js viewer"
+  tagline: This package provides a simple and powerful integration to embed the PDF,js viewer in Vue applications.
+  actions:
+    - theme: brand
+      text: Quick Start
+      link: /guide/getting-started
+    - theme: alt
+      text: Examples
+      link: /examples/basic-examples
+  image:
+    src: /logo.webp
+    alt: "vue-pdfjs"
+
+features:
+  - title: A powerful wrapper
+    icon: 💯
+    details: All the features of the Mozilla's PDF.js viewer are available.
+  - title: Customizable
+    icon: 🎨
+    details: Customize the aspect of the viewer, you can import the default style or create your own.
+  - title: Easy to use
+    icon: 🚀
+    details: Just import the component and pass the PDF file, that's it!
+---
+
+<style>
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(45deg, #3fb984 45%, #31475e);
+
+  --vp-home-hero-image-background-image: linear-gradient(45deg, #3fb984 50%, #31475e 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+</style>
diff --git a/docs/public/editor.png b/docs/public/editor.png
new file mode 100644
index 0000000..149802f
Binary files /dev/null and b/docs/public/editor.png differ
diff --git a/docs/public/logo.webp b/docs/public/logo.webp
new file mode 100644
index 0000000..09160da
Binary files /dev/null and b/docs/public/logo.webp differ
diff --git a/docs/public/vue_pdfjs.svg b/docs/public/vue_pdfjs.svg
new file mode 100644
index 0000000..9aedeb9
--- /dev/null
+++ b/docs/public/vue_pdfjs.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="24" y1="1" x2="24" y2="47" id="gradient-0-0" spreadMethod="pad" xlink:href="#gradient-0"/>
+    <linearGradient id="gradient-0">
+      <stop offset="0" style="stop-color: rgb(66, 184, 131);"/>
+      <stop offset="1" style="stop-color: rgb(53, 73, 94);"/>
+    </linearGradient>
+  </defs>
+  <rect x="8" y="1" width="32" height="46" rx="3.5" ry="3.5" style="paint-order: fill; stroke-miterlimit: 5.03; fill-rule: nonzero; fill: url('#gradient-0-0');"/>
+  <rect x="10" y="3" width="28" height="42" rx="2" ry="2" style="fill: rgb(255, 255, 255);"/>
+  <g transform="matrix(1.1273750066757202, 0, 0, 1.1273750066757202, -6.8706889152526855, 0.5)" style="">
+    <title>vue_logo</title>
+    <path fill="#42b883" d="M 32.816 4.407 L 31.251 7.116 L 29.687 4.407 L 24.477 4.407 L 31.251 16.141 L 38.027 4.407 L 32.816 4.407 Z" style=""/>
+    <path fill="#35495e" d="M 32.816 4.407 L 31.251 7.116 L 29.687 4.407 L 27.187 4.407 L 31.251 11.447 L 35.317 4.407 L 32.816 4.407 Z" style=""/>
+  </g>
+  <rect x="11" width="14.574" height="1" style="fill: rgb(53, 73, 94);" y="20"/>
+  <rect x="11" width="26" height="1" style="fill: rgb(53, 73, 94);" y="23"/>
+  <rect x="11" width="20" height="1" style="fill: rgb(53, 73, 94);" y="26"/>
+  <rect x="11" width="26" height="1" style="fill: rgb(53, 73, 94);" y="29"/>
+  <rect x="11" width="26" height="1" style="fill: rgb(53, 73, 94);" y="32"/>
+  <rect x="11" width="18" height="1" style="fill: rgb(53, 73, 94);" y="35"/>
+  <rect x="11" width="24" height="1" style="fill: rgb(53, 73, 94);" y="38"/>
+  <rect x="11" width="26" height="1" style="fill: rgb(53, 73, 94);" y="41"/>
+  <path d="M 11.38 18 L 11.38 14.51 L 12.63 14.51 Q 13.04 14.51 13.3 14.66 Q 13.57 14.81 13.7 15.06 Q 13.84 15.32 13.84 15.64 Q 13.84 15.96 13.7 16.22 Q 13.57 16.47 13.3 16.62 Q 13.03 16.77 12.63 16.77 L 11.77 16.77 L 11.77 16.33 L 12.58 16.33 Q 12.84 16.33 13 16.24 Q 13.16 16.15 13.23 15.99 Q 13.31 15.84 13.31 15.64 Q 13.31 15.44 13.23 15.29 Q 13.16 15.13 13 15.05 Q 12.83 14.96 12.57 14.96 L 11.91 14.96 L 11.91 18 Z M 15.51 18 L 14.38 18 L 14.38 14.51 L 15.55 14.51 Q 16.06 14.51 16.43 14.72 Q 16.8 14.93 17 15.32 Q 17.19 15.71 17.19 16.25 Q 17.19 16.79 16.99 17.19 Q 16.8 17.58 16.42 17.79 Q 16.05 18 15.51 18 Z M 14.91 17.54 L 15.48 17.54 Q 15.88 17.54 16.15 17.39 Q 16.41 17.24 16.54 16.95 Q 16.67 16.66 16.67 16.25 Q 16.67 15.84 16.54 15.55 Q 16.41 15.27 16.16 15.12 Q 15.9 14.97 15.52 14.97 L 14.91 14.97 Z M 17.38 18 L 17.38 14.51 L 19.55 14.51 L 19.55 14.96 L 17.91 14.96 L 17.91 16.03 L 19.39 16.03 L 19.39 16.48 L 17.91 16.48 L 17.91 18 Z M 20.68 18.03 Q 20.54 18.03 20.44 17.93 Q 20.34 17.83 20.34 17.69 Q 20.34 17.55 20.44 17.45 Q 20.54 17.35 20.68 17.35 Q 20.82 17.35 20.92 17.45 Q 21.02 17.55 21.02 17.69 Q 21.02 17.79 20.97 17.86 Q 20.93 17.94 20.85 17.99 Q 20.77 18.03 20.68 18.03 Z M 21.84 15.38 L 22.35 15.38 L 22.35 18.17 Q 22.35 18.43 22.26 18.61 Q 22.16 18.79 21.98 18.89 Q 21.79 18.98 21.52 18.98 Q 21.49 18.98 21.47 18.98 Q 21.45 18.98 21.42 18.98 L 21.42 18.54 Q 21.44 18.54 21.46 18.54 Q 21.48 18.54 21.5 18.54 Q 21.68 18.54 21.76 18.45 Q 21.84 18.35 21.84 18.17 Z M 22.09 14.98 Q 21.96 14.98 21.87 14.89 Q 21.77 14.8 21.77 14.67 Q 21.77 14.55 21.87 14.46 Q 21.96 14.37 22.09 14.37 Q 22.23 14.37 22.32 14.46 Q 22.42 14.55 22.42 14.67 Q 22.42 14.8 22.32 14.89 Q 22.23 14.98 22.09 14.98 Z M 24.55 16.02 L 24.09 16.1 Q 24.06 16.01 24 15.93 Q 23.94 15.85 23.83 15.8 Q 23.73 15.75 23.57 15.75 Q 23.35 15.75 23.21 15.85 Q 23.06 15.94 23.06 16.1 Q 23.06 16.23 23.16 16.31 Q 23.26 16.39 23.47 16.44 L 23.89 16.53 Q 24.25 16.62 24.43 16.79 Q 24.61 16.97 24.61 17.24 Q 24.61 17.48 24.47 17.66 Q 24.33 17.84 24.09 17.95 Q 23.85 18.05 23.54 18.05 Q 23.1 18.05 22.82 17.86 Q 22.54 17.68 22.48 17.33 L 22.97 17.25 Q 23.02 17.45 23.16 17.54 Q 23.3 17.64 23.53 17.64 Q 23.78 17.64 23.93 17.54 Q 24.08 17.43 24.08 17.28 Q 24.08 17.16 23.99 17.07 Q 23.9 16.99 23.71 16.95 L 23.27 16.85 Q 22.9 16.77 22.73 16.59 Q 22.55 16.4 22.55 16.12 Q 22.55 15.89 22.68 15.72 Q 22.81 15.54 23.04 15.45 Q 23.27 15.35 23.56 15.35 Q 23.99 15.35 24.23 15.53 Q 24.48 15.71 24.55 16.02 Z" style="fill: rgb(53, 73, 94); text-wrap-mode: nowrap;"/>
+</svg>
\ No newline at end of file
diff --git a/package.json b/package.json
index f51e8cb..aec9e9d 100644
--- a/package.json
+++ b/package.json
@@ -6,16 +6,20 @@
   "scripts": {
     "dev": "bun run --cwd ./packages/vue-pdfjs-playground dev",
     "build": "bun run --cwd ./packages/vue build",
-    "test": "bun run --cwd ./packages/vue test"
+    "test": "bun run --cwd ./packages/vue test",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "workspaces": [
     "packages/*"
   ],
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "latest",
+    "vitepress": "^1.5.0"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": "^5.6.3"
   },
   "dependencies": {}
 }
\ No newline at end of file
diff --git a/packages/vue-pdfjs-playground/package.json b/packages/vue-pdfjs-playground/package.json
index 4f4a565..abc1769 100644
--- a/packages/vue-pdfjs-playground/package.json
+++ b/packages/vue-pdfjs-playground/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite --force"
+    "dev": "bun run --cwd ../vue build && vite --force"
   },
   "dependencies": {
     "@tuttarealstep/vue-pdf.js": "file:../vue"
diff --git a/packages/vue-pdfjs-playground/src/App.vue b/packages/vue-pdfjs-playground/src/App.vue
index f2f554c..0b387af 100644
--- a/packages/vue-pdfjs-playground/src/App.vue
+++ b/packages/vue-pdfjs-playground/src/App.vue
@@ -3,15 +3,26 @@ import { reactive, useTemplateRef } from 'vue'
 import { VuePDFjs, usePDF } from '@tuttarealstep/vue-pdf.js'
 import '@tuttarealstep/vue-pdf.js/dist/style.css'
 import enUS_FTL from '@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw'
+import type { VuePDFjsProps } from '../../vue/dist/src/components/VuePDFjs.vue';
 
 const pdf = new URL('./assets/compressed.tracemonkey-pldi-09.pdf', import.meta.url);
 
 const vuepdfjs = useTemplateRef<typeof VuePDFjs>('vuepdfjs')
 
-const options = reactive({
+const options = reactive<NonNullable<VuePDFjsProps['options']>>({
   locale: {
     code: 'en-US',
     ftl: enUS_FTL
+  },
+  toolbar: {
+    options: {
+      secondaryOpenFile: false,
+      /*secondaryDownload: false,
+      secondaryPrint: false,
+      scaleSelect: false,
+      print: false,
+      download: false,*/
+    }
   }
 })
 
@@ -33,13 +44,13 @@ const onPdfAppLoaded = () => {
   })
 }
 
-const { pdf: document, info, pages} = usePDF(pdf)
+const { pdf: document, info, pages } = usePDF(pdf)
 
 console.log(document, info, pages)
 </script>
 
 <template>
-  <div id="app">
+  <div id="playground">
     <VuePDFjs ref="vuepdfjs" :source="document" :options="options" @pdf-app:loaded="onPdfAppLoaded" />
   </div>
 </template>
@@ -47,7 +58,8 @@ console.log(document, info, pages)
 <style>
 html,
 body,
-#app {
+#app,
+#playground {
   height: 100%;
   width: 100%;
 }
diff --git a/packages/vue/package.json b/packages/vue/package.json
index e6d9c9c..54d7f4f 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tuttarealstep/vue-pdf.js",
   "description": "A Vue component for displaying PDF files using the standard `pdf.js` viewer. This package provides a simple and powerful integration to embed PDF viewers in Vue applications.",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "type": "module",
   "author": "Stefano Valenzano (https://github.com/tuttarealstep)",
@@ -24,28 +24,30 @@
     "url": "https://github.com/tuttarealstep/vue-pdf.js/issues"
   },
   "scripts": {
+    "postinstall": "bun ./scripts/postinstall.ts",
     "build": "run-p type-check \"build-only {@}\" --",
     "build-only": "vite build",
-    "test": "echo \"Error: not implemented yet\" && exit 1",
+    "test": "vitest",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/",
-    "prebuild": "bun ./scripts/postbuild.ts"
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "@fluent/bundle": "^0.18.0",
     "@fluent/dom": "^0.10.0",
     "ajv": "^8.17.1",
-    "pdf.js": "git://github.com/mozilla/pdf.js.git#v4.7.76"
+    "pdf.js": "git://github.com/mozilla/pdf.js.git#v4.8.69"
   },
   "peerDependencies": {
     "vue": "^3.4.29"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^15.7.4",
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vitest/browser": "^2.1.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
@@ -54,13 +56,16 @@
     "eslint-plugin-vue": "^9.23.0",
     "happy-dom": "^15.7.4",
     "npm-run-all2": "^6.2.0",
+    "playwright": "^1.49.0",
     "prettier": "^3.2.5",
     "sass-embedded": "^1.79.4",
     "typescript": "~5.4.0",
     "vite": "^5.3.1",
     "vite-plugin-dts": "^4.2.3",
-    "vue-tsc": "^2.0.21",
-    "vite-plugin-static-copy": "^2.0.0"
+    "vite-plugin-static-copy": "^2.0.0",
+    "vitest": "^2.1.5",
+    "vitest-browser-vue": "^0.0.1",
+    "vue-tsc": "^2.0.21"
   },
   "files": [
     "dist",
diff --git a/packages/vue/scripts/postbuild.ts b/packages/vue/scripts/postinstall.ts
similarity index 100%
rename from packages/vue/scripts/postbuild.ts
rename to packages/vue/scripts/postinstall.ts
diff --git a/packages/vue/src/components/MainContainer.vue b/packages/vue/src/components/MainContainer.vue
index 5d83737..2a2c542 100644
--- a/packages/vue/src/components/MainContainer.vue
+++ b/packages/vue/src/components/MainContainer.vue
@@ -1,449 +1,15 @@
-<template>
-    <div id="mainContainer">
-        <div class="toolbar">
-            <div id="toolbarContainer">
-                <div id="toolbarViewer" class="toolbarHorizontalGroup">
-                    <div id="toolbarViewerLeft" class="toolbarHorizontalGroup">
-                        <button id="sidebarToggleButton" class="toolbarButton" type="button" title="Toggle Sidebar"
-                            tabindex="0" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false"
-                            aria-haspopup="true" aria-controls="sidebarContainer">
-                            <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
-                        </button>
-                        <div class="toolbarButtonSpacer"></div>
-                        <div class="toolbarButtonWithContainer">
-                            <button id="viewFindButton" class="toolbarButton" type="button" title="Find in Document"
-                                tabindex="0" data-l10n-id="pdfjs-findbar-button" aria-expanded="false"
-                                aria-controls="findbar">
-                                <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
-                            </button>
-                            <div class="hidden doorHanger toolbarHorizontalGroup" id="findbar">
-                                <div id="findInputContainer" class="toolbarHorizontalGroup">
-                                    <span class="loadingInput end toolbarHorizontalGroup">
-                                        <input id="findInput" class="toolbarField" title="Find"
-                                            placeholder="Find in document…" tabindex="0" data-l10n-id="pdfjs-find-input"
-                                            aria-invalid="false">
-                                    </span>
-                                    <div class="toolbarHorizontalGroup">
-                                        <button id="findPreviousButton" class="toolbarButton" type="button"
-                                            title="Find the previous occurrence of the phrase" tabindex="0"
-                                            data-l10n-id="pdfjs-find-previous-button">
-                                            <span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
-                                        </button>
-                                        <div class="splitToolbarButtonSeparator"></div>
-                                        <button id="findNextButton" class="toolbarButton" type="button"
-                                            title="Find the next occurrence of the phrase" tabindex="0"
-                                            data-l10n-id="pdfjs-find-next-button">
-                                            <span data-l10n-id="pdfjs-find-next-button-label">Next</span>
-                                        </button>
-                                    </div>
-                                </div>
-
-                                <div id="findbarOptionsOneContainer" class="toolbarHorizontalGroup">
-                                    <div class="toggleButton toolbarLabel">
-                                        <input type="checkbox" id="findHighlightAll" tabindex="0" />
-                                        <label for="findHighlightAll"
-                                            data-l10n-id="pdfjs-find-highlight-checkbox">Highlight All</label>
-                                    </div>
-                                    <div class="toggleButton toolbarLabel">
-                                        <input type="checkbox" id="findMatchCase" tabindex="0" />
-                                        <label for="findMatchCase"
-                                            data-l10n-id="pdfjs-find-match-case-checkbox-label">Match Case</label>
-                                    </div>
-                                </div>
-                                <div id="findbarOptionsTwoContainer" class="toolbarHorizontalGroup">
-                                    <div class="toggleButton toolbarLabel">
-                                        <input type="checkbox" id="findMatchDiacritics" tabindex="0" />
-                                        <label for="findMatchDiacritics"
-                                            data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match
-                                            Diacritics</label>
-                                    </div>
-                                    <div class="toggleButton toolbarLabel">
-                                        <input type="checkbox" id="findEntireWord" tabindex="0" />
-                                        <label for="findEntireWord"
-                                            data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole Words</label>
-                                    </div>
-                                </div>
-
-                                <div id="findbarMessageContainer" class="toolbarHorizontalGroup" aria-live="polite">
-                                    <span id="findResultsCount" class="toolbarLabel"></span>
-                                    <span id="findMsg" class="toolbarLabel"></span>
-                                </div>
-                            </div> <!-- findbar -->
-                        </div>
-                        <div class="toolbarHorizontalGroup hiddenSmallView">
-                            <button class="toolbarButton" title="Previous Page" type="button" id="previous" tabindex="0"
-                                data-l10n-id="pdfjs-previous-button">
-                                <span data-l10n-id="pdfjs-previous-button-label">Previous</span>
-                            </button>
-                            <div class="splitToolbarButtonSeparator"></div>
-                            <button class="toolbarButton" type="button" title="Next Page" id="next" tabindex="0"
-                                data-l10n-id="pdfjs-next-button">
-                                <span data-l10n-id="pdfjs-next-button-label">Next</span>
-                            </button>
-                        </div>
-                        <div class="toolbarHorizontalGroup">
-                            <span class="loadingInput start toolbarHorizontalGroup">
-                                <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1"
-                                    tabindex="0" data-l10n-id="pdfjs-page-input" autocomplete="off">
-                            </span>
-                            <span id="numPages" class="toolbarLabel"></span>
-                        </div>
-                    </div>
-                    <div id="toolbarViewerMiddle" class="toolbarHorizontalGroup">
-                        <div class="toolbarHorizontalGroup">
-                            <button id="zoomOutButton" class="toolbarButton" type="button" title="Zoom Out" tabindex="0"
-                                data-l10n-id="pdfjs-zoom-out-button">
-                                <span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span>
-                            </button>
-                            <div class="splitToolbarButtonSeparator"></div>
-                            <button id="zoomInButton" class="toolbarButton" type="button" title="Zoom In" tabindex="0"
-                                data-l10n-id="pdfjs-zoom-in-button">
-                                <span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span>
-                            </button>
-                        </div>
-                        <span id="scaleSelectContainer" class="dropdownToolbarButton">
-                            <select id="scaleSelect" title="Zoom" tabindex="0" data-l10n-id="pdfjs-zoom-select">
-                                <option id="pageAutoOption" title="" value="auto" selected
-                                    data-l10n-id="pdfjs-page-scale-auto">Automatic Zoom</option>
-                                <option id="pageActualOption" title="" value="page-actual"
-                                    data-l10n-id="pdfjs-page-scale-actual">Actual Size</option>
-                                <option id="pageFitOption" title="" value="page-fit"
-                                    data-l10n-id="pdfjs-page-scale-fit">Page Fit</option>
-                                <option id="pageWidthOption" title="" value="page-width"
-                                    data-l10n-id="pdfjs-page-scale-width">Page Width</option>
-                                <option id="customScaleOption" title="" value="custom" disabled hidden="true"
-                                    data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
-                                <option title="" value="0.5" data-l10n-id="pdfjs-page-scale-percent"
-                                    data-l10n-args='{ "scale": 50 }'>50%</option>
-                                <option title="" value="0.75" data-l10n-id="pdfjs-page-scale-percent"
-                                    data-l10n-args='{ "scale": 75 }'>75%</option>
-                                <option title="" value="1" data-l10n-id="pdfjs-page-scale-percent"
-                                    data-l10n-args='{ "scale": 100 }'>100%</option>
-                                <option title="" value="1.25" data-l10n-id="pdfjs-page-scale-percent"
-                                    data-l10n-args='{ "scale": 125 }'>125%</option>
-                                <option title="" value="1.5" data-l10n-id="pdfjs-page-scale-percent"
-                                    data-l10n-args='{ "scale": 150 }'>150%</option>
-                                <option title="" value="2" data-l10n-id="pdfjs-page-scale-percent"
-                                    data-l10n-args='{ "scale": 200 }'>200%</option>
-                                <option title="" value="3" data-l10n-id="pdfjs-page-scale-percent"
-                                    data-l10n-args='{ "scale": 300 }'>300%</option>
-                                <option title="" value="4" data-l10n-id="pdfjs-page-scale-percent"
-                                    data-l10n-args='{ "scale": 400 }'>400%</option>
-                            </select>
-                        </span>
-                    </div>
-                    <div id="toolbarViewerRight" class="toolbarHorizontalGroup">
-                        <div id="editorModeButtons" class="toolbarHorizontalGroup" role="radiogroup">
-                            <div id="editorHighlight" class="toolbarButtonWithContainer">
-                                <button id="editorHighlightButton" class="toolbarButton" type="button" disabled
-                                    title="Highlight" role="radio" aria-expanded="false" aria-haspopup="true"
-                                    aria-controls="editorHighlightParamsToolbar" tabindex="0"
-                                    data-l10n-id="pdfjs-editor-highlight-button">
-                                    <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
-                                </button>
-                                <div class="editorParamsToolbar hidden doorHangerRight"
-                                    id="editorHighlightParamsToolbar">
-                                    <div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
-                                        <div id="editorHighlightColorPicker" class="colorPicker">
-                                            <span id="highlightColorPickerLabel" class="editorParamsLabel"
-                                                data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight
-                                                color</span>
-                                        </div>
-                                        <div id="editorHighlightThickness">
-                                            <label for="editorFreeHighlightThickness" class="editorParamsLabel"
-                                                data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
-                                            <div class="thicknessPicker">
-                                                <input type="range" id="editorFreeHighlightThickness"
-                                                    class="editorParamsSlider"
-                                                    data-l10n-id="pdfjs-editor-free-highlight-thickness-title"
-                                                    value="12" min="8" max="24" step="1" tabindex="0">
-                                            </div>
-                                        </div>
-                                        <div id="editorHighlightVisibility">
-                                            <div class="divider"></div>
-                                            <div class="toggler">
-                                                <label for="editorHighlightShowAll" class="editorParamsLabel"
-                                                    data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show
-                                                    all</label>
-                                                <button id="editorHighlightShowAll" class="toggle-button" type="button"
-                                                    data-l10n-id="pdfjs-editor-highlight-show-all-button"
-                                                    aria-pressed="true" tabindex="0"></button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div id="editorFreeText" class="toolbarButtonWithContainer">
-                                <button id="editorFreeTextButton" class="toolbarButton" type="button" disabled
-                                    title="Text" role="radio" aria-expanded="false" aria-haspopup="true"
-                                    aria-controls="editorFreeTextParamsToolbar" tabindex="0"
-                                    data-l10n-id="pdfjs-editor-free-text-button">
-                                    <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
-                                </button>
-                                <div class="editorParamsToolbar hidden doorHangerRight"
-                                    id="editorFreeTextParamsToolbar">
-                                    <div class="editorParamsToolbarContainer">
-                                        <div class="editorParamsSetter">
-                                            <label for="editorFreeTextColor" class="editorParamsLabel"
-                                                data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
-                                            <input type="color" id="editorFreeTextColor" class="editorParamsColor"
-                                                tabindex="0">
-                                        </div>
-                                        <div class="editorParamsSetter">
-                                            <label for="editorFreeTextFontSize" class="editorParamsLabel"
-                                                data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
-                                            <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider"
-                                                value="10" min="5" max="100" step="1" tabindex="0">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div id="editorInk" class="toolbarButtonWithContainer">
-                                <button id="editorInkButton" class="toolbarButton" type="button" disabled title="Draw"
-                                    role="radio" aria-expanded="false" aria-haspopup="true"
-                                    aria-controls="editorInkParamsToolbar" tabindex="0"
-                                    data-l10n-id="pdfjs-editor-ink-button">
-                                    <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
-                                </button>
-                                <div class="editorParamsToolbar hidden doorHangerRight" id="editorInkParamsToolbar">
-                                    <div class="editorParamsToolbarContainer">
-                                        <div class="editorParamsSetter">
-                                            <label for="editorInkColor" class="editorParamsLabel"
-                                                data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
-                                            <input type="color" id="editorInkColor" class="editorParamsColor"
-                                                tabindex="0">
-                                        </div>
-                                        <div class="editorParamsSetter">
-                                            <label for="editorInkThickness" class="editorParamsLabel"
-                                                data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
-                                            <input type="range" id="editorInkThickness" class="editorParamsSlider"
-                                                value="1" min="1" max="20" step="1" tabindex="0">
-                                        </div>
-                                        <div class="editorParamsSetter">
-                                            <label for="editorInkOpacity" class="editorParamsLabel"
-                                                data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
-                                            <input type="range" id="editorInkOpacity" class="editorParamsSlider"
-                                                value="100" min="1" max="100" step="1" tabindex="0">
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div id="editorStamp" class="toolbarButtonWithContainer">
-                                <button id="editorStampButton" class="toolbarButton" type="button" disabled
-                                    title="Add or edit images" role="radio" aria-expanded="false" aria-haspopup="true"
-                                    aria-controls="editorStampParamsToolbar" tabindex="0"
-                                    data-l10n-id="pdfjs-editor-stamp-button">
-                                    <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
-                                </button>
-                                <div class="editorParamsToolbar hidden doorHangerRight menu"
-                                    id="editorStampParamsToolbar">
-                                    <div class="menuContainer">
-                                        <button id="editorStampAddImage" class="toolbarButton labeled" type="button"
-                                            title="Add image" tabindex="0"
-                                            data-l10n-id="pdfjs-editor-stamp-add-image-button">
-                                            <span class="editorParamsLabel"
-                                                data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add
-                                                image</span>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div id="editorModeSeparator" class="verticalToolbarSeparator"></div>
-
-                        <div class="toolbarHorizontalGroup hiddenMediumView">
-                            <button id="printButton" class="toolbarButton" type="button" title="Print" tabindex="0"
-                                data-l10n-id="pdfjs-print-button">
-                                <span data-l10n-id="pdfjs-print-button-label">Print</span>
-                            </button>
-
-                            <button id="downloadButton" class="toolbarButton" type="button" title="Save" tabindex="0"
-                                data-l10n-id="pdfjs-save-button">
-                                <span data-l10n-id="pdfjs-save-button-label">Save</span>
-                            </button>
-                        </div>
-
-                        <div class="verticalToolbarSeparator hiddenMediumView"></div>
-
-                        <div id="secondaryToolbarToggle" class="toolbarButtonWithContainer">
-                            <button id="secondaryToolbarToggleButton" class="toolbarButton" type="button" title="Tools"
-                                tabindex="0" data-l10n-id="pdfjs-tools-button" aria-expanded="false"
-                                aria-haspopup="true" aria-controls="secondaryToolbar">
-                                <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
-                            </button>
-                            <div id="secondaryToolbar" class="hidden doorHangerRight menu">
-                                <div id="secondaryToolbarButtonContainer" class="menuContainer">
-                                    <!--#if GENERIC-->
-                                    <button id="secondaryOpenFile" class="toolbarButton labeled" type="button"
-                                        title="Open File" tabindex="0" data-l10n-id="pdfjs-open-file-button">
-                                        <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
-                                    </button>
-                                    <!--#endif-->
-
-                                    <div class="visibleMediumView">
-                                        <button id="secondaryPrint" class="toolbarButton labeled" type="button"
-                                            title="Print" tabindex="0" data-l10n-id="pdfjs-print-button">
-                                            <span data-l10n-id="pdfjs-print-button-label">Print</span>
-                                        </button>
-
-                                        <button id="secondaryDownload" class="toolbarButton labeled" type="button"
-                                            title="Save" tabindex="0" data-l10n-id="pdfjs-save-button">
-                                            <span data-l10n-id="pdfjs-save-button-label">Save</span>
-                                        </button>
-
-                                        <!--#if !GENERIC-->
-                                        <!--            <div class="horizontalToolbarSeparator"></div>-->
-                                        <!--#endif-->
-                                    </div>
-
-                                    <!--#if GENERIC-->
-                                    <div class="horizontalToolbarSeparator"></div>
-                                    <!--#endif-->
-
-                                    <button id="presentationMode" class="toolbarButton labeled" type="button"
-                                        title="Switch to Presentation Mode" tabindex="0"
-                                        data-l10n-id="pdfjs-presentation-mode-button">
-                                        <span data-l10n-id="pdfjs-presentation-mode-button-label">Presentation
-                                            Mode</span>
-                                    </button>
-
-                                    <a href="#" id="viewBookmark" class="toolbarButton labeled"
-                                        title="Current Page (View URL from Current Page)" tabindex="0"
-                                        data-l10n-id="pdfjs-bookmark-button">
-                                        <span data-l10n-id="pdfjs-bookmark-button-label">Current Page</span>
-                                    </a>
+<script setup lang="ts">
+import { inject } from 'vue';
+import { toolbarOptionsKey } from '@/keys';
+import ToolbarContainer, { ToolbarContainerProps } from './ToolbarContainer.vue';
 
-                                    <div id="viewBookmarkSeparator" class="horizontalToolbarSeparator"></div>
+const toolbarOptions = inject<ToolbarContainerProps>(toolbarOptionsKey)
 
-                                    <button id="firstPage" class="toolbarButton labeled" type="button"
-                                        title="Go to First Page" tabindex="0" data-l10n-id="pdfjs-first-page-button">
-                                        <span data-l10n-id="pdfjs-first-page-button-label">Go to First Page</span>
-                                    </button>
-                                    <button id="lastPage" class="toolbarButton labeled" type="button"
-                                        title="Go to Last Page" tabindex="0" data-l10n-id="pdfjs-last-page-button">
-                                        <span data-l10n-id="pdfjs-last-page-button-label">Go to Last Page</span>
-                                    </button>
-
-                                    <div class="horizontalToolbarSeparator"></div>
-
-                                    <button id="pageRotateCw" class="toolbarButton labeled" type="button"
-                                        title="Rotate Clockwise" tabindex="0"
-                                        data-l10n-id="pdfjs-page-rotate-cw-button">
-                                        <span data-l10n-id="pdfjs-page-rotate-cw-button-label">Rotate
-                                            Clockwise</span>
-                                    </button>
-                                    <button id="pageRotateCcw" class="toolbarButton labeled" type="button"
-                                        title="Rotate Counterclockwise" tabindex="0"
-                                        data-l10n-id="pdfjs-page-rotate-ccw-button">
-                                        <span data-l10n-id="pdfjs-page-rotate-ccw-button-label">Rotate
-                                            Counterclockwise</span>
-                                    </button>
-
-                                    <div class="horizontalToolbarSeparator"></div>
-
-                                    <div id="cursorToolButtons" role="radiogroup">
-                                        <button id="cursorSelectTool" class="toolbarButton labeled toggled"
-                                            type="button" title="Enable Text Selection Tool" tabindex="0"
-                                            data-l10n-id="pdfjs-cursor-text-select-tool-button" role="radio"
-                                            aria-checked="true">
-                                            <span data-l10n-id="pdfjs-cursor-text-select-tool-button-label">Text
-                                                Selection Tool</span>
-                                        </button>
-                                        <button id="cursorHandTool" class="toolbarButton labeled" type="button"
-                                            title="Enable Hand Tool" tabindex="0"
-                                            data-l10n-id="pdfjs-cursor-hand-tool-button" role="radio"
-                                            aria-checked="false">
-                                            <span data-l10n-id="pdfjs-cursor-hand-tool-button-label">Hand
-                                                Tool</span>
-                                        </button>
-                                    </div>
-
-                                    <div class="horizontalToolbarSeparator"></div>
-
-                                    <div id="scrollModeButtons" role="radiogroup">
-                                        <button id="scrollPage" class="toolbarButton labeled" type="button"
-                                            title="Use Page Scrolling" tabindex="0"
-                                            data-l10n-id="pdfjs-scroll-page-button" role="radio" aria-checked="false">
-                                            <span data-l10n-id="pdfjs-scroll-page-button-label">Page
-                                                Scrolling</span>
-                                        </button>
-                                        <button id="scrollVertical" class="toolbarButton labeled toggled" type="button"
-                                            title="Use Vertical Scrolling" tabindex="0"
-                                            data-l10n-id="pdfjs-scroll-vertical-button" role="radio"
-                                            aria-checked="true">
-                                            <span data-l10n-id="pdfjs-scroll-vertical-button-label">Vertical
-                                                Scrolling</span>
-                                        </button>
-                                        <button id="scrollHorizontal" class="toolbarButton labeled" type="button"
-                                            title="Use Horizontal Scrolling" tabindex="0"
-                                            data-l10n-id="pdfjs-scroll-horizontal-button" role="radio"
-                                            aria-checked="false">
-                                            <span data-l10n-id="pdfjs-scroll-horizontal-button-label">Horizontal
-                                                Scrolling</span>
-                                        </button>
-                                        <button id="scrollWrapped" class="toolbarButton labeled" type="button"
-                                            title="Use Wrapped Scrolling" tabindex="0"
-                                            data-l10n-id="pdfjs-scroll-wrapped-button" role="radio"
-                                            aria-checked="false">
-                                            <span data-l10n-id="pdfjs-scroll-wrapped-button-label">Wrapped
-                                                Scrolling</span>
-                                        </button>
-                                    </div>
-
-                                    <div class="horizontalToolbarSeparator"></div>
-
-                                    <div id="spreadModeButtons" role="radiogroup">
-                                        <button id="spreadNone" class="toolbarButton labeled toggled" type="button"
-                                            title="Do not join page spreads" tabindex="0"
-                                            data-l10n-id="pdfjs-spread-none-button" role="radio" aria-checked="true">
-                                            <span data-l10n-id="pdfjs-spread-none-button-label">No Spreads</span>
-                                        </button>
-                                        <button id="spreadOdd" class="toolbarButton labeled" type="button"
-                                            title="Join page spreads starting with odd-numbered pages" tabindex="0"
-                                            data-l10n-id="pdfjs-spread-odd-button" role="radio" aria-checked="false">
-                                            <span data-l10n-id="pdfjs-spread-odd-button-label">Odd Spreads</span>
-                                        </button>
-                                        <button id="spreadEven" class="toolbarButton labeled" type="button"
-                                            title="Join page spreads starting with even-numbered pages" tabindex="0"
-                                            data-l10n-id="pdfjs-spread-even-button" role="radio" aria-checked="false">
-                                            <span data-l10n-id="pdfjs-spread-even-button-label">Even Spreads</span>
-                                        </button>
-                                    </div>
-
-                                    <div id="imageAltTextSettingsSeparator" class="horizontalToolbarSeparator hidden">
-                                    </div>
-                                    <button id="imageAltTextSettings" type="button" class="toolbarButton labeled hidden"
-                                        title="Image alt text settings" tabindex="0"
-                                        data-l10n-id="pdfjs-image-alt-text-settings-button"
-                                        aria-controls="altTextSettingsDialog">
-                                        <span data-l10n-id="pdfjs-image-alt-text-settings-button-label">Image alt
-                                            text settings</span>
-                                    </button>
-
-                                    <div class="horizontalToolbarSeparator"></div>
-
-                                    <button id="documentProperties" class="toolbarButton labeled" type="button"
-                                        title="Document Properties…" tabindex="0"
-                                        data-l10n-id="pdfjs-document-properties-button"
-                                        aria-controls="documentPropertiesDialog">
-                                        <span data-l10n-id="pdfjs-document-properties-button-label">Document
-                                            Properties…</span>
-                                    </button>
-                                </div>
-                            </div> <!-- secondaryToolbar -->
-                        </div>
-                    </div>
-                </div>
-                <div id="loadingBar">
-                    <div class="progress">
-                        <div class="glimmer">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+</script>
 
+<template>
+    <div id="mainContainer">
+        <ToolbarContainer :visible="toolbarOptions?.visible" :options="toolbarOptions?.options" />
         <div id="viewerContainer" tabindex="0">
             <div id="viewer" class="pdfViewer"></div>
         </div>
diff --git a/packages/vue/src/components/ToolbarContainer.vue b/packages/vue/src/components/ToolbarContainer.vue
new file mode 100644
index 0000000..728aca4
--- /dev/null
+++ b/packages/vue/src/components/ToolbarContainer.vue
@@ -0,0 +1,526 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+export interface ToolbarContainerProps {
+    visible?: boolean;
+    options?: {
+        toolbarViewerLeft?: boolean;
+        toolbarViewerMiddle?: boolean;
+        toolbarViewerRight?: boolean;
+        sidebarToggle?: boolean;
+        viewFind?: boolean;
+        previous?: boolean;
+        next?: boolean;
+        zoomOut?: boolean;
+        zoomIn?: boolean;
+        scaleSelect?: boolean;
+        editorHighlightButton?: boolean;
+        editorFreeTextButton?: boolean;
+        editorInkButton?: boolean;
+        editorStampButton?: boolean;
+        print?: boolean;
+        download?: boolean;
+        secondaryToolbarToggle?: boolean;
+        secondaryOpenFile?: boolean;
+        secondaryPrint?: boolean;
+        secondaryDownload?: boolean;
+        presentationMode?: boolean;
+        viewBookmark?: boolean;
+        firstPage?: boolean;
+        lastPage?: boolean;
+        pageRotateCw?: boolean;
+        pageRotateCcw?: boolean;
+        cursorSelectTool?: boolean;
+        cursorHandTool?: boolean;
+        scrollPage?: boolean;
+        scrollVertical?: boolean;
+        scrollHorizontal?: boolean;
+        scrollWrapped?: boolean;
+        spreadNone?: boolean;
+        spreadOdd?: boolean;
+        spreadEven?: boolean;
+        documentProperties?: boolean;
+    }
+}
+
+const props = defineProps<ToolbarContainerProps>()
+
+</script>
+
+<template>
+    <div class="toolbar" v-show="props.visible !== false">
+        <div id="toolbarContainer">
+            <div id="toolbarViewer" class="toolbarHorizontalGroup">
+                <div id="toolbarViewerLeft" class="toolbarHorizontalGroup"
+                    v-show="props.options?.toolbarViewerLeft !== false">
+                    <button id="sidebarToggleButton" class="toolbarButton" type="button" title="Toggle Sidebar"
+                        tabindex="0" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false"
+                        aria-haspopup="true" aria-controls="sidebarContainer"
+                        v-show="props.options?.sidebarToggle !== false">
+                        <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
+                    </button>
+                    <div class="toolbarButtonSpacer"></div>
+                    <div class="toolbarButtonWithContainer">
+                        <button id="viewFindButton" class="toolbarButton" type="button" title="Find in Document"
+                            tabindex="0" data-l10n-id="pdfjs-findbar-button" aria-expanded="false"
+                            aria-controls="findbar" v-show="props.options?.viewFind !== false">
+                            <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
+                        </button>
+                        <div class="hidden doorHanger toolbarHorizontalGroup" id="findbar">
+                            <div id="findInputContainer" class="toolbarHorizontalGroup">
+                                <span class="loadingInput end toolbarHorizontalGroup">
+                                    <input id="findInput" class="toolbarField" title="Find"
+                                        placeholder="Find in document…" tabindex="0" data-l10n-id="pdfjs-find-input"
+                                        aria-invalid="false">
+                                </span>
+                                <div class="toolbarHorizontalGroup">
+                                    <button id="findPreviousButton" class="toolbarButton" type="button"
+                                        title="Find the previous occurrence of the phrase" tabindex="0"
+                                        data-l10n-id="pdfjs-find-previous-button">
+                                        <span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
+                                    </button>
+                                    <div class="splitToolbarButtonSeparator"></div>
+                                    <button id="findNextButton" class="toolbarButton" type="button"
+                                        title="Find the next occurrence of the phrase" tabindex="0"
+                                        data-l10n-id="pdfjs-find-next-button">
+                                        <span data-l10n-id="pdfjs-find-next-button-label">Next</span>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div id="findbarOptionsOneContainer" class="toolbarHorizontalGroup">
+                                <div class="toggleButton toolbarLabel">
+                                    <input type="checkbox" id="findHighlightAll" tabindex="0" />
+                                    <label for="findHighlightAll" data-l10n-id="pdfjs-find-highlight-checkbox">Highlight
+                                        All</label>
+                                </div>
+                                <div class="toggleButton toolbarLabel">
+                                    <input type="checkbox" id="findMatchCase" tabindex="0" />
+                                    <label for="findMatchCase" data-l10n-id="pdfjs-find-match-case-checkbox-label">Match
+                                        Case</label>
+                                </div>
+                            </div>
+                            <div id="findbarOptionsTwoContainer" class="toolbarHorizontalGroup">
+                                <div class="toggleButton toolbarLabel">
+                                    <input type="checkbox" id="findMatchDiacritics" tabindex="0" />
+                                    <label for="findMatchDiacritics"
+                                        data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match
+                                        Diacritics</label>
+                                </div>
+                                <div class="toggleButton toolbarLabel">
+                                    <input type="checkbox" id="findEntireWord" tabindex="0" />
+                                    <label for="findEntireWord"
+                                        data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole Words</label>
+                                </div>
+                            </div>
+
+                            <div id="findbarMessageContainer" class="toolbarHorizontalGroup" aria-live="polite">
+                                <span id="findResultsCount" class="toolbarLabel"></span>
+                                <span id="findMsg" class="toolbarLabel"></span>
+                            </div>
+                        </div> <!-- findbar -->
+                    </div>
+                    <div class="toolbarHorizontalGroup hiddenSmallView">
+                        <button class="toolbarButton" title="Previous Page" type="button" id="previous" tabindex="0"
+                            data-l10n-id="pdfjs-previous-button" v-show="props.options?.previous !== false">
+                            <span data-l10n-id="pdfjs-previous-button-label">Previous</span>
+                        </button>
+                        <div class="splitToolbarButtonSeparator"
+                            v-show="props.options?.previous !== false || props.options?.next !== false">
+                        </div>
+                        <button class="toolbarButton" type="button" title="Next Page" id="next" tabindex="0"
+                            data-l10n-id="pdfjs-next-button" v-show="props.options?.next !== false">
+                            <span data-l10n-id="pdfjs-next-button-label">Next</span>
+                        </button>
+                    </div>
+                    <div class="toolbarHorizontalGroup">
+                        <span class="loadingInput start toolbarHorizontalGroup">
+                            <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1"
+                                tabindex="0" data-l10n-id="pdfjs-page-input" autocomplete="off">
+                        </span>
+                        <span id="numPages" class="toolbarLabel"></span>
+                    </div>
+                </div>
+                <div id="toolbarViewerMiddle" class="toolbarHorizontalGroup"
+                    v-show="props.options?.toolbarViewerMiddle !== false">
+                    <div class="toolbarHorizontalGroup">
+                        <button id="zoomOutButton" class="toolbarButton" type="button" title="Zoom Out" tabindex="0"
+                            data-l10n-id="pdfjs-zoom-out-button" v-show="props.options?.zoomOut !== false">
+                            <span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span>
+                        </button>
+                        <div class="splitToolbarButtonSeparator"></div>
+                        <button id="zoomInButton" class="toolbarButton" type="button" title="Zoom In" tabindex="0"
+                            data-l10n-id="pdfjs-zoom-in-button" v-show="props.options?.zoomIn !== false">
+                            <span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span>
+                        </button>
+                    </div>
+                    <span id="scaleSelectContainer" class="dropdownToolbarButton"
+                        v-show="props.options?.scaleSelect !== false">
+                        <select id="scaleSelect" title="Zoom" tabindex="0" data-l10n-id="pdfjs-zoom-select">
+                            <option id="pageAutoOption" title="" value="auto" selected
+                                data-l10n-id="pdfjs-page-scale-auto">Automatic Zoom</option>
+                            <option id="pageActualOption" title="" value="page-actual"
+                                data-l10n-id="pdfjs-page-scale-actual">Actual Size</option>
+                            <option id="pageFitOption" title="" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">
+                                Page Fit</option>
+                            <option id="pageWidthOption" title="" value="page-width"
+                                data-l10n-id="pdfjs-page-scale-width">Page Width</option>
+                            <option id="customScaleOption" title="" value="custom" disabled hidden="true"
+                                data-l10n-id="pdfjs-page-scale-percent" data-l10n-args='{ "scale": 0 }'>0%</option>
+                            <option title="" value="0.5" data-l10n-id="pdfjs-page-scale-percent"
+                                data-l10n-args='{ "scale": 50 }'>50%</option>
+                            <option title="" value="0.75" data-l10n-id="pdfjs-page-scale-percent"
+                                data-l10n-args='{ "scale": 75 }'>75%</option>
+                            <option title="" value="1" data-l10n-id="pdfjs-page-scale-percent"
+                                data-l10n-args='{ "scale": 100 }'>100%</option>
+                            <option title="" value="1.25" data-l10n-id="pdfjs-page-scale-percent"
+                                data-l10n-args='{ "scale": 125 }'>125%</option>
+                            <option title="" value="1.5" data-l10n-id="pdfjs-page-scale-percent"
+                                data-l10n-args='{ "scale": 150 }'>150%</option>
+                            <option title="" value="2" data-l10n-id="pdfjs-page-scale-percent"
+                                data-l10n-args='{ "scale": 200 }'>200%</option>
+                            <option title="" value="3" data-l10n-id="pdfjs-page-scale-percent"
+                                data-l10n-args='{ "scale": 300 }'>300%</option>
+                            <option title="" value="4" data-l10n-id="pdfjs-page-scale-percent"
+                                data-l10n-args='{ "scale": 400 }'>400%</option>
+                        </select>
+                    </span>
+                </div>
+                <div id="toolbarViewerRight" class="toolbarHorizontalGroup"
+                    v-show="props.options?.toolbarViewerRight !== false">
+                    <div id="editorModeButtons" class="toolbarHorizontalGroup" role="radiogroup">
+                        <div id="editorHighlight" class="toolbarButtonWithContainer"
+                            v-show="props.options?.editorHighlightButton !== false">
+                            <button id="editorHighlightButton" class="toolbarButton" type="button" disabled
+                                title="Highlight" role="radio" aria-expanded="false" aria-haspopup="true"
+                                aria-controls="editorHighlightParamsToolbar" tabindex="0"
+                                data-l10n-id="pdfjs-editor-highlight-button">
+                                <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
+                            </button>
+                            <div class="editorParamsToolbar hidden doorHangerRight" id="editorHighlightParamsToolbar">
+                                <div id="highlightParamsToolbarContainer" class="editorParamsToolbarContainer">
+                                    <div id="editorHighlightColorPicker" class="colorPicker">
+                                        <span id="highlightColorPickerLabel" class="editorParamsLabel"
+                                            data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight
+                                            color</span>
+                                    </div>
+                                    <div id="editorHighlightThickness">
+                                        <label for="editorFreeHighlightThickness" class="editorParamsLabel"
+                                            data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
+                                        <div class="thicknessPicker">
+                                            <input type="range" id="editorFreeHighlightThickness"
+                                                class="editorParamsSlider"
+                                                data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12"
+                                                min="8" max="24" step="1" tabindex="0">
+                                        </div>
+                                    </div>
+                                    <div id="editorHighlightVisibility">
+                                        <div class="divider"></div>
+                                        <div class="toggler">
+                                            <label for="editorHighlightShowAll" class="editorParamsLabel"
+                                                data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show
+                                                all</label>
+                                            <button id="editorHighlightShowAll" class="toggle-button" type="button"
+                                                data-l10n-id="pdfjs-editor-highlight-show-all-button"
+                                                aria-pressed="true" tabindex="0"></button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="editorFreeText" class="toolbarButtonWithContainer"
+                            v-show="props.options?.editorFreeTextButton !== false">
+                            <button id="editorFreeTextButton" class="toolbarButton" type="button" disabled title="Text"
+                                role="radio" aria-expanded="false" aria-haspopup="true"
+                                aria-controls="editorFreeTextParamsToolbar" tabindex="0"
+                                data-l10n-id="pdfjs-editor-free-text-button">
+                                <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
+                            </button>
+                            <div class="editorParamsToolbar hidden doorHangerRight" id="editorFreeTextParamsToolbar">
+                                <div class="editorParamsToolbarContainer">
+                                    <div class="editorParamsSetter">
+                                        <label for="editorFreeTextColor" class="editorParamsLabel"
+                                            data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
+                                        <input type="color" id="editorFreeTextColor" class="editorParamsColor"
+                                            tabindex="0">
+                                    </div>
+                                    <div class="editorParamsSetter">
+                                        <label for="editorFreeTextFontSize" class="editorParamsLabel"
+                                            data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
+                                        <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider"
+                                            value="10" min="5" max="100" step="1" tabindex="0">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="editorInk" class="toolbarButtonWithContainer"
+                            v-show="props.options?.editorInkButton !== false">
+                            <button id="editorInkButton" class="toolbarButton" type="button" disabled title="Draw"
+                                role="radio" aria-expanded="false" aria-haspopup="true"
+                                aria-controls="editorInkParamsToolbar" tabindex="0"
+                                data-l10n-id="pdfjs-editor-ink-button">
+                                <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
+                            </button>
+                            <div class="editorParamsToolbar hidden doorHangerRight" id="editorInkParamsToolbar">
+                                <div class="editorParamsToolbarContainer">
+                                    <div class="editorParamsSetter">
+                                        <label for="editorInkColor" class="editorParamsLabel"
+                                            data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
+                                        <input type="color" id="editorInkColor" class="editorParamsColor" tabindex="0">
+                                    </div>
+                                    <div class="editorParamsSetter">
+                                        <label for="editorInkThickness" class="editorParamsLabel"
+                                            data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
+                                        <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1"
+                                            min="1" max="20" step="1" tabindex="0">
+                                    </div>
+                                    <div class="editorParamsSetter">
+                                        <label for="editorInkOpacity" class="editorParamsLabel"
+                                            data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
+                                        <input type="range" id="editorInkOpacity" class="editorParamsSlider" value="100"
+                                            min="1" max="100" step="1" tabindex="0">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="editorStamp" class="toolbarButtonWithContainer"
+                            v-show="props.options?.editorStampButton !== false">
+                            <button id="editorStampButton" class="toolbarButton" type="button" disabled
+                                title="Add or edit images" role="radio" aria-expanded="false" aria-haspopup="true"
+                                aria-controls="editorStampParamsToolbar" tabindex="0"
+                                data-l10n-id="pdfjs-editor-stamp-button">
+                                <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
+                            </button>
+                            <div class="editorParamsToolbar hidden doorHangerRight menu" id="editorStampParamsToolbar">
+                                <div class="menuContainer">
+                                    <button id="editorStampAddImage" class="toolbarButton labeled" type="button"
+                                        title="Add image" tabindex="0"
+                                        data-l10n-id="pdfjs-editor-stamp-add-image-button">
+                                        <span class="editorParamsLabel"
+                                            data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add
+                                            image</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="editorModeSeparator" class="verticalToolbarSeparator"
+                        v-show="props.options?.print !== false || props.options?.download !== false"></div>
+
+                    <div class="toolbarHorizontalGroup hiddenMediumView">
+                        <button id="printButton" class="toolbarButton" type="button" title="Print" tabindex="0"
+                            data-l10n-id="pdfjs-print-button" v-show="props.options?.print !== false">
+                            <span data-l10n-id="pdfjs-print-button-label">Print</span>
+                        </button>
+
+                        <button id="downloadButton" class="toolbarButton" type="button" title="Save" tabindex="0"
+                            data-l10n-id="pdfjs-save-button" v-show="props.options?.download !== false">
+                            <span data-l10n-id="pdfjs-save-button-label">Save</span>
+                        </button>
+                    </div>
+
+                    <div class="verticalToolbarSeparator hiddenMediumView"
+                        v-show="props.options?.secondaryToolbarToggle !== false"></div>
+
+                    <div id="secondaryToolbarToggle" class="toolbarButtonWithContainer">
+                        <button id="secondaryToolbarToggleButton" class="toolbarButton" type="button" title="Tools"
+                            tabindex="0" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-haspopup="true"
+                            aria-controls="secondaryToolbar" v-show="props.options?.secondaryToolbarToggle !== false">
+                            <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
+                        </button>
+                        <div id="secondaryToolbar" class="hidden doorHangerRight menu">
+                            <div id="secondaryToolbarButtonContainer" class="menuContainer">
+                                <!--#if GENERIC-->
+                                <button id="secondaryOpenFile" class="toolbarButton labeled" type="button"
+                                    title="Open File" tabindex="0" data-l10n-id="pdfjs-open-file-button"
+                                    v-show="props.options?.secondaryOpenFile !== false">
+                                    <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
+                                </button>
+                                <!--#endif-->
+
+                                <div class="visibleMediumView">
+                                    <button id="secondaryPrint" class="toolbarButton labeled" type="button"
+                                        title="Print" tabindex="0" data-l10n-id="pdfjs-print-button"
+                                        v-show="props.options?.secondaryPrint !== false">
+                                        <span data-l10n-id="pdfjs-print-button-label">Print</span>
+                                    </button>
+
+                                    <button id="secondaryDownload" class="toolbarButton labeled" type="button"
+                                        title="Save" tabindex="0" data-l10n-id="pdfjs-save-button"
+                                        v-show="props.options?.secondaryDownload !== false">
+                                        <span data-l10n-id="pdfjs-save-button-label">Save</span>
+                                    </button>
+
+                                    <!--#if !GENERIC-->
+                                    <!--            <div class="horizontalToolbarSeparator"></div>-->
+                                    <!--#endif-->
+                                </div>
+
+                                <div class="horizontalToolbarSeparator"
+                                    v-show="props.options?.secondaryOpenFile !== false || props.options?.secondaryPrint !== false || props.options?.secondaryDownload !== false">
+                                </div>
+
+                                <button id="presentationMode" class="toolbarButton labeled" type="button"
+                                    title="Switch to Presentation Mode" tabindex="0"
+                                    data-l10n-id="pdfjs-presentation-mode-button"
+                                    v-show="props.options?.presentationMode !== false">
+                                    <span data-l10n-id="pdfjs-presentation-mode-button-label">Presentation
+                                        Mode</span>
+                                </button>
+
+                                <a href="#" id="viewBookmark" class="toolbarButton labeled"
+                                    title="Current Page (View URL from Current Page)" tabindex="0"
+                                    data-l10n-id="pdfjs-bookmark-button" v-show="props.options?.viewBookmark !== false">
+                                    <span data-l10n-id="pdfjs-bookmark-button-label">Current Page</span>
+                                </a>
+
+                                <div id="viewBookmarkSeparator" class="horizontalToolbarSeparator"
+                                    v-show="props.options?.presentationMode !== false || props.options?.viewBookmark !== false">
+                                </div>
+
+                                <button id="firstPage" class="toolbarButton labeled" type="button"
+                                    title="Go to First Page" tabindex="0" data-l10n-id="pdfjs-first-page-button"
+                                    v-show="props.options?.firstPage !== false">
+                                    <span data-l10n-id="pdfjs-first-page-button-label">Go to First Page</span>
+                                </button>
+                                <button id="lastPage" class="toolbarButton labeled" type="button"
+                                    title="Go to Last Page" tabindex="0" data-l10n-id="pdfjs-last-page-button"
+                                    v-show="props.options?.lastPage !== false">
+                                    <span data-l10n-id="pdfjs-last-page-button-label">Go to Last Page</span>
+                                </button>
+
+                                <div class="horizontalToolbarSeparator"
+                                    v-show="props.options?.firstPage !== false || props.options?.lastPage !== false">
+                                </div>
+
+                                <button id="pageRotateCw" class="toolbarButton labeled" type="button"
+                                    title="Rotate Clockwise" tabindex="0" data-l10n-id="pdfjs-page-rotate-cw-button"
+                                    v-show="props.options?.pageRotateCw !== false">
+                                    <span data-l10n-id="pdfjs-page-rotate-cw-button-label">Rotate
+                                        Clockwise</span>
+                                </button>
+                                <button id="pageRotateCcw" class="toolbarButton labeled" type="button"
+                                    title="Rotate Counterclockwise" tabindex="0"
+                                    data-l10n-id="pdfjs-page-rotate-ccw-button"
+                                    v-show="props.options?.pageRotateCcw !== false">
+                                    <span data-l10n-id="pdfjs-page-rotate-ccw-button-label">Rotate
+                                        Counterclockwise</span>
+                                </button>
+
+                                <div class="horizontalToolbarSeparator"
+                                    v-show="props.options?.pageRotateCw !== false || props.options?.pageRotateCcw !== false">
+                                </div>
+
+                                <div id="cursorToolButtons" role="radiogroup">
+                                    <button id="cursorSelectTool" class="toolbarButton labeled toggled" type="button"
+                                        title="Enable Text Selection Tool" tabindex="0"
+                                        data-l10n-id="pdfjs-cursor-text-select-tool-button" role="radio"
+                                        aria-checked="true" v-show="props.options?.cursorSelectTool !== false">
+                                        <span data-l10n-id="pdfjs-cursor-text-select-tool-button-label">Text
+                                            Selection Tool</span>
+                                    </button>
+                                    <button id="cursorHandTool" class="toolbarButton labeled" type="button"
+                                        title="Enable Hand Tool" tabindex="0"
+                                        data-l10n-id="pdfjs-cursor-hand-tool-button" role="radio" aria-checked="false"
+                                        v-show="props.options?.cursorHandTool !== false">
+                                        <span data-l10n-id="pdfjs-cursor-hand-tool-button-label">Hand
+                                            Tool</span>
+                                    </button>
+                                </div>
+
+                                <div class="horizontalToolbarSeparator"
+                                    v-show="props.options?.cursorSelectTool !== false || props.options?.cursorHandTool !== false">
+                                </div>
+
+                                <div id="scrollModeButtons" role="radiogroup">
+                                    <button id="scrollPage" class="toolbarButton labeled" type="button"
+                                        title="Use Page Scrolling" tabindex="0" data-l10n-id="pdfjs-scroll-page-button"
+                                        role="radio" aria-checked="false" v-show="props.options?.scrollPage !== false">
+                                        <span data-l10n-id="pdfjs-scroll-page-button-label">Page
+                                            Scrolling</span>
+                                    </button>
+                                    <button id="scrollVertical" class="toolbarButton labeled toggled" type="button"
+                                        title="Use Vertical Scrolling" tabindex="0"
+                                        data-l10n-id="pdfjs-scroll-vertical-button" role="radio" aria-checked="true"
+                                        v-show="props.options?.scrollVertical !== false">
+                                        <span data-l10n-id="pdfjs-scroll-vertical-button-label">Vertical
+                                            Scrolling</span>
+                                    </button>
+                                    <button id="scrollHorizontal" class="toolbarButton labeled" type="button"
+                                        title="Use Horizontal Scrolling" tabindex="0"
+                                        data-l10n-id="pdfjs-scroll-horizontal-button" role="radio" aria-checked="false"
+                                        v-show="props.options?.scrollHorizontal !== false">
+                                        <span data-l10n-id="pdfjs-scroll-horizontal-button-label">Horizontal
+                                            Scrolling</span>
+                                    </button>
+                                    <button id="scrollWrapped" class="toolbarButton labeled" type="button"
+                                        title="Use Wrapped Scrolling" tabindex="0"
+                                        data-l10n-id="pdfjs-scroll-wrapped-button" role="radio" aria-checked="false"
+                                        v-show="props.options?.scrollWrapped !== false">
+                                        <span data-l10n-id="pdfjs-scroll-wrapped-button-label">Wrapped
+                                            Scrolling</span>
+                                    </button>
+                                </div>
+
+                                <div class="horizontalToolbarSeparator"
+                                    v-show="props.options?.scrollPage !== false || props.options?.scrollVertical !== false || props.options?.scrollHorizontal !== false || props.options?.scrollWrapped !== false">
+                                </div>
+
+                                <div id="spreadModeButtons" role="radiogroup">
+                                    <button id="spreadNone" class="toolbarButton labeled toggled" type="button"
+                                        title="Do not join page spreads" tabindex="0"
+                                        data-l10n-id="pdfjs-spread-none-button" role="radio" aria-checked="true"
+                                        v-show="props.options?.spreadNone !== false">
+                                        <span data-l10n-id="pdfjs-spread-none-button-label">No Spreads</span>
+                                    </button>
+                                    <button id="spreadOdd" class="toolbarButton labeled" type="button"
+                                        title="Join page spreads starting with odd-numbered pages" tabindex="0"
+                                        data-l10n-id="pdfjs-spread-odd-button" role="radio" aria-checked="false"
+                                        v-show="props.options?.spreadOdd !== false">
+                                        <span data-l10n-id="pdfjs-spread-odd-button-label">Odd Spreads</span>
+                                    </button>
+                                    <button id="spreadEven" class="toolbarButton labeled" type="button"
+                                        title="Join page spreads starting with even-numbered pages" tabindex="0"
+                                        data-l10n-id="pdfjs-spread-even-button" role="radio" aria-checked="false"
+                                        v-show="props.options?.spreadEven !== false">
+                                        <span data-l10n-id="pdfjs-spread-even-button-label">Even Spreads</span>
+                                    </button>
+                                </div>
+
+                                <div id="imageAltTextSettingsSeparator" class="horizontalToolbarSeparator hidden">
+                                </div>
+                                <button id="imageAltTextSettings" type="button" class="toolbarButton labeled hidden"
+                                    title="Image alt text settings" tabindex="0"
+                                    data-l10n-id="pdfjs-image-alt-text-settings-button"
+                                    aria-controls="altTextSettingsDialog">
+                                    <span data-l10n-id="pdfjs-image-alt-text-settings-button-label">Image alt
+                                        text settings</span>
+                                </button>
+
+                                <div class="horizontalToolbarSeparator"
+                                    v-show="props.options?.spreadNone !== false || props.options?.spreadOdd !== false || props.options?.spreadEven !== false">
+                                </div>
+
+                                <button id="documentProperties" class="toolbarButton labeled" type="button"
+                                    title="Document Properties…" tabindex="0"
+                                    data-l10n-id="pdfjs-document-properties-button"
+                                    aria-controls="documentPropertiesDialog"
+                                    v-show="props.options?.documentProperties !== false">
+                                    <span data-l10n-id="pdfjs-document-properties-button-label">Document
+                                        Properties…</span>
+                                </button>
+                            </div>
+                        </div> <!-- secondaryToolbar -->
+                    </div>
+                </div>
+            </div>
+            <div id="loadingBar">
+                <div class="progress">
+                    <div class="glimmer">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/packages/vue/src/components/VuePDFjs.vue b/packages/vue/src/components/VuePDFjs.vue
index 7f1dd24..c65efaf 100644
--- a/packages/vue/src/components/VuePDFjs.vue
+++ b/packages/vue/src/components/VuePDFjs.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import '../assets/scss/main.scss'
 
-import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+import { onMounted, onUnmounted, ref, shallowRef, watch, provide } from 'vue';
 import { initViewer, PDFViewerApplicationOptions } from '../scripts/viewer';
 
 import OuterContainer from './OuterContainer.vue';
@@ -12,6 +12,8 @@ import { processSource } from '../scripts/utils';
 import { PDFDocumentLoadingTask, PDFDocumentProxy } from 'pdf.js/src/display/api';
 //@ts-ignore
 import { PDFViewerApplication } from 'pdf.js/web/app';
+import { ToolbarContainerProps } from './ToolbarContainer.vue';
+import { toolbarOptionsKey } from '@/keys';
 
 export interface VuePDFjsProps {
   source?: PDFSource | PDFSourceWithOptions | PDFDocumentProxy
@@ -20,7 +22,8 @@ export interface VuePDFjsProps {
     locale?: {
       code: string,
       ftl: string
-    }
+    },
+    toolbar?: ToolbarContainerProps
   }
 }
 
@@ -41,6 +44,8 @@ const pdfDocument = shallowRef<PDFDocumentProxy>()
 const pdfPages = shallowRef(0)
 const pdfInfo = shallowRef<PDFInfo | {}>({})
 
+provide(toolbarOptionsKey, props.options?.toolbar)
+
 async function init() {
   if (!container.value) {
     throw new Error('Container not found');
diff --git a/packages/vue/src/composable/usePDF.ts b/packages/vue/src/composable/usePDF.ts
index aca4274..6a803ea 100644
--- a/packages/vue/src/composable/usePDF.ts
+++ b/packages/vue/src/composable/usePDF.ts
@@ -1,63 +1,61 @@
-import { isRef, Ref, shallowRef, watch } from "vue";
-import { PDFInfo, PDFSource, PDFSourceOptions } from "../types";
-import { processSource } from "../scripts/utils";
+import { isRef, Ref, shallowRef, watch } from 'vue'
+import { PDFInfo, PDFSource, PDFSourceOptions } from '../types'
+import { processSource } from '../scripts/utils'
 //@ts-ignore
-import { PDFDocumentLoadingTask } from "pdf.js/src/display/api";
+import { PDFDocumentLoadingTask } from 'pdf.js/src/display/api'
 //@ts-ignore
 import * as PDFJS from 'pdf.js/src/pdf.js'
-import { PDFJSWorker } from "../scripts/viewer";
+import { PDFJSWorker } from '../scripts/viewer'
 
 export default function usePDF(source: PDFSource | Ref<PDFSource>, options?: PDFSourceOptions) {
+  if (!PDFJS.GlobalWorkerOptions?.workerSrc) PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker
 
-    if (!PDFJS.GlobalWorkerOptions?.workerSrc)
-        PDFJS.GlobalWorkerOptions.workerSrc = PDFJSWorker
+  const pdf = shallowRef<PDFDocumentLoadingTask>()
+  const pages = shallowRef(0)
+  const info = shallowRef<PDFInfo>()
 
-    const pdf = shallowRef<PDFDocumentLoadingTask>()
-    const pages = shallowRef(0)
-    const info = shallowRef<PDFInfo | {}>({})
+  const initDocument = async (inputSource: PDFSource) => {
+    const document = await processSource(inputSource, options)
 
-    const initDocument = async (inputSource: PDFSource) => {
-        const document = await processSource(inputSource, options);
-
-        if (!document) {
-            return
-        }
+    if (!document) {
+      return
+    }
 
-        pdf.value = document.loadingTask;
-        pages.value = document.numPages;
+    pdf.value = document.loadingTask
+    pages.value = document.numPages
 
-        const metadata = await document.getMetadata()
-        const attachments = (await document.getAttachments()) as Record<string, unknown>
-        const javascript = await document.getJSActions()
-        const outline = await document.getOutline()
+    const metadata = await document.getMetadata()
+    const attachments = (await document.getAttachments()) as Record<string, unknown>
+    const javascript = await document.getJSActions()
+    const outline = await document.getOutline()
 
-        info.value = {
-            metadata,
-            attachments,
-            javascript,
-            outline,
-        }
+    info.value = {
+      metadata,
+      attachments,
+      javascript,
+      outline
     }
+  }
 
-    if (isRef(source)) {
-        if (source.value) {
-            initDocument(source.value)
-        }
-
-        watch(source, () => {
-            if (source.value) {
-                initDocument(source.value)
-            }
-        })
-    } else {
-        if (source) {
-            initDocument(source)
-        }
+  if (isRef(source)) {
+    if (source.value) {
+      initDocument(source.value)
     }
 
-    return {
-        pdf,
-        pages,
-        info
+    watch(source, () => {
+      if (source.value) {
+        initDocument(source.value)
+      }
+    })
+  } else {
+    if (source) {
+      initDocument(source)
     }
-}
\ No newline at end of file
+  }
+
+  return {
+    pdf,
+    pages,
+    info
+  }
+}
diff --git a/packages/vue/src/keys.ts b/packages/vue/src/keys.ts
new file mode 100644
index 0000000..ec7ab3c
--- /dev/null
+++ b/packages/vue/src/keys.ts
@@ -0,0 +1 @@
+export const toolbarOptionsKey = Symbol()
\ No newline at end of file
diff --git a/packages/vue/src/scripts/utils.ts b/packages/vue/src/scripts/utils.ts
index 23956bb..3bb95be 100644
--- a/packages/vue/src/scripts/utils.ts
+++ b/packages/vue/src/scripts/utils.ts
@@ -1,98 +1,114 @@
 //@ts-ignore
-import { getDocument, PDFDocumentLoadingTask, PDFDocumentProxy } from "pdf.js/src/display/api"
-import { OnPasswordCallback, PDFSource, PDFSourceOptions, PDFSourceWithOptions, UpdatePasswordFn } from "../types"
+import { getDocument, PDFDocumentLoadingTask, PDFDocumentProxy } from 'pdf.js/src/display/api'
+import {
+  OnPasswordCallback,
+  PDFSource,
+  PDFSourceOptions,
+  PDFSourceWithOptions,
+  UpdatePasswordFn
+} from '../types'
 
 const getByteArray = function (file: File) {
-    const fileReader = new FileReader()
-    return new Promise(function (resolve: (value: Uint8Array) => void, reject) {
-        fileReader.readAsArrayBuffer(file)
-        fileReader.onload = function (ev: any) {
-            const array = new Uint8Array(ev.target.result)
-            const fileByteArray = []
-            for (let i = 0; i < array.length; i++) {
-                fileByteArray.push(array[i])
-            }
-            resolve(array)
-        }
-        fileReader.onerror = reject
-    })
+  const fileReader = new FileReader()
+  return new Promise(function (resolve: (value: Uint8Array) => void, reject) {
+    fileReader.readAsArrayBuffer(file)
+    fileReader.onload = function (ev: any) {
+      const array = new Uint8Array(ev.target.result)
+      const fileByteArray = []
+      for (let i = 0; i < array.length; i++) {
+        fileByteArray.push(array[i])
+      }
+      resolve(array)
+    }
+    fileReader.onerror = reject
+  })
 }
 
 export async function parseSourceFile(source: PDFSource): Promise<PDFDocumentLoadingTask> {
-
-    if (source == null || source === undefined) {
-        throw new Error('Invalid parameter')
-    }
-
-    if (source instanceof PDFDocumentLoadingTask) {
-        return source
-    }
-
-    if (source instanceof PDFDocumentProxy) {
-        return source.loadingTask;
-    }
-
-    if (source instanceof File) {
-        return getDocument(await getByteArray(source))
+  if (source == null || source === undefined) {
+    throw new Error('Invalid parameter')
+  }
+
+  if (source instanceof PDFDocumentLoadingTask) {
+    return source
+  }
+
+  if (source instanceof PDFDocumentProxy) {
+    return source.loadingTask
+  }
+
+  if (source instanceof File) {
+    return getDocument(await getByteArray(source))
+  }
+
+  if (source instanceof Blob) {
+    return getDocument(await source.arrayBuffer())
+  }
+
+  if (typeof source === 'string') {
+    if (source.startsWith('blob:')) {
+      const response = await fetch(source)
+      return getDocument(await response.arrayBuffer())
     }
-
-    if (source instanceof Blob) {
-        return getDocument(await source.arrayBuffer())
-    }
-
-    if (typeof source === 'string') {
-        if (source.startsWith('blob:')) {
-            const response = await fetch(source)
-            return getDocument(await response.arrayBuffer())
-        }
-        if (source.startsWith('data:application/pdf;base64,')) {
-            return getDocument(new Uint8Array(atob(source.split(',')[1])
-                .split('')
-                .map(function (c) {
-                    return c.charCodeAt(0)
-                })))
-        }
+    if (source.startsWith('data:application/pdf;base64,')) {
+      return getDocument(
+        new Uint8Array(
+          atob(source.split(',')[1])
+            .split('')
+            .map(function (c) {
+              return c.charCodeAt(0)
+            })
+        )
+      )
     }
+  }
 
-    return getDocument(source!)
+  return getDocument(source!)
 }
 
-export async function processSource(inputSource: PDFSource | PDFSourceWithOptions, sourceOptions?: PDFSourceOptions): Promise<PDFDocumentProxy | null> {
-    if (!inputSource) {
-        return null;
-    }
-
-    let source: PDFSource = null;
-    let options: PDFSourceOptions | null = sourceOptions ?? null;
+export async function processSource(
+  inputSource: PDFSource | PDFSourceWithOptions,
+  sourceOptions?: PDFSourceOptions
+): Promise<PDFDocumentProxy | null> {
+  if (!inputSource) {
+    return null
+  }
 
-    if ((inputSource as PDFSourceWithOptions).source) {
-        source = (inputSource as PDFSourceWithOptions).source;
+  let source: PDFSource = null
+  let options: PDFSourceOptions | null = sourceOptions ?? null
 
-        if ((inputSource as PDFSourceWithOptions).options) {
-            options = { ...options, ...(inputSource as PDFSourceWithOptions).options };
-        }
-    } else {
-        source = inputSource as PDFSource;
-    }
+  if ((inputSource as PDFSourceWithOptions).source) {
+    source = (inputSource as PDFSourceWithOptions).source
 
-    if (!source) {
-        return null;
+    if ((inputSource as PDFSourceWithOptions).options) {
+      options = { ...options, ...(inputSource as PDFSourceWithOptions).options }
     }
+  } else {
+    source = inputSource as PDFSource
+  }
 
-    const loadingTask = await parseSourceFile(source);
+  if (!source) {
+    return null
+  }
 
-    if (options?.onProgress) {
-        loadingTask.onProgress = options.onProgress;
+  const loadingTask = await parseSourceFile(source).catch((error) => {
+    if (options?.onError) {
+      options.onError(error)
     }
+  })
 
-    if (options?.onPassword) {
-        loadingTask.onPassword = options.onPassword;
-    } else if (options?.password) {
-        const onPassword: OnPasswordCallback = (updatePassword: UpdatePasswordFn) => {
-            updatePassword(options?.password ?? '');
-        }
-        loadingTask.onPassword = onPassword;
+  if (options?.onProgress) {
+    loadingTask.onProgress = options.onProgress
+  }
+
+  if (options?.onPassword) {
+    loadingTask.onPassword = options.onPassword
+  } else if (options?.password) {
+    const onPassword: OnPasswordCallback = (updatePassword: UpdatePasswordFn) => {
+      updatePassword(options?.password ?? '')
     }
+    loadingTask.onPassword = onPassword
+  }
 
-    return loadingTask.promise;
-}
\ No newline at end of file
+  return loadingTask.promise
+}
diff --git a/packages/vue/src/types.ts b/packages/vue/src/types.ts
index 5f0480c..711ff70 100644
--- a/packages/vue/src/types.ts
+++ b/packages/vue/src/types.ts
@@ -2,6 +2,7 @@
 import { TypedArray, DocumentInitParameters, PDFDocumentLoadingTask, OnProgressParameters, PDFDocumentProxy } from "pdf.js/src/display/api";
 //@ts-ignore
 import { Metadata } from "pdf.js/src/display/metadata";
+import { ToolbarContainerProps } from "./components/ToolbarContainer.vue";
 
 export type OnProgressCallback = (progressData: OnProgressParameters) => void
 export type UpdatePasswordFn = (newPassword: string) => void
@@ -33,7 +34,7 @@ export interface PDFSourceWithOptions {
 }
 
 export interface PDFInfoMetadata {
-    info: Object
+    info: any
     metadata: Metadata
 }
 
diff --git a/packages/vue/tests/mount.test.ts b/packages/vue/tests/mount.test.ts
new file mode 100644
index 0000000..c6cd2a3
--- /dev/null
+++ b/packages/vue/tests/mount.test.ts
@@ -0,0 +1,47 @@
+import { beforeAll, expect, test, vi } from 'vitest'
+import { render } from 'vitest-browser-vue'
+import { VuePDFjs, usePDF } from '@tuttarealstep/vue-pdf.js'
+import '@tuttarealstep/vue-pdf.js/dist/style.css'
+// @ts-ignore
+import enUS_FTL from '../../../node_modules/pdf.js/l10n/en-US/viewer.ftl?raw'
+
+const {
+  pdf: pdfDocument,
+  info: pdfInfo,
+  pages: pdfPages
+} = usePDF(
+  'https://raw.githubusercontent.com/mozilla/pdf.js/v4.8.69/web/compressed.tracemonkey-pldi-09.pdf'
+)
+
+beforeAll(async () => {
+  await vi.waitUntil(() => pdfDocument.value, { timeout: 5000 })
+})
+
+test('Render component', () => {
+  //Add a default css to make body > div height 100vh
+  const style = document.createElement('style')
+  style.innerHTML = 'body > div { height: 100vh }'
+  document.head.appendChild(style)
+
+  const screen = render(VuePDFjs, {
+    props: {
+      source: pdfDocument.value,
+      options: {
+        locale: {
+          code: 'en-US',
+          ftl: enUS_FTL
+        }
+      }
+    },
+    
+  })
+
+  //Expect the pdfInfo.value.metadata to be an object
+  expect(pdfInfo.value?.metadata).toBeTypeOf('object')
+
+  //Expect 14 pages
+  expect(pdfPages.value).toBe(14)
+
+  //Check in the rendered screen if the "#numPages" is "of 14"
+  expect(screen.getByText('of 14')).toBeTruthy()
+})
diff --git a/packages/vue/tests/options.test.ts b/packages/vue/tests/options.test.ts
new file mode 100644
index 0000000..f06d10c
--- /dev/null
+++ b/packages/vue/tests/options.test.ts
@@ -0,0 +1,57 @@
+import { beforeAll, expect, test, vi } from 'vitest'
+import { render } from 'vitest-browser-vue'
+import { VuePDFjs, usePDF } from '@tuttarealstep/vue-pdf.js'
+import '@tuttarealstep/vue-pdf.js/dist/style.css'
+// @ts-ignore
+import enUS_FTL from '../../../node_modules/pdf.js/l10n/en-US/viewer.ftl?raw'
+import { ref } from 'vue'
+
+const {
+  pdf: pdfDocument,
+  info: pdfInfo,
+  pages: pdfPages
+} = usePDF(
+  'https://raw.githubusercontent.com/mozilla/pdf.js/v4.8.69/web/compressed.tracemonkey-pldi-09.pdf'
+)
+
+beforeAll(async () => {
+  await vi.waitUntil(() => pdfDocument.value, { timeout: 5000 })
+})
+
+test('Test enable/disable options', () => {
+  //Add a default css to make body > div height 100vh
+  const style = document.createElement('style')
+  style.innerHTML = 'body > div { height: 100vh }'
+  document.head.appendChild(style)
+
+  const props = {
+    source: pdfDocument.value,
+    options: {
+      locale: {
+        code: 'en-US',
+        ftl: enUS_FTL
+      },
+      toolbar: {
+        options: {
+          editorStampButton: false
+        }
+      }
+    }
+  }
+
+  const screen = render(VuePDFjs, {
+    props
+  })
+
+  //Expect 14 pages
+  expect(pdfPages.value).toBe(14)
+
+  //Check in the rendered screen if the "#numPages" is "of 14"
+  expect(screen.getByText('of 14')).toBeTruthy()
+
+  // Expect the "#editorStamp" to exist
+  expect(screen.getByTestId('editorStamp')).toBeTruthy()
+
+  // Expect the "#editorStamp" display to not be "none"
+  expect(document.getElementById('editorStamp')?.style.display).toBe('none')
+})
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
index 72fe641..be6db4e 100644
--- a/packages/vue/tsconfig.json
+++ b/packages/vue/tsconfig.json
@@ -23,7 +23,7 @@
       "@/*": [
         "./src/*"
       ]
-    }
+    },
   },
   "include": [
     "src/**/*.ts",
@@ -31,5 +31,19 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "src/global.dt.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "src/**/*.js",
+    "src/**/*.map",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.test.js",
+    "src/**/*.test.jsx"
   ]
 }
\ No newline at end of file
diff --git a/packages/vue/vite.config.ts b/packages/vue/vite.config.ts
index 8449155..78be500 100644
--- a/packages/vue/vite.config.ts
+++ b/packages/vue/vite.config.ts
@@ -32,7 +32,7 @@ export default defineConfig({
           vue: "Vue"
         }
       }
-    }
+    },
   },
   resolve: {
     alias: {
@@ -45,6 +45,9 @@ export default defineConfig({
       'fluent-dom': fileURLToPath(new URL('../../node_modules/@fluent/dom/esm/index.js', import.meta.url)),
       'cached-iterable': fileURLToPath(new URL('../../node_modules/cached-iterable/src/index.mjs', import.meta.url)),
 
+      'display-cmap_reader_factory': fileURLToPath(new URL('../../node_modules/pdf.js/src/display/cmap_reader_factory.js', import.meta.url)),
+      'display-standard_fontdata_factory': fileURLToPath(new URL('../../node_modules/pdf.js/src/display/standard_fontdata_factory.js', import.meta.url)),
+      
       'display-fetch_stream': fileURLToPath(new URL('../../node_modules/pdf.js/src/display/fetch_stream.js', import.meta.url)),
       'display-network': fileURLToPath(new URL('../../node_modules/pdf.js/src/display/network.js', import.meta.url)),
       'display-node_stream': fileURLToPath(new URL('../../node_modules/pdf.js/src/display/stubs.js', import.meta.url)),
diff --git a/packages/vue/vitest.config.ts b/packages/vue/vitest.config.ts
new file mode 100644
index 0000000..fdf85ab
--- /dev/null
+++ b/packages/vue/vitest.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      browser: {
+        enabled: true,
+        headless: true,
+        name: 'chromium',
+        provider: 'playwright',
+        // https://playwright.dev
+        providerOptions: {},
+      },
+    }
+  })
+)