Simple Lightweight Password Meter For Vue.js App

A tiny and simple-to-use password strength meter for Vue.js applications.

How to use it:

1. Import the Password Meter into your project.

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

export default {
  components: { passwordMeter },
  data: () => ({
    passwordValue: null
  })
};

2. Add the password strength meter to the template.

<template>
  <form>
    <label for="password">Password:</label>
    <input id="password" type="password" v-model="passwordValue" />
    <password-meter :password="passwordValue" />
  </form>
</template>

3. Customize the strength indicator in the CSS.

.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;
}

.po-password-strength-bar.guessable {
  background-color: #fb964d;
}

.po-password-strength-bar.weak {
  background-color: #fdd244;
}

.po-password-strength-bar.safe {
  background-color: #b0dc53;
}

.po-password-strength-bar.secure {
  background-color: #35cc62;
}

4. Events.

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

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;
    }
  }
};

Preview:

Changelog:

v1.3.3 (04/10/2023)

• Update

v1.1.4 (02/17/2023)

• bugfixes

v1.1.2 (12/05/2022)

• Update

v0.1.0 (07/22/2021)

• Add Width to the password bar

08/06/2020

• fix vulnerability and fix prettier conflict with eslint

Download Details:

Author: miladd3

Live Demo: https://miladd3.github.io/vue-simple-password-meter/

Download Link: https://github.com/miladd3/vue-simple-password-meter/archive/master.zip

Official Website: https://github.com/miladd3/vue-simple-password-meter

Install & Download:

# NPM
$ npm install vue-simple-password-meter --save