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

Questions:

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

https://awesomeopensource.com/project/skegel13/vue-password

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

Answers:

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>