fix: updates all examples to use async mount to async load nutrient viewer

Author: sashamilenkovic

frameworks/nuxt/JS/pages/basic-viewer.vue

@@ -1,63 +1,90 @@
 <script setup>
+import { onMounted, onUnmounted, ref } from "vue";
 import {
   loadBasicViewer,
   unloadBasicViewer,
-} from "../nutrient/basic-viewer/implementation.js";
+} from "../nutrient/basic-viewer/implementation";
+import { loadNutrientViewer } from "../nutrient/loadNutrientViewer";
 
 const containerRef = ref(null);
 
-onMounted(async () => {
-  // Wait for NutrientViewer to be available
-  while (!window.NutrientViewer) {
-    await new Promise((resolve) => setTimeout(resolve, 100));
-  }
+let nutrientViewer = null;
 
+onMounted(async () => {
   const container = containerRef.value;
-  const { NutrientViewer } = window;
 
-  if (container && NutrientViewer) {
-    loadBasicViewer(NutrientViewer, container);
+  if (!container) return;
+
+  try {
+    nutrientViewer = await loadNutrientViewer();
+
+    loadBasicViewer(nutrientViewer, container);
+  } catch (error) {
+    console.error("Failed to load Nutrient Viewer:", error);
   }
 });
 
 onUnmounted(() => {
   const container = containerRef.value;
-  const { NutrientViewer } = window;
 
-  if (container && NutrientViewer) {
-    unloadBasicViewer(NutrientViewer, container);
+  if (nutrientViewer && container) {
+    unloadBasicViewer(nutrientViewer, container);
   }
 });
 </script>
 
 <template>
-  <div :style="{ height: '100vh', display: 'flex', flexDirection: 'column' }">
-    <nav
-      :style="{
-        padding: '1rem',
-        backgroundColor: '#f5f5f5',
-        borderBottom: '1px solid #ddd',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '1rem',
-      }"
-    >
-      <NuxtLink
-        to="/"
-        :style="{
-          textDecoration: 'none',
-          color: '#4A8FED',
-          fontSize: '0.9rem',
-        }"
-      >
+  <div class="basic-viewer-container">
+    <nav class="basic-viewer-nav">
+      <router-link to="/" class="basic-viewer-back-link">
         ← Back to Examples
-      </NuxtLink>
-      <h2 :style="{ margin: 0, fontSize: '1.1rem' }">Basic Viewer</h2>
-      <span :style="{ fontSize: '0.9rem', color: '#666' }">
+      </router-link>
+      <h2 class="basic-viewer-title">Basic Viewer</h2>
+      <span class="basic-viewer-subtitle">
         Simple PDF viewing with standard controls
       </span>
     </nav>
 
-    <div ref="containerRef" :style="{ flex: 1, width: '100%' }" />
+    <div ref="containerRef" class="basic-viewer-content" />
   </div>
 </template>
+
+<style scoped>
+.basic-viewer-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.basic-viewer-nav {
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.basic-viewer-back-link {
+  text-decoration: none;
+  color: #4a8fed;
+  font-size: 0.9rem;
+}
+
+.basic-viewer-title {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.basic-viewer-subtitle {
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.basic-viewer-content {
+  flex: 1;
+  width: 100%;
+  position: relative;
+  min-height: 400px;
+}
+</style>

frameworks/nuxt/JS/pages/custom-overlays.vue

@@ -8,15 +8,15 @@ import { loadNutrientViewer } from "../nutrient/loadNutrientViewer";
 
 const containerRef = ref(null);
 
-onMounted(() => {
+let nutrientViewer = null;
+
+onMounted(async () => {
   const container = containerRef.value;
 
   if (!container) return;
 
-  let nutrientViewer = null;
-
   try {
-    nutrientViewer = loadNutrientViewer();
+    nutrientViewer = await loadNutrientViewer();
 
     nutrientViewer.unload(container);
 

frameworks/nuxt/JS/pages/magazine-mode.vue

@@ -1,23 +1,35 @@
 <script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import { loadNutrientViewer } from "../nutrient/loadNutrientViewer";
 import {
   loadMagazineViewer,
   unloadMagazineViewer,
-} from "../nutrient/magazine-mode/implementation.js";
+} from "../nutrient/magazine-mode/implementation";
 
 const containerRef = ref(null);
 
-onMounted(async () => {
-  // Wait for NutrientViewer to be available
-  while (!window.NutrientViewer) {
-    await new Promise((resolve) => setTimeout(resolve, 100));
-  }
+let nutrientViewer = null;
 
+onMounted(async () => {
   const container = containerRef.value;
-  const { NutrientViewer } = window;
 
-  if (container && NutrientViewer) {
-    loadMagazineViewer(NutrientViewer, container);
+  if (!container) return;
+
+  try {
+    nutrientViewer = await loadNutrientViewer();
+
+    nutrientViewer.unload(container);
+
+    loadMagazineViewer(nutrientViewer, container);
+  } catch (error) {
+    console.error("Failed to load Nutrient Viewer:", error);
   }
+
+  return () => {
+    if (nutrientViewer && container) {
+      unloadMagazineViewer(nutrientViewer, container);
+    }
+  };
 });
 
 onUnmounted(() => {
@@ -42,7 +54,7 @@ onUnmounted(() => {
         gap: '1rem',
       }"
     >
-      <NuxtLink
+      <router-link
         to="/"
         :style="{
           textDecoration: 'none',
@@ -51,7 +63,7 @@ onUnmounted(() => {
         }"
       >
         ← Back to Examples
-      </NuxtLink>
+      </router-link>
       <h2 :style="{ margin: 0, fontSize: '1.1rem' }">Magazine Mode</h2>
       <span :style="{ fontSize: '0.9rem', color: '#666' }">
         Double-page layout with custom toolbar and fullscreen support

frameworks/nuxt/TS/pages/basic-viewer.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type NutrientViewer from "@nutrient-sdk/viewer";
 import { onMounted, onUnmounted, ref } from "vue";
 import {
   loadBasicViewer,
@@ -8,15 +7,17 @@ import {
 import { loadNutrientViewer } from "../nutrient/loadNutrientViewer";
 
 const containerRef = ref<HTMLDivElement | null>(null);
-let nutrientViewer: ReturnType<typeof loadNutrientViewer>;
+
+let nutrientViewer: Awaited<ReturnType<typeof loadNutrientViewer>> | null =
+  null;
 
 onMounted(async () => {
   const container = containerRef.value;
 
   if (!container) return;
 
   try {
-    nutrientViewer = loadNutrientViewer();
+    nutrientViewer = await loadNutrientViewer();
 
     loadBasicViewer(nutrientViewer, container);
   } catch (error) {

frameworks/nuxt/TS/pages/custom-overlays.vue

@@ -8,15 +8,16 @@ import { loadNutrientViewer } from "../nutrient/loadNutrientViewer";
 
 const containerRef = ref<HTMLDivElement | null>(null);
 
-onMounted(() => {
+let nutrientViewer: Awaited<ReturnType<typeof loadNutrientViewer>> | null =
+  null;
+
+onMounted(async () => {
   const container = containerRef.value;
 
   if (!container) return;
 
-  let nutrientViewer: ReturnType<typeof loadNutrientViewer>;
-
   try {
-    nutrientViewer = loadNutrientViewer();
+    nutrientViewer = await loadNutrientViewer();
 
     nutrientViewer.unload(container);
 

frameworks/nuxt/TS/pages/magazine-mode.vue

@@ -8,15 +8,16 @@ import {
 
 const containerRef = ref<HTMLDivElement | null>(null);
 
-onMounted(() => {
+let nutrientViewer: Awaited<ReturnType<typeof loadNutrientViewer>> | null =
+  null;
+
+onMounted(async () => {
   const container = containerRef.value;
 
   if (!container) return;
 
-  let nutrientViewer: ReturnType<typeof loadNutrientViewer>;
-
   try {
-    nutrientViewer = loadNutrientViewer();
+    nutrientViewer = await loadNutrientViewer();
 
     nutrientViewer.unload(container);
 

frameworks/sveltekit/js/src/lib/pages/BasicViewerPage.svelte

@@ -13,7 +13,7 @@ onMount(async () => {
   if (!container) return;
 
   try {
-    nutrientViewer = loadNutrientViewer();
+    nutrientViewer = await loadNutrientViewer();
 
     loadBasicViewer(nutrientViewer, container);
   } catch (error) {

frameworks/sveltekit/js/src/lib/pages/CustomOverlaysPage.svelte

@@ -13,7 +13,7 @@ onMount(async () => {
   if (!container) return;
 
   try {
-    nutrientViewer = loadNutrientViewer();
+    nutrientViewer = await loadNutrientViewer();
 
     loadCustomOverlaysViewer(nutrientViewer, container);
   } catch (error) {

frameworks/sveltekit/js/src/lib/pages/MagazineModePage.svelte

@@ -13,7 +13,7 @@ onMount(async () => {
   if (!container) return;
 
   try {
-    nutrientViewer = loadNutrientViewer();
+    nutrientViewer = await loadNutrientViewer();
 
     loadMagazineViewer(nutrientViewer, container);
   } catch (error) {

frameworks/sveltekit/ts/src/lib/pages/BasicViewerPage.svelte

@@ -14,7 +14,7 @@ onMount(async () => {
   if (!container) return;
 
   try {
-    nutrientViewer = loadNutrientViewer();
+    nutrientViewer = await loadNutrientViewer();
 
     loadBasicViewer(nutrientViewer, container);
   } catch (error) {