### Install vue3-otp-input using pnpm

Source: https://github.com/ejirocodes/vue3-otp-input/blob/main/README.md

Installs the vue3-otp-input package using the pnpm package manager. This is the recommended way to add the component to your project.

```sh
pnpm i vue3-otp-input
```

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

### Install Vue3 OTP Input Component

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

Instructions for installing the vue3-otp-input package using different package managers like pnpm, npm, and yarn. This is the first step to integrate the component into your Vue 3 project.

```bash
# Install via pnpm
pnpm i vue3-otp-input

# Install via npm
npm install vue3-otp-input

# Install via yarn
yarn add vue3-otp-input
```

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

### CDN Installation for Vue3 OTP Input

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

Provides script tags for including the vue3-otp-input component directly in an HTML file via CDNs like unpkg and jsdelivr. This method is suitable for quick integration or projects not using a build tool.

```html
<!-- Via unpkg -->
<script src="https://unpkg.com/vue3-otp-input"></script>

<!-- Via jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/vue3-otp-input"></script>
```

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

### Use vue3-otp-input component in Vue template

Source: https://github.com/ejirocodes/vue3-otp-input/blob/main/README.md

Shows how to use the registered v-otp-input component within a Vue template. It includes examples of binding values, setting properties like num-inputs, separator, and event handlers.

```html
<template>
    <div style="display: flex; flex-direction: row">
      <v-otp-input
        ref="otpInput"
        input-classes="otp-input"
        :conditional-class="['one', 'two', 'three', 'four']"
        separator="-"
        input-type="letter-numeric"
        :num-inputs="4"
        v-model:value="bindValue"
        :should-auto-focus="true"
        :should-focus-order="true"
        @on-change="handleOnChange"
        @on-complete="handleOnComplete"
        :placeholder="['*', '*', '*', '*']"
      />
    </div>
    <button @click="clearInput()">Clear Input</button>
    <button @click="fillInput('2929')">Fill Input</button>
</template>

```

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

### Basic Usage of Vue3 OTP Input with TypeScript

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

Shows a basic example of using the `v-otp-input` component in a Vue 3 Single File Component (SFC) with TypeScript. It includes local registration, v-model binding, event handlers for change and completion, and programmatic control via refs.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import VOtpInput from 'vue3-otp-input'

const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null)
const bindModal = ref('')

const handleOnComplete = (value: string) => {
  console.log('OTP completed: ', value)
  // Send to API for verification
  verifyOTP(value)
}

const handleOnChange = (value: string) => {
  console.log('OTP changed: ', value)
  // Clear any previous errors
  clearErrors()
}

const clearInput = () => {
  otpInput.value?.clearInput()
}

const fillInput = (value: string) => {
  otpInput.value?.fillInput(value)
}

const verifyOTP = async (otp: string) => {
  try {
    const response = await fetch('/api/verify-otp', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ otp })
    })
    const result = await response.json()
    if (result.success) {
      console.log('OTP verified successfully')
    } else {
      clearInput()
      console.error('Invalid OTP')
    }
  } catch (error) {
    console.error('Verification failed:', error)
  }
}

const clearErrors = () => {
  // Error handling logic
}
</script>

<template>
  <div class="otp-container">
    <h2>Enter Verification Code</h2>
    <v-otp-input
      ref="otpInput"
      input-classes="otp-input"
      :num-inputs="6"
      v-model:value="bindModal"
      :should-auto-focus="true"
      @on-change="handleOnChange"
      @on-complete="handleOnComplete"
    />
    <div class="button-group">
      <button @click="clearInput()">Clear</button>
      <button @click="fillInput('123456')">Fill Test Code</button>
    </div>
  </div>
</template>

<style>
.otp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.otp-input {
  width: 50px;
  height: 50px;
  margin: 0 8px;
  font-size: 24px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  text-align: center;
  transition: border-color 0.3s;
}

.otp-input:focus {
  border-color: #4CAF50;
  outline: none;
}

.otp-input.is-complete {
  background-color: #e8f5e9;
  border-color: #4CAF50;
}

