概要

Nuxt3でOpenSeadragonとOpenSeadragon SVG Overlayを使う例を作成しました。（鯰に御札を貼る要石）「国立国会図書館 所蔵」の画像を利用しています。

  • OpenSeadragon
nuxt3-demo-nine.vercel.app
nuxt3-demo-nine.vercel.app
  • OpenSeadragon SVG Overlay
nuxt3-demo-nine.vercel.app
nuxt3-demo-nine.vercel.app

方法

ポイントとして、以下のようなプラグインファイルを用意しました。これにより、SSR時に生じる不具合を解消できました。

nuxt3-demo/plugins/osd.client.js at main · nakamura196/nuxt3-demo
Sample Repository for Nuxt3 Including Examples of Various Library Usages - nakamura196/nuxt3-demo
GitHub

またsvg overlayに関する記述は以下を参考にしました。

svg-overlay/openseadragon-svg-overlay.js at master · openseadragon/svg-overlay
An OpenSeadragon plugin that adds SVG overlay capability. - openseadragon/svg-overlay
GitHub

まとめ

よりよい記述の方法があるかと思いますが、Nuxt3でのOpenSeadragonの利用にあたり、参考になりましたら幸いです。