Simple Password Strength Meter For Vue Component Plugin

Vue Password Meter is a simple password checker written in vanilla js and extremely lightweight (3.2 KB minified + Gzipped).

password strength checker html code, jquery password strength meter, password strength checker javascript, simple password strength checker javascript, best password strength checker

How to make use of it:

Install and download:

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

1. Import the password counter into your project.

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

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

2. Add a password strength meter to the template.

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

3. Customize the strength indicator in 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;
} {
  background-color: #b0dc53;
} {
  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;

Simple Lightweight Password Meter, vue simple password meter Plugin/Github, password strength checker javascript regex, vue 3 password meter

See Demo And Download

Official Website(miladd3): Click Here

This superior jQuery/javascript plugin is developed by miladd3. For extra Advanced Usages, please go to the official website.

Related Posts


Create A Simple Star Rating System Using JavaScript

Star Rating System is a small JavaScript library to create a customizable star rating control and gradually improves it from a regular checkbox with numeric values. Star…


A Simple File Upload That Shows A Preview of the Uploaded Image

File upload with preview aims to address the issue of showing a preview of the uploaded user photo in an easy-to-use package. This is a simple front-end…


Animated Sliding Active Menu Item Indicator In jQuery | Navigation Menu

Animated Active Menu Indicator – A recent scrolling navigation cursor that moves when you hover over or activate a menu item. Written in jQuery and CSS/CSS3. Must…


[iTooltip] Replace the Original Advanced Tooltip Library

The JavaScript library lets you convert native tooltips into customizable overlays. iTooltip is a pure JS to replace the native tooltip that creates a custom pop-up hint…


How To Use Online Ping In Vanilla JavaScript Ping.js

Ping.js is a small and simple javascript library for ping response times for servers in pure javascript. Ping.js is a vanilla JavaScript library to supply a web-based…


Convert An HTML File Input Type Into a Fancy File Uploader

jQuery Fancy File Uploader is a jQuery extension for converting an HTML file input type into a portable fancy file uploader. Choose from an MIT or LGPL…