.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.button-group {
  display: flex;
  gap: 10px;
}
</style>
```

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

### Vue Letter-Numeric OTP Input Component

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

This Vue 3 script setup component utilizes the 'vue3-otp-input' library to create an 8-character letter-numeric input field. It handles code completion by converting the input to uppercase and sending it to an activation API. It also includes a placeholder for visual guidance and basic styling for the input fields. Dependencies include 'vue' and 'vue3-otp-input'.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import VOtpInput from 'vue3-otp-input'

const codeInput = ref<InstanceType<typeof VOtpInput> | null>(null)
const activationCode = ref('')

const handleCodeComplete = (value: string) => {
  console.log('Activation code entered:', value)

  // Submit to activation endpoint
  activateProduct(value.toUpperCase())
}

const activateProduct = async (code: string) => {
  try {
    const response = await fetch('/api/activate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ activationCode: code })
    })

    if (response.ok) {
      console.log('Product activated successfully')
    } else {
      console.error('Invalid activation code')
      codeInput.value?.clearInput()
    }
  } catch (error) {
    console.error('Activation failed:', error)
  }
}

const handlePaste = () => {
  console.log('Code pasted from clipboard')
}
</script>

<template>
  <div class="activation-form">
    <h3>Enter Activation Code</h3>
    <p>Please enter your 8-character alphanumeric code</p>
    <v-otp-input
      ref="codeInput"
      input-classes="activation-input"
      inputType="letter-numeric"
      inputmode="text"
      :num-inputs="8"
      separator=" "
      v-model:value="activationCode"
      :should-auto-focus="true"
      @on-complete="handleCodeComplete"
      @on-change="handlePaste"
      :placeholder="['X', 'X', 'X', 'X', 'Y', 'Y', 'Y', 'Y']"
    />
  </div>
</template>

<style>
.activation-form {
  padding: 30px;
  text-align: center;
}

.activation-input {
  width: 42px;
  height: 50px;
  margin: 0 6px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 6px;
  border: 2px solid #dee2e6;
  text-align: center;
  font-family: 'Courier New', monospace;
}

.activation-input:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.activation-input.is-complete {
  background-color: #d1ecf1;
  border-color: #17a2b8;
}

.activation-input::placeholder {
  color: #adb5bd;
  font-weight: normal;
}
</style>
```

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

### Global Registration of Vue3 OTP Input Component

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

Demonstrates how to globally register the `v-otp-input` component in a Vue 3 application's main entry file (e.g., `main.ts`). This makes the component available throughout the application without needing local imports in each component.

```typescript
// main.ts or main.js
import { createApp } from 'vue'
import App from './App.vue'
import VOtpInput from 'vue3-otp-input'

const app = createApp(App)
app.component('v-otp-input', VOtpInput)
app.mount('#app')
```

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

### Vue 3 OTP Input Component with Full Prop Configuration

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

This snippet demonstrates how to use the v-otp-input component with a comprehensive set of props for customization. It includes configurations for number of inputs, separators, custom classes, input types, focus behavior, placeholders, and disable state. Event handlers for input changes and completion are also shown, along with buttons for programmatic control.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import VOtpInput from 'vue3-otp-input'

const otpRef = ref<InstanceType<typeof VOtpInput> | null>(null)
const otpValue = ref('')
const isDisabled = ref(false)

// Full props configuration
const otpConfig = {
  numInputs: 5,
  separator: '-',
  inputClasses: 'custom-otp-input',
  conditionalClass: ['c1', 'c2', 'c3', 'c4', 'c5'],
  inputType: 'tel' as const,
  inputmode: 'numeric' as const,
  shouldAutoFocus: true,
  shouldFocusOrder: true,
  placeholder: ['1', '2', '3', '4', '5'],
  isDisabled: false
}

const handleChange = (value: string) => {
  console.log('Current value:', value)
}

const handleComplete = (value: string) => {
  console.log('Completed value:', value)
}

const toggleDisable = () => {
  isDisabled.value = !isDisabled.value
}

const programmaticFill = () => {
  otpRef.value?.fillInput('12345')
}

