Vue Adapter

The Vue adapter provides an <AnnotateImage> component with props, events, and exposed methods via template refs.

Installation
Bash 
npm install annotate-image vue
Usage (SFC)
Vue 
<script setup>
import { ref } from 'vue';
import { AnnotateImage } from 'annotate-image/vue';
import 'annotate-image/css';

const annotator = ref();
</script>

<template>
  <AnnotateImage
    ref="annotator"
    src="/photo.jpg"
    :width="800"
    :height="600"
    editable
    :notes="[]"
    @change="(notes) => console.log(notes)"
    @save="(note) => console.log('Saved:', note)"
    @delete="(note) => console.log('Deleted:', note)"
  />
  <button @click="annotator?.add()">Add Note</button>
</template>

Props

Prop Type Default Description
src String — Image URL (required)
width Number — Image width in pixels
height Number — Image height in pixels
notes AnnotationNote[] — Initial annotations
alt String — Image alt text
editable Boolean true Enable editing
autoResize Boolean true Re-scale on resize

Emits

Event Payload Description
change NoteData[] Notes changed
save NoteData Note saved
delete NoteData Note deleted
load NoteData[] Notes loaded
error AnnotateErrorContext Error occurred

Exposed Methods

Method Returns Description
add() void Enter add-note mode
clear() void Remove all annotations
getNotes() NoteData[] Get current annotations
notes Ref<NoteData[]> Reactive current notes

Live Demo