Overview

I created a sample program using the Annotorious OpenSeadragon Plugin that allows adding annotations to multiple images loaded from an IIIF manifest file. You can try it at the following link.

nakamura196.github.io
nakamura196.github.io

Source Code

Please refer to the following.

nuxt3-demo/pages/annotorious/index.vue at main · nakamura196/nuxt3-demo
Sample Repository for Nuxt3 Including Examples of Various Library Usages - nakamura196/nuxt3-demo
GitHub

Key Points

npm install --force

The library @recogito/annotorious-openseadragon does not appear to support openseadragon v5, so a forced installation was necessary.

npm error Could not resolve dependency:
npm error peer openseadragon@"^3.0.0 || ^4.0.0" from @recogito/annotorious-openseadragon@2.7.18
npm error node_modules/@recogito/annotorious-openseadragon
npm error   @recogito/annotorious-openseadragon@"^2.7.18" from the root project

plugins

I loaded Annotorious as a plugin.

nuxt3-demo/plugins/osd.client.js at main · nakamura196/nuxt3-demo
Sample Repository for Nuxt3 Including Examples of Various Library Usages - nakamura196/nuxt3-demo
GitHub

Page Navigation

When switching pages, it was necessary to clear annotations once and then load the annotations for the corresponding page.

...

// Reactive object to store annotations for each page
const annotationsMap = ref<{
  [key: number]: Annotation[];
}>({});

...

// Add handler to clear and display annotations on page navigation
  viewer.addHandler("page", () => {
    anno.clearAnnotations();
    showCurrentCanvasAnnotations();
  });

  // Function to display annotations for the current canvas
  const showCurrentCanvasAnnotations = () => {
    const index = viewer.currentPage();
    const annotationsMap_ = annotationsMap.value;

    if (annotationsMap_[index]) {
      annotationsMap_[index].forEach((annotation: Annotation) => {
        anno.addAnnotation(annotation);
      });
    }
  };

...

Summary

By extending this program, it should be possible to connect with other applications. I hope this serves as a helpful reference.