Add Nuxt.js example for PSPDFKit integration

- Created a new Nuxt.js example project demonstrating the integration of PSPDFKit for Web.
- Added essential files including package.json, README.md, and configuration files for Nuxt.js setup.
- Implemented a basic layout with a PDF viewer using PSPDFKit, including file upload functionality.
- Included scripts for building and running the application, along with a post-install script to copy necessary PSPDFKit files.
- Added sample assets including a PDF document and favicon for demonstration.
- Introduced .gitignore to exclude unnecessary files and directories.
- Provided detailed instructions in the README for getting started and running the example.

Author: ritz078

examples/nuxtjs/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

examples/nuxtjs/.gitignore

@@ -0,0 +1,96 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+public/js/pspdfkit.js
+public/js/pspdfkit-lib/*.*
+
+.output
+.tool-versions

examples/nuxtjs/README.md

@@ -0,0 +1,63 @@
+# Nutrient Web SDK Example – Nuxt.js
+
+This example shows how to integrate [Nutrient Web SDK](https://www.nutrient.io/web/) into a Nuxt.js app.
+
+## Prerequisites
+
+- [Node.js](http://nodejs.org/) version 18.12.0 or higher.
+- Nutrient Web SDK (get your free trial [here](https://www.nutrient.io/try/))
+
+## Getting Started
+
+Clone the repo:
+
+```bash
+git clone https://github.com/PSPDFKit/pspdfkit-web-example-nuxtjs.git
+cd pspdfkit-web-example-nuxtjs
+```
+
+Install the project dependencies with `npm`:
+
+```bash
+npm install
+```
+
+## Nuxt.js Component
+
+The Nuxt.js component which implements the Nutrient Web SDK integration is included at `pages/index.vue` with the rest of the example.
+
+In order to make the Nutrient Web SDK's library available for building, we have to copy the `pspdfkit-lib/` directory from `node_modules/pspdfkit/dist/` into the `public/js/` directory. This is done in the `package.json` `postinstall` script.
+
+## Running the Example
+
+We are ready to launch the app! 🎉
+
+```bash
+# serve with hot reload at localhost:3000
+npm run dev
+
+# build for production and launch server
+npm run build
+npm start
+
+# generate static project
+npm run generate
+```
+
+You can now open http://localhost:3000 in your browser and enjoy!
+
+## Support, Issues and License Questions
+
+PSPDFKit offers support for customers with an active SDK license via https://www.nutrient.io/support/request/
+
+Are you [evaluating our SDK](https://www.nutrient.io/try/)? That's great, we're happy to help out! To make sure this is fast, please use a work email and have someone from your company fill out our sales form: https://www.nutrient.io/sales/
+
+## License
+
+This software is licensed under a [modified BSD license](LICENSE).
+
+## Contributing
+
+Please ensure
+[you have signed our CLA](https://www.nutrient.io/guides/web/current/miscellaneous/contributing/) so that we can
+accept your contributions.

examples/nuxtjs/components/PSPDFKitContainer.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="pdf-container"></div>
+</template>
+
+<script>
+/**
+ * Nutrient Web SDK example component.
+ */
+export default {
+  name: "PSPDFKit",
+  /**
+   * The component receives `pdfFile` as a prop, which is type of `String` and is required.
+   */
+  props: {
+    pdfFile: {
+      type: String,
+      required: true,
+    },
+  },
+  PSPDFKit: null,
+  /**
+   * We wait until the template has been rendered to load the document into the library.
+   */
+  mounted() {
+    this.loadPSPDFKit().then((instance) => {
+      this.$emit("loaded", instance);
+    });
+  },
+  /**
+   * We watch for `pdfFile` prop changes and trigger unloading and loading when there's a new document to load.
+   */
+  watch: {
+    pdfFile(val) {
+      if (val) {
+        this.loadPSPDFKit();
+      }
+    },
+  },
+  /**
+   * Our component has the `loadPSPDFKit` method. This unloads and cleans up the component and triggers document loading.
+   */
+  methods: {
+    async loadPSPDFKit() {
+      import("pspdfkit")
+        .then((PSPDFKit) => {
+          this.PSPDFKit = PSPDFKit;
+          PSPDFKit.unload(".pdf-container");
+          return PSPDFKit.load({
+            document: this.pdfFile,
+            container: ".pdf-container",
+            baseUrl: "http://localhost:3000/js/",
+          });
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pdf-container {
+  height: 100vh;
+}
+</style>

examples/nuxtjs/nuxt.config.js

@@ -0,0 +1,34 @@
+export default defineNuxtConfig({
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: "pspdfkit-nuxt-example",
+    htmlAttrs: {
+      lang: "en",
+    },
+    meta: [
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { hid: "description", name: "description", content: "" },
+      { name: "format-detection", content: "telephone=no" },
+    ],
+    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [],
+
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [],
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [],
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {},
+
+  // Target Configuration: https://go.nuxtjs.dev/config-target
+  target: "public",
+});