Need help with vue-password-strength-meter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

apertureless
515 Stars 53 Forks MIT License 109 Commits 10 Opened issues

Description

🔐 Password strength meter based on zxcvbn in vue.js

Services available

!
?

Need anything else?

Contributors list

🔓 vue-password-strength-meter

Build Status npm version vue2 license

ko-fi

Interactive password strength meter based on zxcvbn for vue.js

🔓

📺 Demo

Demo here

🔧 Install

yarn add vue-password-strength-meter zxcvbn

👈 Usage


👈 With events

With custom input

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
button you can directly show / hide the password with this prop | | defaultClass | String | Passwordfield | input field class | | disabledClass | String | Passwordfield--disabled | disabled input field class | | errorClass | String | Passwordbadge--error | error class for password count badge | | successClass | String | Passwordbadge--success | success class for password count badge | | strengthMeterClass | String | Passwordstrength-meter | strength-meter class | | strengthMeterFillClass | String | Passwordstrength-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 | 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.

Events

Show / Hide Password

  • @show
    will be emitted if showing the password
  • @hide
    will be emitted if hiding the password
  • @score
    will return the zxcvbn score (Integer from 0-4)
  • @feedback
    will return an zxcvbn feedback object with
    suggestion
    and
    warning

💅 Customizing

You can customize the styling of the input field, badge and strength-meter by passing your own css classes to

defaultClass
,
strengthMeterClass
etc.

Build Setup

# install dependencies
npm install

serve with hot reload at localhost:8080

npm run dev

build for production with minification

npm run build

run unit tests

npm run unit

run all tests

npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Support

Buy Me A Coffee

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.