### reCAPTCHA v3 Initialization and Execution in Nuxt.js

Source: https://github.com/nuxt-community/recaptcha-module/blob/main/README.md

Explains how to initialize reCAPTCHA v3 using the `init` function in the `mounted` hook and how to execute it to get a token during form submission. It also covers destroying the reCAPTCHA instance.

```javascript
async mounted() {
  try {
    await this.$recaptcha.init()
  } catch (e) {
    console.error(e);
  }
}
```

```javascript
async onSubmit() {
  try {
    const token = await this.$recaptcha.execute('login')
    console.log('ReCaptcha token:', token)

    // send token to server alongside your form data

  } catch (error) {
    console.log('Login error:', error)
  }
}
```

```javascript
beforeDestroy() {
  this.$recaptcha.destroy()
}
```

--------------------------------

### Nuxt.js Module Setup with reCAPTCHA

Source: https://github.com/nuxt-community/recaptcha-module/blob/main/README.md

Demonstrates how to add the @nuxtjs/recaptcha module to your Nuxt.js project configuration. This can be done either within the 'modules' array directly or by using the top-level 'recaptcha' configuration option.

```javascript
{
  modules: [
    [
      '@nuxtjs/recaptcha', {
        /* reCAPTCHA options */
      }
    ],
  ]
}
```

```javascript
{
  modules: [
    '@nuxtjs/recaptcha',
  ],

  recaptcha: {
    /* reCAPTCHA options */
  },
}
```

--------------------------------

### Server-Side reCAPTCHA Token Verification (JavaScript)

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Verifies reCAPTCHA tokens on the server using Google's siteverify API. This example implements a Nuxt.js server middleware, taking a token as input and returning a success status along with optional v3 score and action.

```javascript
import { useBody } from 'h3'
import { $fetch } from 'ohmyfetch/node'

const SECRET_KEY = process.env.RECAPTCHA_SECRET_KEY

export default async (req, res) => {
  res.setHeader('Content-Type', 'application/json')

  try {
    const { token } = await useBody(req)

    if (!token) {
      return res.end(JSON.stringify({
        success: false,
        message: 'Invalid token'
      }))
    }

    // Verify token with Google
    const response = await $fetch(
      `https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEY}&response=${token}`
    )

    if (response.success) {
      // For v3, also check the score (0.0 - 1.0)
      // response.score > 0.5 typically indicates human
      res.end(JSON.stringify({
        success: true,
        message: 'Token verified',
        score: response.score,  // v3 only
        action: response.action // v3 only
      }))
    } else {
      res.end(JSON.stringify({
        success: false,
        message: 'Verification failed',
        errors: response['error-codes']
      }))
    }
  } catch (error) {
    console.error('reCAPTCHA verification error:', error)
    res.end(JSON.stringify({
      success: false,
      message: 'Internal server error'
    }))
  }
}
```

--------------------------------

### Get reCAPTCHA v2 Response with $recaptcha.getResponse()

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Get the reCAPTCHA response token for v2 widgets. For invisible v2, this triggers the challenge. Returns a Promise that resolves with the verification token. This method can also be used to reset the reCAPTCHA after submission.

```javascript
// In a Vue component - reCAPTCHA v2
export default {
  methods: {
    async onSubmit() {
      try {
        // Get the response token (triggers invisible challenge if needed)
        const token = await this.$recaptcha.getResponse()
        console.log('reCAPTCHA token:', token)

        // Send token to server along with form data
        const response = await fetch('/api/check-token', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            token,
            email: this.email,
            password: this.password
          })
        }).then(res => res.json())

        console.log('Server Response:', response)

        // Reset reCAPTCHA after successful submission
        await this.$recaptcha.reset()
      } catch (error) {
        console.error('Login error:', error)
      }
    }
  }
}
```

--------------------------------

### Initialize reCAPTCHA with $recaptcha.init()

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Initialize the reCAPTCHA instance, loading the Google reCAPTCHA script and preparing the widget. This method is required for v3 and automatically called by the `<recaptcha>` component for v2. It handles script loading and widget preparation.

