### Install Vue Turnstile with NPM, Yarn, or PNPM

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

Provides the necessary commands to install the vue-turnstile package using different package managers. This is a prerequisite for using the library in your project. No specific dependencies are required beyond Node.js and a package manager.

```bash
# Install via npm
npm install vue-turnstile --save

# Install via yarn
yarn add vue-turnstile

# Install via pnpm
pnpm add vue-turnstile

```

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

### Basic Vue 3 Component Usage of vue-turnstile

Source: https://github.com/ruigomeseu/vue-turnstile/blob/main/README.md

This example shows a basic Vue 3 component setup using the vue-turnstile component. It imports the component, registers it, and uses it in the template with a site key and v-model binding to capture the generated token. The token is then displayed in the component's template.

```vue
<script lang="ts">
import VueTurnstile from 'vue-turnstile';

export default {
  components: { VueTurnstile },

  data() {
    return {
      token: '',
    };
  },
};
</script>

<template>
  <div>
    <vue-turnstile site-key="1x00000000000000000000AA" v-model="token" />
    <div>Token: {{ token }}</div>
  </div>
</template>
```

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

### Advanced Vue Turnstile Configuration with Theme and Appearance

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

This example showcases advanced configuration options for the VueTurnstile component. It demonstrates how to customize the widget's theme, appearance mode, size, and reset interval, along with toggling the theme programmatically.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import VueTurnstile from 'vue-turnstile';

const token = ref('');
const theme = ref<'light' | 'dark' | 'auto'>('auto');
const appearance = ref<'always' | 'execute' | 'interaction-only'>('interaction-only');

const handleThemeToggle = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
};
</script>

<template>
  <div>
    <button @click="handleThemeToggle">Toggle Theme</button>

    <VueTurnstile
      site-key="1x00000000000000000000AA"
      v-model="token"
      :theme="theme"
      :appearance="appearance"
      size="compact"
      :reset-interval="240000"
      action="login"
      language="en"
    />

    <p>Current token: {{ token || 'No token yet' }}</p>
  </div>
</template>
```

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

### Install and Use Vue Turnstile with v-model Binding

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

This snippet demonstrates the basic installation and usage of the VueTurnstile component in a Vue 3 application. It utilizes v-model for reactive token management and includes a simple form submission handler to send the obtained token for verification.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import VueTurnstile from 'vue-turnstile';

const token = ref('');

const handleSubmit = async () => {
  if (!token.value) {
    alert('Please complete the CAPTCHA');
    return;
  }

  // Send token to your backend for verification
  const response = await fetch('/api/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token: token.value })
  });

  const result = await response.json();
  console.log('Verification result:', result);
};
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <VueTurnstile
      site-key="1x00000000000000000000AA"
      v-model="token"
    />
    <button type="submit" :disabled="!token">Submit</button>
    <p v-if="token">Token received: {{ token.substring(0, 20) }}...</p>
  </form>
</template>
```

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

### Install vue-turnstile with Yarn or NPM

Source: https://github.com/ruigomeseu/vue-turnstile/blob/main/README.md

This snippet demonstrates how to add the vue-turnstile library to your project's dependencies using either Yarn or NPM package managers.

```bash
yarn add vue-turnstile
```

```bash
npm install vue-turnstile --save
```

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

### Configure Vite for Vue Turnstile Library Build

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

This configuration uses Vite to build the vue-turnstile library. It specifies the entry point, library name, and output filename. Rollup options are included to handle external dependencies like Vue. This configuration is intended for library development.

```typescript
import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'VueTurnstile',
      fileName: 'vue-turnstile',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

```

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

### Configure Package.json for Vue Turnstile Module Exports

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

Defines the module exports for the vue-turnstile package in its package.json file. This configuration specifies the main entry points for different module systems (CommonJS, ES Module) and the TypeScript type definitions. This is crucial for how the package is consumed by other projects.

```json
{
  "name": "vue-turnstile",
  "version": "1.0.11",
  "type": "module",
  "main": "./dist/vue-turnstile.umd.cjs",
  "module": "./dist/vue-turnstile.js",
  "types": "./dist/VueTurnstile.vue.d.ts",
  "exports": {
    ".": {
      "types": "./dist/VueTurnstile.vue.d.ts",
      "import": "./dist/vue-turnstile.js",
      "require": "./dist/vue-turnstile.umd.cjs"
    }
  }
}

```

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

