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.
Hello from Canvas Panel | Canvas Panel
Description will go into a meta tag in <head />
iiif-canvas-panel.netlify.appInstallation
npm i @digirati/canvas-panel-web-components
Page
Please refer to the following.
nuxt3-iiif-viewer/pages/canvas-panel/index.vue at main · nakamura196/nuxt3-iiif-viewer
Contribute to nakamura196/nuxt3-iiif-viewer development by creating an account on GitHub.
GitHubDisplay Example
nakamura196.github.io
Tify
This section covers the introduction of the following viewer.
GitHub - tify-iiif-viewer/tify: TIFY is a slim and mobile-friendly IIIF document viewer.
TIFY is a slim and mobile-friendly IIIF document viewer. - tify-iiif-viewer/tify
GitHubInstallation
npm i tify
Page
Please refer to the following.
nuxt3-iiif-viewer/pages/tify/index.vue at main · nakamura196/nuxt3-iiif-viewer
Contribute to nakamura196/nuxt3-iiif-viewer development by creating an account on GitHub.
GitHubIn the case of SSR, a document is not defined. error occurred, so I added the following file to the plugins.
nuxt3-iiif-viewer/plugins/tify.client.js at main · nakamura196/nuxt3-iiif-viewer
Contribute to nakamura196/nuxt3-iiif-viewer development by creating an account on GitHub.
GitHubDisplay Example
nakamura196.github.io
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.
Comments
…