概要

Nuxt3のssrでIIIF viewerを導入する方法の備忘録です。

Canvas Panel

以下のビューアの導入です。

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

インストール

npm i @digirati/canvas-panel-web-components

page

以下を参考にしてください。

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

表示例

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

Tify

以下のビューアの導入です。

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

インストール

npm i tify

page

以下を参考にしてください。

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

ssrの場合、document is not defined.のエラーが発生したため、pluginsに以下のファイルを追加しています。

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

表示例

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

まとめ

他のビューアについても適宜追加していきたいと思います。

導入方法について、誤りやよりよい方法があるかもしれませんが、参考になりましたら幸いです。

---

動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。