概要

以下のように、ページ全体にUniversal Viewerが表示されるページを作成しましたので、その備忘録です。Universal Viewer v4を使用しています。

https://nuxt3-demo-nine.vercel.app/uv/?manifest=https://dl.ndl.go.jp/api/iiif/3437686/manifest.json

ソースコード

以下のソースコードを参考にしてください。

https://github.com/nakamura196/nuxt3-demo/blob/main/public/uv/index.html

以下のページにある

https://github.com/UniversalViewer/universalviewer/wiki/UV-Examples

以下のサンプルを参考に、ページのリサイズに応じて、ビューアのサイズも変更されるようにしています。

https://codesandbox.io/s/uv-url-adapter-example-9d6x8

また、manifestというクエリパラメータを受け取る記述も含めています。

参考

以下を参考に、cdnを利用しない形でのNuxt3への導入を試みましたが、うまく動作させることができませんでした。こちらについては、引き続き調査を行いたいと思います。

https://codesandbox.io/s/uv-vite-example-9ie3rh

まとめ

以下のページで、v3を用いた全画面表示の例が公開されていますが、本記事執筆時点では、v4の例が見当たりませんでした。

https://universalviewer.io/examples/uv/uv.html#?manifest=https://dl.ndl.go.jp/api/iiif/3437686/manifest.json

参考になりましたら幸いです。