Nuxt3でOpenSeadragonとOpenSeadragon SVG Overlayを使う

概要

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

• OpenSeadragon

https://nuxt3-demo-nine.vercel.app/osd

• OpenSeadragon SVG Overlay

https://nuxt3-demo-nine.vercel.app/osd-svg

方法

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

https://github.com/nakamura196/nuxt3-demo/blob/main/plugins/osd.client.js

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

https://github.com/openseadragon/svg-overlay/blob/master/openseadragon-svg-overlay.js

まとめ

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