How to Access vue3-otp-input Component Methods via Template Ref in Vue 3

Use a Vue 3 template ref typed as InstanceType<typeof VOtpInput> to access the clearInput() and fillInput() methods exposed by the vue3-otp-input component through defineExpose.

The vue3-otp-input library provides programmatic control over OTP input fields through component methods that are explicitly exposed for external access. By binding a template ref to the component instance, you can invoke these methods to clear user input or programmatically fill the fields from your parent component.

Exposed Methods in vue3-otp-input

The component exposes two public methods via Vue 3's defineExpose API in src/components/vue3-otp-input.vue (lines 13-16):

• clearInput() – Resets all OTP fields to empty strings and resets the active input focus to the first field
• fillInput(value: string) – Programmatically fills all fields with the provided string (length must match the numInputs prop)

These methods are defined in the component setup and made available to parent components through the defineExpose block:

// src/components/vue3-otp-input.vue
defineExpose({
  clearInput,
  fillInput,
});

Setting Up the Template Ref

To access these methods, create a ref that can hold the component instance and bind it to the <vue3-otp-input> element in your template.

First, import the component and create a properly typed ref:

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

// Type the ref to match the component instance
const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null);
</script>

Then attach the ref to the component in your template:

<template>
  <vue3-otp-input
    ref="otpInput"
    :num-inputs="4"
    v-model:value="otpValue"
  />
</template>

Calling Component Methods

Once the ref is bound, you can invoke the exposed methods on the component instance.

Clearing Input with clearInput()

Call clearInput() to reset all OTP fields and return focus to the first input:

function clearOtpFields() {
  otpInput.value?.clearInput();
}

This method clears the internal otp array, resets activeInput to 0, and emits update:value and on-change events with empty strings.

Filling Input with fillInput()

Use fillInput() to programmatically populate the OTP fields. The value length must exactly match the numInputs prop:

function autoFillOtp() {
  // For a 4-input OTP component
  otpInput.value?.fillInput('1234');
}

If the provided string length matches numInputs, the method splits the string into individual characters, updates the internal state, and emits update:value and on-complete events.

Complete Working Example

Here is a full implementation based on the repository's demo file (src/App.vue):

<script setup lang="ts">
import { ref, unref } from "vue";
import Vue3OtpInput from "vue3-otp-input";

const otpInput = ref<InstanceType<typeof Vue3OtpInput> | null>(null);
const bindValue = ref("");

function clear() {
  if (unref(otpInput)) {
    unref(otpInput)?.clearInput();
  }
}

function fill() {
  if (unref(otpInput)) {
    unref(otpInput)?.fillInput("1234");
  }
}
</script>

<template>
  <div>
    <button @click="clear">Clear OTP</button>
    <button @click="fill">Fill OTP</button>
    
    <vue3-otp-input
      ref="otpInput"
      :num-inputs="4"
      v-model:value="bindValue"
      @on-change="(val) => console.log('changed', val)"
      @on-complete="(val) => console.log('complete', val)"
    />
  </div>
</template>

Summary

• Template refs provide access to vue3-otp-input's internal methods when typed as InstanceType<typeof VOtpInput>.
• The component exposes clearInput() to reset all fields and fillInput(value) to programmatically set values.
• Both methods are defined in src/components/vue3-otp-input.vue and made available via defineExpose.
• When calling fillInput(), ensure the string length matches the numInputs prop exactly.

Frequently Asked Questions

What methods does vue3-otp-input expose via template ref?

The component exposes two methods: clearInput() which resets all OTP fields to empty strings and returns focus to the first input, and fillInput(value: string) which programmatically fills the fields when the provided string length matches the numInputs prop. These are defined in src/components/vue3-otp-input.vue using Vue 3's defineExpose API.

How do I type the template ref for vue3-otp-input in TypeScript?

Type the ref as InstanceType<typeof VOtpInput> where VOtpInput is the imported component. For example: const otpInput = ref<InstanceType<typeof VOtpInput> | null>(null);. This provides full TypeScript intellisense for the clearInput and fillInput methods when accessing otpInput.value.

Can I call fillInput with a value shorter than numInputs?

No, the fillInput method validates that the input string length exactly matches the numInputs prop. If the lengths do not match, the method returns early without updating the OTP fields. Ensure your fill value contains the same number of characters as the configured input fields.

Is defineExpose required for accessing component methods in Vue 3?

Yes, in Vue 3's Composition API, child component methods are not automatically exposed to parent components. The vue3-otp-input component explicitly calls defineExpose({ clearInput, fillInput }) in its setup function to make these methods available on template refs, as seen in src/components/vue3-otp-input.vue lines 13-16.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}