```javascript
// In a Vue component
export default {
  async mounted() {
    try {
      await this.$recaptcha.init()
      console.log('reCAPTCHA initialized successfully')
    } catch (error) {
      console.error('Failed to initialize reCAPTCHA:', error)
    }
  }
}
```

--------------------------------

### Nuxt.js Runtime Configuration for reCAPTCHA

Source: https://github.com/nuxt-community/recaptcha-module/blob/main/README.md

Shows how to configure the reCAPTCHA site key using Nuxt.js's public runtime configuration. This allows the site key to be exposed to the client-side and potentially set via environment variables.

```javascript
// nuxt.config.js
export default {
  publicRuntimeConfig: {
    recaptcha: {
      /* reCAPTCHA options */
      siteKey: process.env.RECAPTCHA_SITE_KEY // for example
    }
  }
}
```

--------------------------------

### reCAPTCHA Module Configuration Options

Source: https://github.com/nuxt-community/recaptcha-module/blob/main/README.md

Lists the available configuration options for the @nuxtjs/recaptcha module. These options control aspects like hiding the badge, language, mode (base/enterprise), site key, version, and size.

```javascript
{
  // ...
  recaptcha: {
    hideBadge: Boolean, // Hide badge element (v3 & v2 via size=invisible)
    language: String,   // Recaptcha language (v2)
    mode: String,       // Mode: 'base', 'enterprise'
    siteKey: String,    // Site key for requests
    version: Number,    // Version
    size: String        // Size: 'compact', 'normal', 'invisible' (v2)
  },
  // ...
}
```

--------------------------------

### Execute reCAPTCHA v3 with $recaptcha.execute()

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Execute reCAPTCHA v3 verification and retrieve a token for server-side validation. The action parameter helps identify where the reCAPTCHA was triggered, aiding in analysis. This method requires prior initialization with $recaptcha.init().

```javascript
// In a Vue component - reCAPTCHA v3
export default {
  async mounted() {
    await this.$recaptcha.init()
  },

  methods: {
    async onSubmit() {
      try {
        // Execute with an action name (e.g., 'login', 'signup', 'checkout')
        const token = await this.$recaptcha.execute('login')
        console.log('reCAPTCHA token:', token)

        // Send token to your server for verification
        const response = await fetch('/api/verify', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            token,
            email: this.email,
            password: this.password
          })
        })
        const result = await response.json()
        console.log('Verification result:', result)
      } catch (error) {
        console.error('reCAPTCHA execution failed:', error)
      }
    }
  }
}
```

--------------------------------

### Complete reCAPTCHA v3 Page Implementation (Vue.js)

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Demonstrates a full reCAPTCHA v3 integration within a Nuxt.js Vue component, including initialization, token execution on form submission, and cleanup. It handles user input, API calls, and displays loading states.

```vue
<template>
  <section class="login-page">
    <h2>Sign In</h2>
    <form @submit.prevent="onSubmit">
      <input v-model="email" type="email" placeholder="Email" autocomplete="email" />
      <input v-model="password" type="password" placeholder="Password" autocomplete="current-password" />
      <button type="submit" :disabled="loading">
        {{ loading ? 'Signing in...' : 'Sign In' }}
      </button>
    </form>

    <!-- Required branding when hiding badge -->
    <small>
      This site is protected by reCAPTCHA and the Google
      <a href="https://policies.google.com/privacy">Privacy Policy</a> and
      <a href="https://policies.google.com/terms">Terms of Service</a> apply.
    </small>
  </section>
</template>

<script>
export default {
  data: () => ({
    email: '',
    password: '',
    loading: false
  }),

  async mounted() {
    try {
      await this.$recaptcha.init()
    } catch (error) {
      console.error('Failed to load reCAPTCHA:', error)
    }
  },

  beforeDestroy() {
    this.$recaptcha.destroy()
  },

  methods: {
    async onSubmit() {
      this.loading = true
      try {
        const token = await this.$recaptcha.execute('login')

        const response = await fetch('/api/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            token,
            email: this.email,
            password: this.password
          })
        }).then(res => res.json())

        if (response.success) {
          this.$router.push('/dashboard')
        } else {
          alert('Login failed: ' + response.message)
        }
      } catch (error) {
        console.error('Login error:', error)
        alert('An error occurred during login')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
```

