🔐 Password Strength Meter Based On zxcvbn In Vue.js

An interactive password strength meter component for Vue.js, based on zxcvbn.js.

best password strength meter, vuetify password strength, open source password strength checker, zxcvbn, vue simple password meter, password strength checker api

Fully Customizable One Time Password OTP Component | ng-otp-input

How to make use of it:

Install & Download:

npm install vue-password-strength-meter
yarn add vue-password-strength-meter

Usage

<template>
  <password v-model="password"/>
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    })
  }
</script>

Props

Prop	Type	Default Value	Description
secureLength	Number	7	password min length
badge	Boolean	true	display password count badge
toggle	Boolean	false	show button to toggle password visibility
showPassword	Boolean	false	If you are not using the `toggle` the button you can directly show/hide the password with this prop
defaultClass	String	Password__field	input field class
disabledClass	String	Password__field–disabled	disabled input field class
errorClass	String	Password__badge–error	error class for password count badge
successClass	String	Password__badge–success	success class for password count badge
strengthMeterClass	String	Password__strength-meter	strength-meter class
strengthMeterFillClass	String	Password__strength-meter–fill	strength-meter class for individual data fills
showStrengthMeter	Boolean	true	Hide the Strength Meter if you want to implement your own
strengthMeterOnly	Boolean	false	Hides the built-in input if you want to implement your own
labelHide	String	‘Hide Password’	Label for the hide icon
labelShow	String	‘Show Password’	Label for the show icon
userInputs	Array	empty array	An array of strings that zxcvbn will treat as an extra dictionary
referenceValue	String	‘input’	Prop to change the `ref` of the input. This way you can have the input outside of the component.