deep zoom image v1 !

components/openseadragon.vue

@@ -1,5 +1,26 @@
 <template>
   <div>
-    wait for openseadragon
+    openseadragon:
+    <div ref="openSeadragonElt" style="width: 100%; height: 500px;"></div>
   </div>
-</template>
+</template>
+
+<script setup>
+// vips dzsave --layout iiif --id /vignemale/dz vignemale.png dz
+
+import iiifConfig from './public/deepzoom/vignemale/dz/info.json'
+
+const openSeadragonElt = ref()
+
+onMounted(() => {
+  if (import.meta.client) {
+    import('openseadragon').then(OpenSeadragon => {
+      OpenSeadragon.default({
+        element: openSeadragonElt.value,
+        prefixUrl: 'https://openseadragon.github.io/openseadragon/images/',
+        tileSources: iiifConfig
+      })
+    })
+  }
+})
+</script>

composables/useOpenseadragon.ts

@@ -0,0 +1,5 @@
+export default () => {
+  onMounted(() => {
+    console.log('useOpenseardragon clearerly here')
+  })
+}

package-lock.json

@@ -10,6 +10,7 @@
         "atropos": "^2.0.2",
         "cheerio": "^1.0.0",
         "nuxt": "^3.12.3",
+        "openseadragon": "^5.0.0",
         "unhead": "^1.9.15",
         "vue": "^3.4.31",
         "vue-router": "^4.4.0"
@@ -5345,6 +5346,14 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/openseadragon": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/openseadragon/-/openseadragon-5.0.0.tgz",
+      "integrity": "sha512-S9aabSjmJg7Jfow1UItR5aXiKQLtkDWyRR5fxLeqT4vSYMvfscXUDfVS9snUN3JuIrHaSPJAlR4H2DYSn5DWRg==",
+      "funding": {
+        "url": "https://opencollective.com/openseadragon"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "atropos": "^2.0.2",
     "cheerio": "^1.0.0",
     "nuxt": "^3.12.3",
+    "openseadragon": "^5.0.0",
     "unhead": "^1.9.15",
     "vue": "^3.4.31",
     "vue-router": "^4.4.0"

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main">
+    <Openseadragon />
     <Article />
-    <!-- <Openseadragon /> -->
   </div>
 </template>