--------------------------------

### reCAPTCHA v2 Component and Usage in Nuxt.js

Source: https://github.com/nuxt-community/recaptcha-module/blob/main/README.md

Illustrates how to use the reCAPTCHA v2 component within a Nuxt.js form and how to retrieve the reCAPTCHA token upon form submission. It also shows how to reset the reCAPTCHA after submission.

```vue
<form @submit.prevent="onSubmit">
  <input autocomplete="true" placeholder="Email" type="email" v-model="email">
  <input autocomplete="current-password" placeholder="Password" type="password" v-model="password">
  <recaptcha />
  <button type="submit">Sign In</button>
</form>
```

```javascript
async onSubmit() {
  try {
    const token = await this.$recaptcha.getResponse()
    console.log('ReCaptcha token:', token)

    // send token to server alongside your form data

    // at the end you need to reset recaptcha
    await this.$recaptcha.reset()
  } catch (error) {
    console.log('Login error:', error)
  }
}
```

--------------------------------

### Configure @nuxtjs/recaptcha with Runtime Config

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Use Nuxt's runtime config to inject reCAPTCHA settings from environment variables at runtime. This allows for dynamic configuration without modifying the nuxt.config.js file directly.

```javascript
// nuxt.config.js
export default {
  modules: ['@nuxtjs/recaptcha'],

  publicRuntimeConfig: {
    recaptcha: {
      siteKey: process.env.RECAPTCHA_SITE_KEY,
      version: 3,
      hideBadge: true
    }
  }
}
```

--------------------------------

### Configure @nuxtjs/recaptcha for Enterprise Mode

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Configure reCAPTCHA Enterprise for advanced bot detection using Google Cloud Console keys. This snippet demonstrates how to enable enterprise mode and set relevant configurations.

```javascript
// nuxt.config.js
module.exports = {
  modules: [
    ['@nuxtjs/recaptcha', {
      mode: 'enterprise',
      hideBadge: true,
      siteKey: process.env.RECAPTCHA_ENTERPRISE_SITE_KEY,
      version: 3
    }]
  ]
}
```

--------------------------------

### Programmatically Render reCAPTCHA Widget

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Renders a reCAPTCHA v2 widget on a specific element, supporting multiple widgets on the same page. It takes a reference to the target element and an options object, including sitekey and theme. Useful for dynamic form rendering.

```javascript
export default {
  data: () => ({
    loginWidgetId: null,
    signupWidgetId: null
  }),

  async mounted() {
    await this.$recaptcha.init()

    // Render first widget
    this.loginWidgetId = this.$recaptcha.render(this.$refs.loginRecaptcha, {
      sitekey: this.$recaptcha.siteKey,
      theme: 'light'
    })

    // Render second widget
    this.signupWidgetId = this.$recaptcha.render(this.$refs.signupRecaptcha, {
      sitekey: this.$recaptcha.siteKey,
      theme: 'dark'
    })
  },

  methods: {
    async submitLogin() {
      const token = await this.$recaptcha.getResponse(this.loginWidgetId)
      // Use token...
      this.$recaptcha.reset(this.loginWidgetId)
    }
  }
}
```

--------------------------------

### Configure @nuxtjs/recaptcha Module

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Configure the reCAPTCHA module in your nuxt.config.js to set the site key, version, and optional display settings. This snippet shows the basic module configuration.

```javascript
// nuxt.config.js
module.exports = {
  modules: [
    '@nuxtjs/recaptcha'
  ],

  recaptcha: {
    hideBadge: true,           // Hide badge element (v3 & v2 invisible)
    language: 'en',            // ReCaptcha language (v2 only)
    mode: 'base',              // 'base' or 'enterprise'
    siteKey: 'YOUR_SITE_KEY',  // Required: Site key from Google
    version: 3,                // Required: 2 or 3
    size: 'normal'             // v2 only: 'compact', 'normal', 'invisible'
  }
}
```

