Repository files navigation

Welcome to the Vue PDF Viewer starter toolkit! This repository is a showcase of how Vue PDF Viewer can be integrated and rendered as part of an Ionic project.

• Usage
  • Project Setup
  • Running the Example Project
• Examples

1. Clone the Repository: If you haven't already, clone the repository and navigate into the project directory.

   git clone https://github.com/your-username/starter-vpv-ionic-vue-js.gitcd starter-vpv-ionic-vue-js

2. Install Dependencies: Install the necessary dependencies using npm, yarn, pnpm or bun

   npm install# oryarn install# orpnpm install# orbun install

Remark: Forpnpm, there is a bit more configuration required which can be foundhere.

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

   ionic serve

2. Open in Browser: Open your browser and navigate tohttp://localhost:8100 (or the port specified in your terminal) to see the example project in action

Once the example project is running, you can 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 yourHomPage file

   <scriptsetup>  import{VPdfViewer} from "@vue-pdf-viewer/viewer";  import{IonPage,IonContent} from "@ionic/vue";</script>

2. Use the component in the template: Add the Vue PDF Viewer component to your template section

   <template><ion-page><ion-contentclass="ion-padding"><VPdfViewersrc="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"/></ion-content></ion-page></template>

For more examples, please refer to thesrc/views/HomePage.vue file in this repository:

• Default Toolbar
• Without Toolbar

Remark: If you would like more examples, feel free to open an issue.

For more configurations, please check thedocumentation site.

• Homepage:https://www.vue-pdf-viewer.dev
• Docs:https://docs.vue-pdf-viewer.dev

Thank you for using Vue PDF Viewer! We hope this toolkit helps you build amazing Ionic applications. If you have any questions or need further assistance on this example, please feel free to open an issue. Happy coding!