How to use the library in Nuxt 2.14 (Vue 2.6)?

[serious-angel]

Dear Developers,

Thank you for the project!

Considering the documentation mainly oriented on Nuxt 3 and Vue 3, is it possible to anyhow use it in Nuxt 2.14 with Vue 2.6?

I've rewritten it to be more "Promise"-alike, and it's been in use [email protected] since mammoths probably. Yet, apparently, indeed this version does not support "action" in its "execute" method.

It's indeed a legacy project... and I hope it will be upgraded at some point...

Thank you in advance! 🪐

Current Version

Currently, I've been using it like this:

<template>
  <vue-recaptcha
    ref="recaptcha"
    :load-recaptcha-script="true"
    :sitekey="siteKey"
    size="invisible"
    @render="onCaptchaRender"
  />
</template>

<script lang="ts">
import Vue from 'vue'

// @todo Replace with a modern and more adequate alternative that supports `Promise`.
import VueRecaptcha from 'vue-recaptcha'

export default Vue.extend({
  name: 'V3VueRecaptcha',

  components: {
    // In order to load it at Nuxt client-side only
    VueRecaptcha: () => import('vue-recaptcha')
  },

  props: {
    siteKey: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      processing: false,
      initialized: false,
      ready: false,
      token: ''
    }
  },

  methods: {
    async execute(): Promise<string> {
      if (this.processing) {
        throw new Error('Already processing')
      }

      this.processing = true

      return await new Promise<string>((resolve, reject) => {
        // How to pass "action" for Recaptcha request?
        this.prepare(resolve, reject).execute()
      })
        .catch((error) => {
          this.onCaptchaError(error)

          throw error
        })
        .finally(() => {
          this.processing = false
        })
    },

    prepare(onVerify: (token: string) => void, onError: (error: Error) => void) {
      this.ready = false
      this.resetHandlers()

      const recaptcha = this.$refs.recaptcha as InstanceType<typeof VueRecaptcha>

      recaptcha.$once('error', (error: Error) => {
        this.onCaptchaError(error)
        onError(error)
      })

      recaptcha.$once('expired', () => {
        this.onCaptchaExpired()
      })

      recaptcha.$once('verify', (token: string) => {
        this.onCaptchaVerify(token)
        onVerify(token)
      })

      recaptcha.reset()
      this.ready = true

      return recaptcha
    },

    resetHandlers() {
      const recaptcha = this.$refs.recaptcha as InstanceType<typeof VueRecaptcha>
      recaptcha.$off('error')
      recaptcha.$off('expired')
      recaptcha.$off('verify')
    },

    onCaptchaRender(widgetId: number) {
      this.initialized = true
      this.$emit('render', widgetId)
    },

    onCaptchaError(error: Error) {
      console.error('[Captcha Error]', error)
      this.token = ''
      this.resetHandlers()
      this.processing = false
      this.$emit('error', error)

      if (this.$t) {
        throw new Error(this.$t('application.errors.captcha_request_failed') as string)
      }

      throw error
    },

    onCaptchaExpired() {
      this.token = ''
      this.resetHandlers()
      this.processing = false
      this.$emit('expired')
    },

    onCaptchaVerify(token: string) {
      this.token = token
      this.$emit('verify', token)
    }
  }
})
</script>

Environment

$ yarn list --pattern 'nuxt'
yarn list v1.22.19
├─ @aceforth/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
│  └─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxtjs/[email protected]
├─ @nuxtjs/[email protected]
├─ @nuxtjs/[email protected]
├─ @nuxtjs/[email protected]
├─ @nuxtjs/[email protected]
├─ @nuxtjs/[email protected]
├─ @nuxtjs/[email protected]
├─ @nuxtjs/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

$ yarn list --pattern 'vue'
yarn list v1.22.19
├─ @intlify/[email protected]
├─ @intlify/[email protected]
├─ @nuxt/[email protected]
├─ @nuxt/[email protected]
├─ @nuxtjs/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ @vue/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]