https://github.com/vue-pdf-viewer/starter-vpv-composition-js
Vue PDF Viewer Starter toolkit with Composition API
https://github.com/vue-pdf-viewer/starter-vpv-composition-js
composition-api javascript pdf-viewer pdfjs pdfjs-dist vue vue-pdf vue-pdf-viewer vue3
Last synced: 5 months ago
JSON representation
Vue PDF Viewer Starter toolkit with Composition API
- Host: GitHub
- URL: https://github.com/vue-pdf-viewer/starter-vpv-composition-js
- Owner: vue-pdf-viewer
- Created: 2024-07-03T12:39:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-15T08:03:22.000Z (9 months ago)
- Last Synced: 2025-10-30T00:44:45.328Z (8 months ago)
- Topics: composition-api, javascript, pdf-viewer, pdfjs, pdfjs-dist, vue, vue-pdf, vue-pdf-viewer, vue3
- Language: Vue
- Homepage: https://vue-pdf-viewer.dev
- Size: 828 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue PDF Viewer Starter Toolkit in Vue 3 + Composition API
[](https://stackblitz.com/github/vue-pdf-viewer/starter-vpv-composition-js)
Welcome to the Vue PDF Viewer starter toolkit! This repository provides a comprehensive guide on how to use Vue PDF Viewer with Vue 3 via the Composition API. This repo showcases how Vue PDF Viewer can be integrated and rendered as part of a Vue.js project.
## Table of Contents
- [Usage](#usage)
- [Project Setup](#project-setup)
- [Running the Example Project](#running-the-example-project)
- [Examples](#examples)
## Usage
### Project Setup
1. **Clone the Repository**: If you haven't already, clone the repository and navigate into the project directory.
```bash
git clone https://github.com/your-username/starter-vpv-composition-ts.git
cd starter-vpv-composition-ts
```
2. **Install Dependencies**: Install the necessary dependencies using npm, yarn, pnpm or bun.
```bash
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```
_Remark: For `pnpm`, there is a bit more configuration required which can be found [here](https://docs.vue-pdf-viewer.dev/introduction/getting-started.html#install-vue-pdf-viewer)._
### Running the Example Project
This repository includes an example project to demonstrate Vue PDF Viewer in action:
1. **Start the Development Server**: Use the following command to start the development server
```bash
npm run dev
# or
yarn dev
# or
pnpm run dev
# or
bun run dev
```
2. **Open in Browser**: Open your browser and navigate to `http://localhost:5173` (or the port specified in your terminal) to see the example project in action
### Using the Vue PDF Viewer Component
Once the example project is running, you may explore the source code to see how the Vue PDF Viewer component is integrated. Here is a brief overview:
1. **Import the component**: Import the desired Vue PDF Viewer component into your Vue file
```vue
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
```
2. **Use the component in the template**: Add the Vue PDF Viewer component to your template section
```html
```
### Using the Vue PDF Viewer Component with Annotation
In this starter, we provide `src/components/AppPdfViewer.vue` as an example of how to use the annotation features within the viewer. Here’s a brief overview:
1. **Import the component and plugin**: Import the Vue PDF Viewer component along with the annotation plugin into your Vue file.
```vue
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotation from "@vue-pdf-viewer/annotation"
```
2. **Use the component with the plugin in your template**: Add the Vue PDF Viewer component to the template and pass the annotation plugin through the `plugins` prop.
```html
```
## Examples
For more examples, please refer to the `src/App.vue` file in this repository:
- Default Toolbar
- Without Toolbar
- Mobile View
- Default Toolbar with Annotation
_Remark: If you would like more examples, feel free to open an issue._
For more configurations, please check the [documentation](https://docs.vue-pdf-viewer.dev) site.
## Meta
- Homepage: [https://www.vue-pdf-viewer.dev](https://www.vue-pdf-viewer.dev)
- Docs: [https://docs.vue-pdf-viewer.dev](https://docs.vue-pdf-viewer.dev)
---
Thank you for using Vue PDF Viewer! We hope this toolkit helps you build amazing Vue 3 applications. If you have any questions or need further assistance on this example, please feel free to open an issue. Happy coding!