概要
Nuxt3のssrでIIIF viewerを導入する方法の備忘録です。
Canvas Panel
以下のビューアの導入です。
Hello from Canvas Panel | Canvas Panel
Description will go into a meta tag in <head />
iiif-canvas-panel.netlify.appインストール
npm i @digirati/canvas-panel-web-components
page
以下を参考にしてください。
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.
GitHub表示例
nakamura196.github.io
Tify
以下のビューアの導入です。
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
GitHubインストール
npm i tify
page
以下を参考にしてください。
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.
GitHubssrの場合、document is not defined.のエラーが発生したため、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.
GitHub表示例
nakamura196.github.io
まとめ
他のビューアについても適宜追加していきたいと思います。
導入方法について、誤りやよりよい方法があるかもしれませんが、参考になりましたら幸いです。
動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。
コメント
…