Vue Simple Password Meter is a simple password checker written in vanilla js and extremly lightweight (3.1kb minified + Gzipped)
npm install vue-simple-password-meter
Simply use 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" />
<password-meter :password="passwordValue" />
</form>
</template>
<script>
import passwordMeter from "vue-simple-password-meter";
export default {
components: { passwordMeter },
data: () => ({
passwordValue: null
})
};
</script>
If you wanna 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
.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;
}
Since Every other components and libraries mostly were using zxcvbn was 799.5kb minified and 388.3 minified and Gzipped so i decided to make simpler approuch and use regex instead of dictionary for validating.
#password-checker #vue #vanilla #password-checker-component