title: Using nuxt.js google recaptcha module
body: <p>There is a problem that is wasting too much time. I installed the Nuxt js recaptcha module. but the information given in the documentation is insufficient. I haven't used recaptcha before. How exactly should I use it.</p>
  <blockquote>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;mx-auto mt-5&quot; style=&quot;width: 500px; max-width:90%&quot;&gt;
      &lt;div class=&quot;mx-auto mt-5&quot; style=&quot;width: 230px;&quot;&gt;
        &lt;img
          src=&quot;@/assets/media/images/site/logo.png&quot;
          style=&quot;width: 110px&quot;
        /&gt;.com'a Üye Olun
      &lt;/div&gt;
      &lt;div class=&quot;bg-white p-4 mt-2&quot; style=&quot;border-radius:20px&quot;&gt;
        &lt;b-form @submit.prevent=&quot;onSubmit&quot; @reset=&quot;onReset&quot; v-if=&quot;show&quot;&gt;
          &lt;b-form-group id=&quot;input-group-2&quot; label-for=&quot;input-2&quot;&gt;
            &lt;b-form-input
              id=&quot;input-2&quot;
              class=&quot;form-control form-control-lg&quot;
              v-model=&quot;form.userFullName&quot;
              placeholder=&quot;İsim soyisim&quot;
              required
            &gt;&lt;/b-form-input&gt;
          &lt;/b-form-group&gt;
          &lt;b-form-group id=&quot;input-group-2&quot; label-for=&quot;input-2&quot;&gt;
            &lt;b-form-input
              id=&quot;input-5&quot;
              class=&quot;form-control form-control-lg&quot;
              v-model=&quot;form.userName&quot;
              placeholder=&quot;Kullanıcı adı&quot;
              required
            &gt;&lt;/b-form-input&gt;
          &lt;/b-form-group&gt;
          &lt;b-form-row&gt;
            &lt;b-col&gt;
              &lt;b-form-input
                id=&quot;input-1&quot;
                v-model=&quot;form.userEmail&quot;
                type=&quot;email&quot;
                class=&quot;form-control form-control-lg&quot;
                placeholder=&quot;E-mail adresiniz&quot;
                required
              &gt;&lt;/b-form-input&gt;
            &lt;/b-col&gt;
            &lt;b-col&gt;
              &lt;b-form-input
                id=&quot;input-3&quot;
                v-model=&quot;form.userPassword&quot;
                class=&quot;form-control form-control-lg&quot;
                placeholder=&quot;Şifreniz&quot;
                required
              &gt;&lt;/b-form-input&gt;
            &lt;/b-col&gt;
          &lt;/b-form-row&gt;
  
          &lt;b-form-group
            id=&quot;input-group-4&quot;
            class=&quot;mt-3&quot;
            v-slot=&quot;{ ariaDescribedby }&quot;
          &gt;
            &lt;b-form-checkbox-group
              v-model=&quot;form.checked&quot;
              id=&quot;checkboxes-4&quot;
              :aria-describedby=&quot;ariaDescribedby&quot;
            &gt;
              &lt;b-form-checkbox class=&quot;text-dark&quot; value=&quot;1&quot;
                &gt;Beni Hatırla&lt;/b-form-checkbox
              &gt;
            &lt;/b-form-checkbox-group&gt;
          &lt;/b-form-group&gt;
  
          &lt;b-button
            :disabled=&quot;isClickSubmit&quot;
            type=&quot;submit&quot;
            class=&quot;btn btn-dark btn-lg btn-block&quot;
            variant=&quot;primary&quot;
          &gt;
            &lt;b-spinner v-if=&quot;isClickSubmit&quot; small style=&quot;margin-bottom:3px&quot; type=&quot;grow&quot;&gt;&lt;/b-spinner&gt;
            Kaydol&lt;/b-button
          &gt;
        &lt;/b-form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  </blockquote>
  <blockquote>
  <pre><code>import axios from &quot;axios&quot;;
  export default {
    layout: &quot;default&quot;,
    data() {
      return {
        isClickSubmit: false,
        form: {
          userEmail: &quot;&quot;,
          userFullName: &quot;&quot;,
          userName: &quot;&quot;,
          userPassword: null
        },
        show: true
      };
    },
    methods: {
      async mounted() {
        try {
          const bune = await this.$recaptcha.init();
          console.log(bune);
        } catch (e) {
          console.log(e);
        }
      },
      async onSubmit(event) {
        this.isClickSubmit = true;
        this.onReset();
        try {
          console.log(this.$recaptcha);
          const token = await this.$recaptcha.execute(&quot;login&quot;);
          console.log(&quot;ReCaptcha token:&quot;, token);
          //  await this.$recaptcha.reset()
          const form = this.form;
  
          const sonuc = await axios.post(&quot;http://localhost:3000/api/users&quot;, {
            form
          });
          this.isClickSubmit = false
        } catch (error) {
          console.log(&quot;Login error:&quot;, error);
        }
  
        //   console.log(JSON.stringify(this.form));
      },
  
      onReset() {
        this.form.userEmail = &quot;&quot;;
        this.form.userFullName = &quot;&quot;;
        this.form.userName = &quot;&quot;;
        this.form.userPassword = null
      }
    }
  };
  </code></pre>
  </blockquote>
  <p>nuxt.config.js:</p>
  <blockquote>
  <p>env: {
  GOOGLE_SECRET: '...'   },</p>
  <p>privateRuntimeConfig: {
  secretKey: process.env.GOOGLE_SECRET },</p>
  <p>modules: [</p>
  <pre><code>[
    &quot;@nuxtjs/recaptcha&quot;,
   {
     siteKey:process.env.GOOGLE_SECRET ,
     version: 3,
   }    ]
  </code></pre>
  <p>],</p>
  </blockquote>