Overview

This is a memo on how to introduce an IIIF viewer in Nuxt3 with SSR.

Canvas Panel

This section covers the introduction of the following viewer.

https://iiif-canvas-panel.netlify.app/

Installation

npmi@digirati/canvas-panel-web-components

Page

Please refer to the following.

https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/canvas-panel/index.vue

Display Example

https://nakamura196.github.io/nuxt3-iiif-viewer/canvas-panel

Tify

This section covers the introduction of the following viewer.

https://github.com/tify-iiif-viewer/tify

Installation

npmitify

Page

Please refer to the following.

https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/tify/index.vue

In the case of SSR, a document is not defined. error occurred, so I added the following file to the plugins.

https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/plugins/tify.client.js

Display Example

https://nakamura196.github.io/nuxt3-iiif-viewer/tify

Summary

I plan to add other viewers as appropriate.

There may be errors or better approaches for integration, but I hope this serves as a useful reference.