nutrify vue composition api example

Author: divyanshu013

examples/vue-composition-api/.gitignore

@@ -30,4 +30,5 @@ coverage
 *.tsbuildinfo
 
 # Web SDK static files
-public/pspdfkit-lib/
+public/pspdfkit-lib/
+public/nutrient-viewer-lib/

examples/vue-composition-api/package.json

@@ -11,7 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "pspdfkit": "^2024.8.1",
+    "@nutrient-sdk/viewer": "^1.0.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {

examples/vue-composition-api/pnpm-lock.yaml

@@ -2,14 +2,14 @@
 import { onMounted, onUnmounted, useTemplateRef } from "vue";
 
 const containerRef = useTemplateRef("container");
-let PSPDFKit: typeof import("pspdfkit").default | undefined;
+let NutrientViewer: typeof import("@nutrient-sdk/viewer").default | undefined;
 
 onMounted(async () => {
-  PSPDFKit = (await import("pspdfkit")).default;
+  NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
   const container = containerRef.value;
 
-  if (container && PSPDFKit) {
-    PSPDFKit.load({
+  if (container && NutrientViewer) {
+    NutrientViewer.load({
       container,
       // you may also specify a file in public directory e.g. /document.pdf
       document: "https://www.nutrient.io/downloads/pspdfkit-web-demo.pdf",
@@ -22,8 +22,8 @@ onMounted(async () => {
 onUnmounted(() => {
   const container = containerRef.value;
 
-  if (container && PSPDFKit) {
-    PSPDFKit.unload(container);
+  if (container && NutrientViewer) {
+    NutrientViewer.unload(container);
   }
 });
 </script>

examples/vue-composition-api/src/App.vue

@@ -11,7 +11,7 @@ export default defineConfig({
     copy({
       targets: [
         {
-          src: "node_modules/pspdfkit/dist/pspdfkit-lib",
+          src: "node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib",
           dest: "public/",
         },
       ],