VPV Starter Toolkit in Nuxt 3 (SSR)

Welcome to the Vue PDF Viewer (VPV) starter toolkit! This repository provides a comprehensive guide on how to use VPV with Nuxt via the Composition API and TypeScript. This repo showcases how VPV can be integrated and rendered as part of a Nuxt project.

Installation
Usage
- Project Setup
- Running the Example Project
Examples

Installation

To get started, please clone this repo to your local machine and install the dependencies:

git clone https://github.com/your-username/starter-vpv-nuxt-ts.git
cd starter-vpv-nuxt-ts
npm install

Usage

Project Setup

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-nuxt-ts.git
cd starter-vpv-nuxt-ts
```
Install Dependencies: Install the necessary dependencies using npm or yarn
```
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._

Running the Example Project

This repo includes an example project to demonstrate how to use VPV. To run the example project:

Serve the Application: Use the following command to start the development server
```
npm run dev
# or
yarn dev
# or
pnpm run dev
# or
bun run dev
```
Open in Browser: Open your browser and navigate to http://localhost:3000 (or the port specified in your terminal) to see the example project in action

Using the VPV Component

Once the example project is running, you can explore the source code to see how the VPV component is integrated. Here is a brief overview:

Import the component: Import the desired VPV component into your Vue file

<script setup lang="ts">
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
</script>

Use the component in the template: Add the VPV component to your template section

<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
  </div>
</template>

Examples

For more examples, please refer to the src/App.vue file in this repository:

Default Toolbar
Without Toolbar
Mobile View

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

For more configurations, please check the documentation site.

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

vue-pdf-viewer / starter-vpv-nuxt-ts

readme