fix(model-viewer): handle page change

resources/app.ts

@@ -3,11 +3,11 @@ import 'virtual:uno.css'
 import '@unocss/reset/tailwind.css'
 import 'floating-vue/dist/style.css'
 
-import { createApp, h } from 'vue'
+import { createApp, h, ref } from 'vue'
 import { VTooltip } from 'floating-vue'
 import { createInertiaApp } from '@inertiajs/vue3'
 
-createInertiaApp({
+void createInertiaApp({
   progress: { color: '#5468FF' },
 
   resolve: (name) => {
@@ -16,42 +16,40 @@ createInertiaApp({
   },
 
   setup({ el, App, props, plugin }) {
-    createApp({ render: () => h(App, props) })
+    const app = createApp({ render: () => h(App, props) })
       .directive('tooltip', VTooltip)
       .use(plugin)
-      .mount(el)
-  },
-})
 
-let modelViewerScriptLoaded = false
+    const modelViewerScriptLoaded = ref(false)
+
+    app.config.globalProperties.modelViewerScriptLoaded = modelViewerScriptLoaded
 
-function loadModelViewerScript() {
-  if (!window.matchMedia('(min-width: 768px)').matches || modelViewerScriptLoaded) {
-    return
-  }
+    function loadModelViewerScript() {
+      if (modelViewerScriptLoaded.value || !window.matchMedia('(min-width: 768px)').matches) {
+        return
+      }
 
-  const scriptEl = document.createElement('script')
-  scriptEl.src = 'https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js'
-  scriptEl.async = true
-  scriptEl.type = 'module'
-  scriptEl.onload = () => {
-    const modelViewerEls = document.querySelectorAll('model-viewer[data-not-loaded]')
+      const scriptEl = document.createElement('script')
+      scriptEl.src = 'https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js'
+      scriptEl.async = true
+      scriptEl.type = 'module'
+      scriptEl.onload = () => {
+        modelViewerScriptLoaded.value = true
+      }
 
-    for (const modelViewerEl of modelViewerEls) {
-      modelViewerEl.removeAttribute('data-not-loaded')
+      document.body.appendChild(scriptEl)
     }
-  }
 
-  document.body.appendChild(scriptEl)
-  modelViewerScriptLoaded = true
-}
+    setTimeout(() => {
+      window.requestIdleCallback(() => {
+        loadModelViewerScript()
+      })
 
-setTimeout(() => {
-  window.requestIdleCallback(() => {
-    loadModelViewerScript()
-  })
+      window.addEventListener('resize', () => {
+        loadModelViewerScript()
+      })
+    }, 100)
 
-  window.addEventListener('resize', () => {
-    loadModelViewerScript()
-  })
-}, 100)
+    app.mount(el)
+  },
+})

resources/components/hero.vue

@@ -36,7 +36,7 @@ import Button from '@/components/ui/button.vue'
         </div>
 
         <model-viewer
-          data-not-loaded
+          :data-script-loaded="modelViewerScriptLoaded.value"
           alt="AdonisJS 3d logo"
           class="hidden h-110 flex-1"
           md="block"

resources/css/app.css

@@ -26,6 +26,6 @@ body .v-popper--theme-tooltip .v-popper__arrow-outer {
   @apply border-base4 backdrop-blur;
 }
 
-model-viewer[data-not-loaded] {
+model-viewer[data-script-loaded='false'] {
   @apply hidden;
 }

resources/types.ts

@@ -1 +1,9 @@
+import type { Ref } from 'vue'
+
 export * from '../types/main.js'
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    modelViewerScriptLoaded: Ref<boolean>
+  }
+}