🔓 vue-password-strength-meter



Interactive password strength meter based on zxcvbn for vue.js

📺 Demo

Demo here

🔧 Install

yarn add vue-password-strength-meter zxcvbn

👈 Usage

``javascript

`


👈 With events

`javascript


`

$3

`html



`

$3

`html



`

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 | 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 | 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

$3

- @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) [ℹ] (https://github.com/dropbox/zxcvbn#usage)
- @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

` bash


install dependencies

npm install

serve with hot reload

npm run dev

build for production with minification

npm run build

run tests

npm test
``

Support