@loltech/vue3-2fa-code-input NPM

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.
`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 js3-2fa-code-input for the container and js3-2fa-code-input-box for the individual inputs.

See a quick example in the docs.

vue vue3 auth 2fa code input

1.1.0

2 years ago

1.0.0

2 years ago