### Verify Turnstile Token Backend - Node.js/Express

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

This snippet illustrates the backend verification of a Turnstile token using Node.js with the Express.js framework. It receives the token from the frontend, sends it to Cloudflare's siteverify API for validation, and then processes the form data upon successful verification. Dependencies include express and node-fetch (or native fetch in newer Node.js versions).

```typescript
// Backend: Express.js verification endpoint
import express from 'express';

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

app.post('/submit', async (req, res) => {
  const { turnstileToken, ...formData } = req.body;

  // Verify Turnstile token with Cloudflare
  const turnstileResponse = await fetch(
    'https://challenges.cloudflare.com/turnstile/v0/siteverify',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        secret: process.env.TURNSTILE_SECRET_KEY,
        response: turnstileToken,
        remoteip: req.ip // optional
      })
    }
  );

  const outcome = await turnstileResponse.json();

  if (!outcome.success) {
    return res.status(400).json({
      success: false,
      message: 'Turnstile verification failed',
      errors: outcome['error-codes']
    });
  }

  // Process form data after successful verification
  // ... your business logic here ...

  res.json({
    success: true,
    message: 'Form submitted successfully',
    challenge_ts: outcome.challenge_ts,
    hostname: outcome.hostname
  });
});

app.listen(3000);

```

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

### Submit Form with Turnstile Token - Vue.js

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

This Vue.js snippet shows the frontend part of submitting a form that includes a Turnstile token. It uses the fetch API to send form data along with the captured Turnstile token to a backend endpoint. The code handles the token retrieval and prepares the data for submission. Dependencies include Vue.js and the vue-turnstile library.

```vue
// Frontend: Vue component
import { ref } from 'vue';
import VueTurnstile from 'vue-turnstile';

const token = ref('');
const verificationResult = ref<{ success: boolean; message: string } | null>(null);

const submitForm = async (formData: any) => {
  if (!token.value) {
    throw new Error('No Turnstile token');
  }

  const response = await fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      ...formData,
      turnstileToken: token.value
    })
  });

  verificationResult.value = await response.json();
  return verificationResult.value;
};

```

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

### Globally Register Vue Turnstile Component

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

Shows how to globally register the Vue Turnstile component in a Vue application's main entry file. This allows the component to be used in any template without explicit imports. This requires Vue.js and the vue-turnstile package.

```typescript
import { createApp } from 'vue';
import App from './App.vue';
import VueTurnstile from 'vue-turnstile';

const app = createApp(App);
app.component('VueTurnstile', VueTurnstile);
app.mount('#app');

```

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

### Programmatic Control of Vue Turnstile Widget

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

This snippet illustrates how to gain programmatic control over the VueTurnstile component using refs. It shows how to manually reset the widget, render it on demand, and handle form errors by resetting the Turnstile.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import VueTurnstile from 'vue-turnstile';

const token = ref('');
const turnstileRef = ref<InstanceType<typeof VueTurnstile> | null>(null);

const handleReset = () => {
  turnstileRef.value?.reset();
  console.log('Widget reset, token cleared');
};

const handleManualRender = () => {
  turnstileRef.value?.render();
  console.log('Widget manually rendered');
};

const handleFormError = () => {
  // Reset Turnstile after form validation error
  handleReset();
};
</script>

<template>
  <div>
    <VueTurnstile
      ref="turnstileRef"
      site-key="1x00000000000000000000AA"
      v-model="token"
      :render-on-mount="false"
    />

    <div class="controls">
      <button @click="handleManualRender">Render Widget</button>
      <button @click="handleReset">Reset Widget</button>
      <button @click="handleFormError">Simulate Form Error</button>
    </div>
  </div>
