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


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.

    <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" />

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%;
} {
    background-color: #b0dc53;
    width: 77.5%;
} {
    background-color: #35cc62;
    width: 100%;