🔓 vue3-password-strength-meter


Interactive password strength meter based on zxcvbn for vue.js

🔧 Install

npm install vue3-password-strength-meter zxcvbn

👈 Usage

``javascript





`

👈 With events

`javascript




`

$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

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