Home » vue » Password Strength meter for Vue.js 3

Password Strength meter for Vue.js 3

Posted by: admin November 26, 2021 Leave a comment


I’ve started working with Vue.js version 3 and making a simple signup form. I need to implement a password strength meter for my password field but seems there isn’t any compatible such component with Vue.js 3 version.
I’ve found few good components for password strength meter to use with Vue.js but they all seems to have compatibility with Vue.js 2.

I’ve tried


its working good in DEMO but not compatible with my Vue.js 3.
I’m stuck here. Any help/suggestions ?


Are you looking for a visual component or something that actually computes password strength?

zxcvbn is fairly well-known as a strength calculator – it outputs a score from 0-4 for how strong a password is. You could then roll a simple Vue component that outputs a different value depending on that score.

Below example uses Tailwind CSS classes for styling the visual meter. I wrote this in the browser and haven’t tested the Vue but it’s fairly simple and you should be able to get the idea.

<!-- PasswordStrengthMeter.vue -->
    <div class="w-full h-4 flex">
      <div :class="style"></div>
      <div class="flex-1"></div>
    <div>{{ strength }}</div>

  props: {
    score: {
      required: true,
      default: 0,

  computed: {
    strength() {
      return [
        'Very Weak',  // 0
        'Weak',       // 1
        'Moderate',   // 2
        'Strong',     // 3
        'Very Strong' // 4

    style() {
      return [
        'w-1 bg-red-500',           // 0
        'w-1/4 bg-yellow-500',      // 1
        'w-1/2 bg-yellow-300',      // 2
        'w-3/4 bg-green-500',       // 3
        'w-full bg-blue-500'        // 4

Here‘s what it might look like.


This one works nicely with Vue3.


Sample code from the repository:

  <div id="app">
    <input type="password" v-model="password" />
    <password-meter :password="password" />

import { defineComponent, ref } from 'vue';
import PasswordMeter from 'vue-simple-password-meter';

export default defineComponent({
  components: {
  setup() {
    const password = ref('');

    return {