nuxt-community / recaptcha-module

🤖 Simple and easy Google reCAPTCHA integration with Nuxt.js
MIT License
253 stars 63 forks source link

When will be supporting using nuxt3? #106

Open KahrLu opened 2 years ago

kosmeln commented 2 years ago

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

mahdi-hsoumi commented 2 years ago

any update, This worked for me https://github.com/AurityLab/vue-recaptcha-v3/issues/609

Vesely commented 2 months ago

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>