nuxt-community/recaptcha-module

When will be supporting using nuxt3?

KahrLu opened this issue · 3 comments

When will be supporting using nuxt3?

Would be nice to have any updates or roadmap plans for this

any update,
This worked for me
AurityLab/vue-recaptcha-v3#609

I've put together a simple composable using recaptcha-v3 and lazy inicialize.

// composables/useRecaptcha.js

import { load } from 'recaptcha-v3';

export const useRecaptcha = () => {
  let init;
  const recaptcha = ref(null);

  if (import.meta.client) {
    init = async(options) => {
      recaptcha.value = await load(useRuntimeConfig().public.recaptcha, {
        autoHideBadge: true,
        ...options,
      });
    };
  }

  return {
    init,
    recaptcha,
  };
};

Usage:

<template>
  <form @submit.prevent="submitForm">
    <button type="submit">Submit</button
  </form>
</template>

<script setup>
const { init, recaptcha } = useRecaptcha();

const submitForm = async() => {
  const token = await recaptcha.value?.execute('login');
  alert(token);
};

onMounted(() => {
  init();
});
</script>