virages/components/openseadragon.vue

<template>
  <div>
    openseadragon:
    <div ref="openSeadragonElt" style="width: 100%; height: 500px; background: transparent;"></div>
  </div>
</template>

<script setup>
// vips dzsave --layout iiif --id /vignemale/dz vignemale.png dz

import iiifConfig from './public/deepzoom/vignemale/dz/info.json'
import * as Annotorious from '@annotorious/openseadragon'
// import '@annotorious/openseadragon/dist/annotorious-openseadragon.css'

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
      })
      Annotorious(viewer, {})
    })
  }
})
</script>