Vue Simple Passwod Meter is a simple password checker written in vanilla js and extremly lightweight (3.2kb minified + Gzipped)
npm install vue-simple-password-meter --save
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>
Customize using css
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;
}
#password #vue #programming