A really simple password strength meter. customizable with css
npm install vue-simple-password-meterVue Simple Password Meter is a simple password checker written in vanilla js and extremely lightweight ( less than 1kb minified + Gzipped)
#### This is Vue 3. compatible version. If you are using Vue 2. Click Here
npm install vue-simple-password-meter --save
Simply use v-model and send it to the component using password prop
``vue
`
If you want to customize the bar its really simple with some easy css you can customize it
Overwrite these css styles globally and change each state color and style
`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;
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%;
}
`
You can use event score to use scored number between 0 to 4 that scores password from risky to secure with 4 is a secure password and 0 is risky and between.
You can use this as a form verification tool
See below example for more detail
`vue
Use better password
`
If you want to contribute to this project simply fork it and clone it then run
npm inpm run serve`
in the root of the project, then run
to run development server.
Since Every other components and libraries mostly were using zxcvbn was 799.5kb minified and 388.3kb minified and Gzipped, so I decided to make simpler approach and use regex instead of dictionary for validating.
MIT Licence