Overview

I created examples of using OpenSeadragon and OpenSeadragon SVG Overlay with Nuxt3. The image used is (Catfish with Ofuda on Kaname-ishi) “National Diet Library Collection”.

  • OpenSeadragon

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

  • OpenSeadragon SVG Overlay

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

Method

A key point was preparing a plugin file as shown below. This resolved issues that occurred during SSR.

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

For the SVG overlay implementation, I referenced the following.

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

Summary

There may be better ways to write this, but I hope it is helpful for using OpenSeadragon with Nuxt3.