Some test text!
Web / Guides / NuxtJS
Platform
Documentation
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.
Clone the webviewer-nuxtjs-sample
repository:
git clone https://github.com/PDFTron/webviewer-nuxtjs-sample.git
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.
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/Folder | Description |
---|---|
LICENSE | Lists the copyright and license information. |
package.json | Lists the manifest of the project and contains the author/version metadata. |
static/WebViewer | Contains 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 |
pages | Contains 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.vue | This is where the WebViewer API calls are placed once the component is mounted. |
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:
Note: If your browser does not open automatically to open the WebViewer, navigate to localhost:3000
to see the project.
Get the answers you need: Support