--------------------------------

### Subscribe to reCAPTCHA Events

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Subscribes to reCAPTCHA events, allowing you to react to different states of the reCAPTCHA verification. Available events include `recaptcha-success`, `recaptcha-error`, and `recaptcha-expired`. Callbacks receive relevant data like tokens or error objects.

```javascript
export default {
  mounted() {
    this.$recaptcha.init()

    // Listen for success
    this.$recaptcha.on('recaptcha-success', (token) => {
      console.log('Verification succeeded, token:', token)
    })

    // Listen for errors
    this.$recaptcha.on('recaptcha-error', (error) => {
      console.error('reCAPTCHA error:', error)
    })

    // Listen for expiration
    this.$recaptcha.on('recaptcha-expired', () => {
      console.warn('reCAPTCHA expired, please verify again')
      this.$recaptcha.reset()
    })
  }
}
```

--------------------------------

### Destroy reCAPTCHA Resources

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Removes reCAPTCHA scripts, styles, and the badge from the page. This method should be called in the `beforeDestroy` lifecycle hook, especially for reCAPTCHA v3 implementations, to clean up resources when leaving the page.

```javascript
export default {
  async mounted() {
    await this.$recaptcha.init()
  },

  beforeDestroy() {
    // Clean up reCAPTCHA resources when leaving the page
    this.$recaptcha.destroy()
    console.log('reCAPTCHA destroyed')
  },

  methods: {
    async onSubmit() {
      const token = await this.$recaptcha.execute('login')
      // Process form...
    }
  }
}
```

--------------------------------

### HTML for Hiding reCAPTCHA Badges

Source: https://github.com/nuxt-community/recaptcha-module/blob/main/README.md

Provides an HTML snippet to be included in the user flow when the reCAPTCHA badge is hidden. This ensures compliance with reCAPTCHA's terms of service by displaying branding and links to privacy policy and terms.

```html
<small>This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</small>
```

--------------------------------

### reCAPTCHA Vue Component (v2)

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

A Vue component for declarative integration of reCAPTCHA v2 widgets into forms. It supports customization via props like `data-theme`, `data-size`, and `data-badge`, and emits events for success, error, and expiration.

```vue
<template>
  <form @submit.prevent="onSubmit">
    <input v-model="email" type="email" placeholder="Email" />
    <input v-model="password" type="password" placeholder="Password" />

    <recaptcha
      @success="onSuccess"
      @error="onError"
      @expired="onExpired"
      data-theme="light"
      data-size="normal"
      data-badge="bottomright"
    />

    <button type="submit">Sign In</button>
  </form>
</template>

<script>
export default {
  data: () => ({
    email: '',
    password: ''
  }),

  methods: {
    onSuccess(token) {
      console.log('Verification succeeded:', token)
    },

    onError(error) {
      console.error('Verification failed:', error)
    },

    onExpired() {
      console.warn('Token expired')
    },

    async onSubmit() {
      try {
        const token = await this.$recaptcha.getResponse()
        // Submit form with token
        await this.$recaptcha.reset()
      } catch (error) {
        console.error('Submit error:', error)
      }
    }
  }
}
</script>
```

--------------------------------

### Reset reCAPTCHA Widget

Source: https://context7.com/nuxt-community/recaptcha-module/llms.txt

Resets the reCAPTCHA widget to allow users to solve another challenge. This method is useful after form submission or when a token has been consumed. It can be called with an optional widget ID to reset a specific widget.

```javascript
export default {
  methods: {
    async handleFormSubmit() {
      try {
        const token = await this.$recaptcha.getResponse()
        await this.submitForm(token)

        // Reset for next submission
        this.$recaptcha.reset()
        console.log('reCAPTCHA reset, ready for new challenge')
      } catch (error) {
        // Also reset on error to allow retry
        this.$recaptcha.reset()
        console.error('Submission failed:', error)
      }
    }
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.