Google reCAPTCHA with Vue.js

If you’ve ever built a contact form, signup page, or comment section in Vue.js, you’ve likely encountered spam submissions from bots. The easiest and most effective way to stop this? Google reCAPTCHA.

In this tutorial, you’ll learn how to integrate Google reCAPTCHA v2 or v3 into a Vue 3 project using modern best practices.
Whether you’re securing a simple form or a full authentication system, this guide will walk you through everything you need to know.

🔒 What is Google reCAPTCHA?

Google reCAPTCHA is a free service from Google that helps protect your website from spam and abuse. It uses advanced risk analysis techniques to differentiate between humans and bots.

There are two main versions you can use with Vue:

reCAPTCHA v2: Displays a checkbox (“I’m not a robot”) or image challenge.
reCAPTCHA v3: Works invisibly in the background without user interaction.

🧩 Step 1: Get Your reCAPTCHA Site Key and Secret Key

Before adding reCAPTCHA to your Vue app, you’ll need to register your site.

Go to the Google reCAPTCHA Admin Console.
Choose reCAPTCHA v2 or v3.
Enter your domain (e.g., example.com or localhost for local testing).
Copy the Site Key and Secret Key — you’ll use the site key in your Vue frontend, and the secret key in your backend for verification.

⚙️ Step 2: Install the Vue reCAPTCHA Library

The easiest way to use reCAPTCHA in Vue is by installing a community package such as vue-recaptcha-v3 (for v3) or vue-recaptcha (for v2).

For reCAPTCHA v3:

npm install vue-recaptcha-v3

For reCAPTCHA v2:

npm install vue-recaptcha

🧠 Step 3: Add reCAPTCHA to Your Vue App

Example (reCAPTCHA v3 – Invisible)

// main.js
import { createApp } from 'vue'
import { VueReCaptcha } from 'vue-recaptcha-v3'
import App from './App.vue'

const app = createApp(App)

app.use(VueReCaptcha, {
  siteKey: 'YOUR_SITE_KEY', // replace with your actual site key
})

app.mount('#app')

Then, in your form component:

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="form.email" type="email" placeholder="Enter your email" />
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { useReCaptcha } from 'vue-recaptcha-v3'
import { ref } from 'vue'

const form = ref({ email: '' })
const { executeRecaptcha } = useReCaptcha()

const onSubmit = async () => {
  const token = await executeRecaptcha('form_submit')
  console.log('reCAPTCHA token:', token)
  // Send token + form data to your backend for verification
}
</script>

🔍 Step 4: Verify the Token on Your Server

Google requires that you verify the reCAPTCHA token on your backend using your secret key.

Here’s a simple Node.js (Express) example:

import express from 'express'
import fetch from 'node-fetch'

const app = express()
app.use(express.json())

app.post('/verify-recaptcha', async (req, res) => {
  const { token } = req.body
  const secret = process.env.RECAPTCHA_SECRET

  const response = await fetch(`https://www.google.com/recaptcha/api/siteverify`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `secret=${secret}&response=${token}`
  })

  const data = await response.json()

  if (data.success && data.score > 0.5) {
    return res.status(200).send({ success: true })
  } else {
    return res.status(400).send({ success: false, message: 'Failed reCAPTCHA' })
  }
})

app.listen(3000, () => console.log('Server running on port 3000'))

🧱 Step 5: Test and Debug

Try submitting your form:

Open DevTools → Network tab.
Check that a valid token is sent to your backend.
Ensure the backend verifies it successfully using Google’s endpoint.

If you get an error like “invalid-input-response”, make sure:

You’re using the correct site key (frontend) and secret key (backend).
The domain matches what you registered on the reCAPTCHA console.

💡 Best Practices

✅ Use reCAPTCHA v3 for seamless UX (no checkboxes).
✅ Always verify on the backend — don’t trust the token alone.
✅ Adjust the score threshold (default: 0.5) based on your app’s tolerance for risk.
✅ Combine reCAPTCHA with rate limiting or IP blocking for stronger protection.

📈 SEO Keywords

Keywords: Google reCAPTCHA Vue.js, Vue 3 reCAPTCHA, Vue reCAPTCHA tutorial, add reCAPTCHA to Vue form, secure Vue forms, reCAPTCHA v3 Vue example, reCAPTCHA verification Node.js.

🧭 Final Thoughts

Integrating Google reCAPTCHA with Vue.js is simple yet powerful. It protects your app from spam and automated attacks while maintaining a smooth user experience.

With just a few lines of code, you can make your forms more secure — and your users more confident.

If you found this guide helpful, share it or bookmark it for future projects. 🔗

Related Articles

Post Views: 13

Joseph Amirhom

Joseph Amirhom