Support for Vue and Typescript?

[afnan]

Do you have any plans to support Vue3 and TS?

[rsimon]

I know that some people have used Annotorious with Vue. RecogitoJS's API is almost identical, so it should be fairly straightforward to wrap. I'm not planning an offical wrapper which would expose RecogitoJS as a component though. (I'd certainly love to see it - but, as far as I'm concerned, not enough bandwidth to work on it I'm afraid.)

Likewise for TypeScript: I'd love to see type declarations! Currently can't take care of it myself, but would welcome a Pull Request, or a separate package on definitelytyped. We've been discussing the same thing for Annotorious here: https://github.com/recogito/annotorious/issues/204

[Revadike]

I wrote this wrapper for nuxt.js (vue3):

<!-- eslint-disable vue/no-v-html -->
<script setup>
  import { Recogito } from '@recogito/recogito-js'
  import '@recogito/recogito-js/dist/recogito.min.css'

  const content = ref(null)
  const props = defineProps({
    text: {
      type: String,
      required: true
    },
    annotations: {
      type: Array,
      default: () => []
    }
  })

  const emit = defineEmits(['update:annotations'])

  const initRecogito = () => {
    const r = new Recogito({
      content: content.value,
      locale: 'nl-NL',
      widgets: [{ widget: 'COMMENT' }]
    })

    const { user } = useAuthStore()
    r.setAuthInfo({
      id: user.uid,
      displayName: user.displayName
    })

    watch(() => props.annotations, (newAnnotations) => {
      r.setAnnotations(newAnnotations)
    }, { immediate: true })

    r.on('createAnnotation', () => {
      emit('update:annotations', r.getAnnotations())
    })

    r.on('updateAnnotation', () => {
      emit('update:annotations', r.getAnnotations())
    })

    r.on('deleteAnnotation', () => {
      emit('update:annotations', r.getAnnotations())
    })
  }

  onMounted(initRecogito)
</script>

<template>
  <div
    v-if="text"
    ref="content"
    v-html="text"
  />
</template>

Feel free to adapt.