</template>
```

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

### Vue Multi-Step Form with Conditional Turnstile

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

Demonstrates implementing a multi-step form in Vue.js where the Turnstile widget is conditionally rendered only on the final step. It manages form state across steps and integrates the Turnstile component, ensuring the token is available before submission. This component requires Vue.js and the vue-turnstile library.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import VueTurnstile from 'vue-turnstile';

const currentStep = ref(1);
const token = ref('');
const formData = ref({
  step1: { name: '', email: '' },
  step2: { address: '', city: '' },
  step3: { terms: false }
});

const canProceed = computed(() => {
  if (currentStep.value === 1) {
    return formData.value.step1.name && formData.value.step1.email;
  }
  if (currentStep.value === 2) {
    return formData.value.step2.address && formData.value.step2.city;
  }
  if (currentStep.value === 3) {
    return formData.value.step3.terms && token.value;
  }
  return false;
});

const nextStep = () => {
  if (canProceed.value && currentStep.value < 3) {
    currentStep.value++;
  }
};

const submitFinalForm = async () => {
  if (!canProceed.value) return;

  const payload = {
    ...formData.value.step1,
    ...formData.value.step2,
    ...formData.value.step3,
    turnstileToken: token.value
  };

  await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });
};
</script>

<template>
  <div class="multi-step-form">
    <div v-if="currentStep === 1">
      <h2>Step 1: Personal Information</h2>
      <input v-model="formData.step1.name" placeholder="Name" />
      <input v-model="formData.step1.email" type="email" placeholder="Email" />
      <button @click="nextStep" :disabled="!canProceed">Next</button>
    </div>

    <div v-if="currentStep === 2">
      <h2>Step 2: Address</h2>
      <input v-model="formData.step2.address" placeholder="Address" />
      <input v-model="formData.step2.city" placeholder="City" />
      <button @click="nextStep" :disabled="!canProceed">Next</button>
    </div>

    <div v-if="currentStep === 3">
      <h2>Step 3: Verification</h2>
      <label>
        <input type="checkbox" v-model="formData.step3.terms" />
        I agree to the terms and conditions
      </label>

      <VueTurnstile
        site-key="1x00000000000000000000AA"
        v-model="token"
        :render-on-mount="true"
      />

      <button @click="submitFinalForm" :disabled="!canProceed">
        Submit
      </button>
    </div>
  </div>
</template>

```

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

### Handle Vue Turnstile Events - Vue.js

Source: https://context7.com/ruigomeseu/vue-turnstile/llms.txt

This snippet demonstrates how to handle various events emitted by the Vue Turnstile component. It includes handlers for errors, unsupported browsers, token expiration, and changes in interactive mode. The code uses Vue's reactivity system to log errors and update UI states. Dependencies include Vue.js and the vue-turnstile library.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import VueTurnstile from 'vue-turnstile';

const token = ref('');
const isInteractive = ref(false);
const errorLog = ref<string[]>([]);

const handleError = (code: string) => {
  const timestamp = new Date().toISOString();
  errorLog.value.push(`[${timestamp}] Error ${code}: Verification failed`);
  console.error('Turnstile error:', code);

  // Error codes: https://developers.cloudflare.com/turnstile/troubleshooting/client-side-errors/
  if (code === '110200') {
    console.error('Invalid site key');
  }
};

const handleUnsupported = () => {
  errorLog.value.push('Browser not supported by Turnstile');
  alert('Your browser is not supported. Please try a different browser.');
};

const handleExpired = () => {
  console.log('Token expired, widget should auto-reset');
  errorLog.value.push('Token expired');
};

const handleBeforeInteractive = () => {
  isInteractive.value = true;
  console.log('Challenge entering interactive mode');
};

const handleAfterInteractive = () => {
  isInteractive.value = false;
  console.log('Challenge left interactive mode');
};
</script>

<template>
  <div>
    <div v-if="isInteractive" class="interactive-notice">
      🤖 Please complete the interactive challenge
    </div>

    <VueTurnstile
      site-key="1x00000000000000000000AA"
      v-model="token"
      @error="handleError"
      @unsupported="handleUnsupported"
      @expired="handleExpired"
      @before-interactive="handleBeforeInteractive"
      @after-interactive="handleAfterInteractive"
    />

    <div v-if="errorLog.length" class="error-log">
      <h3>Error Log:</h3>
      <ul>
        <li v-for="(error, index) in errorLog" :key="index">{{ error }}</li>
      </ul>
    </div>
  </div>
</template>

```

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