OTP input component with Vue 3 and Tailwind

In this tutorial, we will create a One-Time Password (OTP) input component using Vue 3 and Tailwind CSS. This component will allow users to enter a set of digits as they receive them via text message or email for authentication purposes.

Step 1: Setup your Vue 3 project
First, make sure you have Node.js and npm installed on your machine. If not, you can download and install them from the official website. Then, create a new Vue 3 project using the Vue CLI:

npm install -g @vue/cli
vue create otp-component
cd otp-component

Step 2: Install Tailwind CSS
Next, we need to install Tailwind CSS in our project. Run the following command to install Tailwind CSS and its dependencies:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

After installing Tailwind CSS, we need to initialize it in our project. Create a tailwind.config.js file in the root of your project and configure Tailwind CSS by running the following command:

npx tailwindcss init -p

Step 3: Create the OTP input component
Now, let’s create the OTP input component. In the src/components folder, create a new file named OtpInput.vue and add the following code:

<template>
  <div class="flex justify-center items-center">
    <input
      v-for="(char, index) in otp"
      :key="index"
      v-model="otp[index]"
      type="text"
      class="w-12 h-12 rounded border border-gray-300 text-center mx-1 focus:outline-none"
      @keydown="onKeyDown(index, $event)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      otp: ['', '', '', '', '', ''],
    };
  },
  methods: {
    onKeyDown(index, event) {
      if (event.key === 'Backspace' && index > 0 && !this.otp[index]) {
        this.otp[index - 1] = '';
      } else if (index < this.otp.length - 1 && event.key !== 'Tab' && !isNaN(parseInt(event.key))) {
        this.otp[index] = event.key;
        this.$nextTick(() => {
          this.$refs[`input${index + 1}`].focus();
        });
      }
    },
  },
};
</script>

<style scoped>
</style>

Step 4: Import the component in App.vue
Now, let’s import the OtpInput component in App.vue and use it in our application. Replace the code in src/App.vue with the following:

<template>
  <div id="app">
    <OtpInput></OtpInput>
  </div>
</template>

<script>
import OtpInput from './components/OtpInput.vue';

export default {
  components: {
    OtpInput,
  },
};
</script>

<style>
</style>

Step 5: Add Tailwind CSS styles
Lastly, let’s add some Tailwind CSS styles to our project. Open the src/main.js file and import Tailwind CSS:

import { createApp } from 'vue';
import App from './App.vue';

import 'tailwindcss/tailwind.css';

createApp(App).mount('#app');

That’s it! You have successfully created a Vue 3 OTP input component using Tailwind CSS. You can now run the project by executing the following command:

npm run serve

Navigate to http://localhost:8080 in your browser to see the OTP input component in action. Feel free to customize the component further by adding animations, error handling, or styling to fit your project’s requirements.