Some test text!

Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

Web / Guides / NuxtJS

Platform


PDFTron is now Apryse, learn more here.

Integrating NuxtJS with WebViewer JavaScript PDF library

Welcome to Apryse. This guide will help you integrate a free trial of WebViewer into NuxtJS applications on the browser. It will help you clone the NuxtJS sample repository, walk through the project structure, and show you how to call other WebViewer API. Your free trial includes unlimited trial usage and support from solution engineers.

Prerequisites

Node.js is not required for WebViewer
WebViewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
No trial license key required.
The trial of Apryse SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

Initial setup

  1. Clone the webviewer-nuxtjs-sample repository:

    git clone https://github.com/PDFTron/webviewer-nuxtjs-sample.git
  2. Enter the directory and run npm install:

    cd webviewer-nuxtjs-sample
    npm install

    This will automatically download and extract the Apryse WebViewer Package.

You are now ready to run the sample or use more WebViewer APIs.

Sample overview

After initial setup, the webviewer-nuxtjs-sample directory should be laid out like this:

webviewer-nuxtjs-sample
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── CONTRIBUTING.md
├── babel.config.js
├── node_modules
│   ├── ...
├──components
│   ├── NuxtLogo.vue
│   └── WebViewer.vue
├── static
│   └── webviewer
│
├── plugins
│   └── vue-session.client.js     
│   
└── .nuxt
    └──...

Notable files and directories include:

File/FolderDescription
LICENSELists the copyright and license information.
package.jsonLists the manifest of the project and contains the author/version metadata.
static/WebViewerContains the static index.html page that is loaded onto the browser and all other resources for the nuxtJS project including the icon. This is also where the Webviewer core & ui is extracted to when you run npm install.
.nuxt/components/Contains all the JavaScript files and assets for the NuxtJS project
pagesContains the index.vue component which imports the WebViewer.vue component, adds styling and places it on the HTML page using a <div> tag.
static/WebViewer.vueThis is where the WebViewer API calls are placed once the component is mounted.

Run the sample

  1. Run the application by executing:

    npm start

    Then open a browser and go to localhost:3000 to see the application.

    Your app should look like this:

    Nuxt WebViewer Sample

    Note: If your browser does not open automatically to open the WebViewer, navigate to localhost:3000 to see the project.

Next step

Usage Guides Samples API docs

Get the answers you need: Support