Vue 3 2FA Code Input

Vue 3 input component for 2FA codes. Is alpha-numerically agnostic, supports copy-pasting and is written in Typescript.

See it in action in the interactive documentation.

Getting started

First, install the package using your favorite package manager:

<your-favorite-package-manager> install @loltech/vue3-2fa-code-input

then import the component and use it:

<script setup lang="ts">
  import { ref } from 'vue';
  import Vue2FACodeInput from '@loltech/vue3-2fa-code-input';

  const code = ref<string | null>(null);
</script>

<template>
  <div>
    <Vue2FACodeInput v-model="code"/>
  </div>
</template>

Component props

| Property | Type | Description | Default | |-------------------------|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------| | length | number | The 2FA code length. | 6 | | autofocus | boolean | Whether to autofocus the input. | true | | updateImmediately | boolean | By default, the component only updates its modelValue reference when the code is complete, otherwise it sets it to null. Set this to true to change the behaviour. See the difference live in the docs. | false | | inputmode | string | Helps control what keyboard to show on mobile. Check the docs for an example. | text | | inputClass | string | Custom CSS class to add to the individual character inputs. | undefined |

Styling

The component ships with no default styling, but it's pretty straight-forward. The component is just a container divwith an arbitrary number of inputs inside. By default, here are only two classes you have to supply styles for. These are vue3-2fa-code-input for the container and vue3-2fa-code-input-box for the individual inputs.

See a quick example in the docs.