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

nuxt3-demo-nine.vercel.app

nuxt3-demo-nine.vercel.app

• OpenSeadragon SVG Overlay

nuxt3-demo-nine.vercel.app

nuxt3-demo-nine.vercel.app

Method

A key point was preparing a plugin file as shown below. This resolved issues that occurred during 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

For the SVG overlay implementation, I referenced the following.

svg-overlay/openseadragon-svg-overlay.js at master · openseadragon/svg-overlay

An OpenSeadragon plugin that adds SVG overlay capability. - openseadragon/svg-overlay

GitHub

Summary

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