[Vuejs]-Password Strength meter for Vue.js 3

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 -->
<template>
  <div>
    <div class="w-full h-4 flex">
      <div :class="style"></div>
      <div class="flex-1"></div>
    </div>
    <div>{{ strength }}</div>
  </div>
</template>

<script>
  props: {
    score: {
      required: true,
      default: 0,
    }
  },

  computed: {
    strength() {
      return [
        'Very Weak',  // 0
        'Weak',       // 1
        'Moderate',   // 2
        'Strong',     // 3
        'Very Strong' // 4
      ][this.score];
    },

    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
      ][this.score];
    },
  },
</script>

Here‘s what it might look like.

This one works nicely with Vue3.

https://github.com/miladd3/vue-simple-password-meter/tree/next

Sample code from the repository:

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

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

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

    return {
      password,
    };
  },
});
</script>