const programmaticClear = () => {
  otpRef.value?.clearInput()
}
</script>

<template>
  <div>
    <v-otp-input
      ref="otpRef"
      :num-inputs="otpConfig.numInputs"
      :separator="otpConfig.separator"
      :input-classes="otpConfig.inputClasses"
      :conditionalClass="otpConfig.conditionalClass"
      :inputType="otpConfig.inputType"
      :inputmode="otpConfig.inputmode"
      :should-auto-focus="otpConfig.shouldAutoFocus"
      :should-focus-order="otpConfig.shouldFocusOrder"
      :placeholder="otpConfig.placeholder"
      :is-disabled="isDisabled"
      v-model:value="otpValue"
      @on-change="handleChange"
      @on-complete="handleComplete"
    />

    <div class="controls">
      <button @click="programmaticClear">Clear</button>
      <button @click="programmaticFill">Fill</button>
      <button @click="toggleDisable">
        {{ isDisabled ? 'Enable' : 'Disable' }}
      </button>
    </div>

    <div class="output">
      <p>Current Value: {{otpValue }}</p>
      <p>Length: {{otpValue.length }}</p>
    </div>
  </div>
</template>

<style>
.custom-otp-input {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  font-size: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}

.controls {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.controls button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.controls button:hover {
  background-color: #0056b3;
}

.output {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.custom-otp-input.c1.is-complete { background-color: #ffebee; }
.custom-otp-input.c2.is-complete { background-color: #e3f2fd; }
.custom-otp-input.c3.is-complete { background-color: #e8f5e9; }
.custom-otp-input.c4.is-complete { background-color: #fff3e0; }
.custom-otp-input.c5.is-complete { background-color: #f3e5f5; }
</style>
```

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

### Register vue3-otp-input globally as a Vue component

Source: https://github.com/ejirocodes/vue3-otp-input/blob/main/README.md

Illustrates how to register the VOtpInput component globally in a Vue 3 application's main entry file (main.js or main.ts). This makes the component available in any template without explicit imports.

```js
//  main.js or main.ts
import { createApp } from 'vue'
import App from './App.vue'

import VOtpInput from "vue3-otp-input";

const app = createApp(App)

app.component('v-otp-input', VOtpInput).mount('#app')

```

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

### Control Vue 3 OTP Input with Exposed Methods (Vue)

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

This snippet shows how to use the `ref` attribute to access and control the `VOtpInput` component. It demonstrates pre-filling OTPs from URL parameters, clearing the input, filling from clipboard content, and handling input changes and completion events. It requires the `vue3-otp-input` package.

```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import VOtpInput from 'vue3-otp-input'

const otpRef = ref<InstanceType<typeof VOtpInput> | null>(null)
const currentOtp = ref('')
const history = ref<string[]>([])

// Example: Pre-fill OTP from SMS or email link
onMounted(() => {
  const urlParams = new URLSearchParams(window.location.search)
  const prefilledOtp = urlParams.get('otp')

  if (prefilledOtp && otpRef.value) {
    setTimeout(() => {
      otpRef.value?.fillInput(prefilledOtp)
    }, 500)
  }
})

const clearOtp = () => {
  if (otpRef.value) {
    otpRef.value.clearInput()
    console.log('OTP cleared')
  }
}

const fillFromClipboard = async () => {
  try {
    const text = await navigator.clipboard.readText()
    if (text && text.length === 6 && /^\d+$/.test(text)) {
      otpRef.value?.fillInput(text)
      console.log('Filled from clipboard:', text)
    } else {
      console.error('Invalid clipboard content')
    }
  } catch (err) {
    console.error('Failed to read clipboard:', err)
  }
}

const fillTestCode = () => {
  const testCode = '123456'
  otpRef.value?.fillInput(testCode)
  console.log('Filled test code:', testCode)
}

const handleChange = (value: string) => {
  currentOtp.value = value
  if (value) {
    history.value.push(value)
  }
}

const handleComplete = (value: string) => {
  console.log('OTP submission ready:', value)
  // Auto-submit form or trigger verification
  submitOtpToServer(value)
}

const submitOtpToServer = async (otp: string) => {
  console.log('Submitting OTP:', otp)
  // Implementation
}

const resendCode = () => {
  clearOtp()
  // Trigger resend API call
  console.log('Resending verification code...')
}
</script>

<template>
  <div class="otp-verification">
    <h2>Two-Factor Authentication</h2>
    <p>Enter the 6-digit code sent to your device</p>

    <v-otp-input
      ref="otpRef"
      input-classes="verification-input"
      :num-inputs="6"
      inputType="tel"
      v-model:value="currentOtp"
      :should-auto-focus="true"
      @on-change="handleChange"
      @on-complete="handleComplete"
    />

    <div class="action-buttons">
      <button @click="clearOtp" class="btn-secondary">Clear</button>
      <button @click="fillFromClipboard" class="btn-primary">Paste</button>
      <button @click="fillTestCode" class="btn-info">Test</button>
    </div>

    <button @click="resendCode" class="resend-link">
      Didn't receive code? Resend
    </button>

    <div v-if="history.length > 0" class="debug-info">
      <h4>Input History:</h4>
      <ul>
        <li v-for="(entry, index) in history.slice(-5)" :key="index">
          {{ entry }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style>
.otp-verification {
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.verification-input {
  width: 48px;
  height: 56px;
  margin: 0 8px;
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  transition: all 0.2s;
}

.verification-input:focus {
  border-color: #4CAF50;
  transform: scale(1.05);
}

.verification-input.is-complete {
  background-color: #e8f5e9;
  border-color: #4CAF50;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.action-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-info {
  background-color: #17a2b8;
  color: white;
}

.resend-link {
  margin-top: 20px;
  background: none;
  border: none;
  color: #007bff;
  cursor: pointer;
  text-decoration: underline;
}

.debug-info {
  margin-top: 30px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
  text-align: left;
}

.debug-info h4 {
  margin-top: 0;
}

.debug-info ul {
  list-style: none;
  padding: 0;
}

.debug-info li {
  padding: 5px;
  font-family: monospace;
}
</style>
```

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

### Register vue3-otp-input locally as a Vue component

Source: https://github.com/ejirocodes/vue3-otp-input/blob/main/README.md

Demonstrates how to import and register the VOtpInput component locally within a Vue 3 application using the Composition API. It shows ref usage for accessing component methods and binding values.

```ts
<script setup lang="ts">
import { ref } from "vue";
import VOtpInput from "vue3-otp-input";

const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null);
const bindModal = ref("");

const handleOnComplete = (value: string) => {
  console.log("OTP completed: ", value);
};

const handleOnChange = (value: string) => {
  console.log("OTP changed: ", value);
};

const clearInput = () => {
  otpInput.value?.clearInput();
};

const fillInput = (value: string) => {
  console.log(value);
  otpInput.value?.fillInput(value);
};
</script>


```

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

### Basic styling for vue3-otp-input

Source: https://github.com/ejirocodes/vue3-otp-input/blob/main/README.md

Provides basic CSS styles for the OTP input fields. These styles should be placed in a non-scoped `<style>` tag in your Vue component to apply globally to the OTP input elements.

```css
<style>
.otp-input {
  width: 40px;
  height: 40px;
  padding: 5px;
  margin: 0 10px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
}
/* Background colour of an input field with value */
.otp-input.is-complete {
  background-color: #e4e4e4;
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input::placeholder {
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}
</style>

```

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

### Vue OTP Input with Separator and Conditional Styling

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

Demonstrates using the VOtpInput component with a custom separator ('-') and conditional styling applied to each digit based on its position. It includes simulated API validation for the entered OTP.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import VOtpInput from 'vue3-otp-input'

const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null)
const otpValue = ref('')
const isError = ref(false)

const handleComplete = async (value: string) => {
  console.log('Complete OTP:', value)

  // Simulate API validation
  const isValid = await validateOTP(value)

  if (!isValid) {
    isError.value = true
    setTimeout(() => {
      otpInput.value?.clearInput()
      isError.value = false
    }, 1000)
  }
}

const validateOTP = async (otp: string): Promise<boolean> => {
  // Simulated API call
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(otp === '1234')
    }, 500)
  })
}
</script>

<template>
  <div class="secure-otp">
    <v-otp-input
      ref="otpInput"
      input-classes="otp-input"
      :conditionalClass="['digit-1', 'digit-2', 'digit-3', 'digit-4']"
      separator="-"
      inputType="number"
      inputmode="numeric"
      :num-inputs="4"
      v-model:value="otpValue"
      :should-auto-focus="true"
      :should-focus-order="true"
      @on-complete="handleComplete"
      :placeholder="['•', '•', '•', '•']"
    />
    <p v-if="isError" class="error-message">Invalid code. Please try again.</p>
  </div>
</template>

<style>
.secure-otp {
  padding: 20px;
}

.otp-input {
  width: 45px;
  height: 45px;
  padding: 5px;
  margin: 0 10px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
}

.otp-input.digit-1 { border-color: #ff6b6b; }
.otp-input.digit-2 { border-color: #4ecdc4; }
.otp-input.digit-3 { border-color: #45b7d1; }
.otp-input.digit-4 { border-color: #96ceb4; }

.otp-input.is-complete {
  background-color: #e4e4e4;
}

.error-message {
  color: red;
  margin-top: 10px;
  font-size: 14px;
}

input::placeholder {
  font-size: 15px;
  text-align: center;
  font-weight: 600;
}
</style>
```

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

### Vue OTP Input as Password Field with Lockout

Source: https://context7.com/ejirocodes/vue3-otp-input/llms.txt

Configures the VOtpInput component for secure PIN entry using `inputType='password'`. It enforces a 6-digit PIN, tracks failed attempts, and implements an account lockout mechanism after a maximum number of incorrect entries.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import VOtpInput from 'vue3-otp-input'

const pinInput = ref<InstanceType<typeof VOtpInput> | null>(null)
const pinValue = ref('')
const attempts = ref(0)
const maxAttempts = 3

const isLocked = computed(() => attempts.value >= maxAttempts)

const handlePinComplete = async (value: string) => {
  if (isLocked.value) return

  console.log('PIN entered:', value.length, 'digits')

  const isValid = await verifyPin(value)

  if (isValid) {
    console.log('Access granted')
    attempts.value = 0
    // Navigate to protected area
  } else {
    attempts.value++
    pinInput.value?.clearInput()

    if (isLocked.value) {
      console.log('Account locked due to multiple failed attempts')
    }
  }
}

const verifyPin = async (pin: string): Promise<boolean> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(pin === '987654'), 300)
  })
}

const resetAttempts = () => {
  attempts.value = 0
  pinInput.value?.clearInput()
}
</script>

<template>
  <div class="pin-entry">
    <h3>Enter Your 6-Digit PIN</h3>
    <v-otp-input
      ref="pinInput"
      input-classes="pin-input"
      inputType="password"
      :num-inputs="6"
      v-model:value="pinValue"
      :should-auto-focus="true"
      :is-disabled="isLocked"
      @on-complete="handlePinComplete"
    />
    <p v-if="!isLocked" class="attempts-info">
      Attempts remaining: {{ maxAttempts - attempts }}
    </p>
    <p v-else class="locked-message">
      Account locked. <button @click="resetAttempts">Reset</button>
    </p>
  </div>
</template>

<style>
.pin-entry {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.pin-input {
  width: 40px;
  height: 40px;
  margin: 0 8px;
  font-size: 24px;
  border-radius: 4px;
  border: 2px solid #333;
  text-align: center;
  background-color: #f5f5f5;
}

.pin-input:focus {
  border-color: #007bff;
  background-color: white;
}

.pin-input.is-complete {
  background-color: #d4edda;
  border-color: #28a745;
}

.attempts-info {
  margin-top: 15px;
  color: #666;
}

.locked-message {
  margin-top: 15px;
  color: #dc3545;
  font-weight: bold;
}
</style>
```

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