Implement Beautiful Password Strength Meter In VueJS

Category: Vue.js Vue.js Form | July 23, 2021
Author: miladd3
Official Page: Go to website
Last Update: July 23, 2021
License: MIT

password strength meter vuejs

Description:

Password strength meter in VueJs is an indicator, that shows the strength of the password entered by the user. It can be either in text form or in a graphical form.

vue-simple-password-meter is a simple and light-weight password strength meter, written in vanilla JS.

How to use it?

1. Install the vue-simple-password-meter library using npm.

npm install vue-simple-password-meter --save

2. Then, import the component in your file. Like following:

import passwordMeter from "vue-simple-password-meter";

3. Here is the code, that will show the strength of the password.

export default {
  components: { passwordMeter },
  data: () => ({
    passwordValue: null,
    score: null
  }),
  methods: {
    onScore({ score, strength }) {
      console.log(score); // from 0 to 4
      console.log(strength); // one of : 'risky', 'guessable', 'weak', 'safe' , 'secure' 
      this.score = score;
    }
  }
};

4. Now, create the fields by using v-model and send it to the component using password prop.

<template>
  <form>
    <label for="password">Password</label>
    <input id="password" type="password" v-model="passwordValue" />
    <span v-if="score === 0">Use better password</span>

    <password-meter :password="passwordValue" @score="onScore" />
  </form>
</template>

5. You can customize the bar or, these CSS styles globally and change each state color and style.

.po-password-strength-bar {
    border-radius: 2px;
    transition: all 0.2s linear;
    height: 5px;
    margin-top: 8px;
}
.po-password-strength-bar.risky {
    background-color: #f95e68;
    width: 10%;
}
.po-password-strength-bar.guessable {
    background-color: #fb964d;
    width: 32.5%;
}
.po-password-strength-bar.weak {
    background-color: #fdd244;
    width: 55%;
}
.po-password-strength-bar.safe {
    background-color: #b0dc53;
    width: 77.5%;
}
.po-password-strength-bar.secure {
    background-color: #35cc62;
    width: 100%;
}