Vue Password Strength Component
A password input field for Vue.js with a password strength indicator.
It uses zxcvbn to calcuate a score based on the input value entered by the user.
Table of Contents
Installation
Yarn
yarn add vue-password-strength
Npm
npm i vue-password-strength --save
Unpkg
<script src="https://unpkg.com/vue-password-strength"></script>
How to use
Component
In your component you can use the default vue-password-strength
component as follows:
<script>; name: 'app' components: VuePasswordStrength // ... rest of your component</script>
SSR
For a boost in performance in SSR applications you can use the .vue
component instead of the complied component.
Use import VuePasswordStrength from 'vue-password-strength/sfc'
.
Options
The vue-password-strength
component is fully customizable and can be changed to your liking.
Example
Available options:
Name | Type | Default |
---|---|---|
id | String | 'input-password' |
type | String | 'password' |
placeholder | String | 'Enter your password' |
value | String | |
required | Boolean | false |
labelText | String | 'Password' |
inputGroupClass | String | 'dhk-password-input' |
aboveInputClass | String | 'dhk-password-above-input' |
labelClass | String | 'dhk-input-label' |
inputClass | String | 'dhk-input' |
passwordStrengthClass | String | 'dhk-password-strength-container' |
passwordStrengthInnerClass | String | 'dhk-password-strength-inner' |
Events
When a user enters a value in the input field, multiple events will be fired.
You can catch these events and do stuff with it.
Events fired by the vue-password-strength
component are:
Score: The score calculated based on the current input value.
inputChange: Current input value.
feedback: Feedback generated by the zxcvbn library.
Example
<script>; name: 'app' components: VuePasswordStrength methods: { // do something with the score value } { // do something with the input value } { // do something with the feedback } // ... rest of your component</script>
Issues
Issues can be created on the issues page.
Contributing
To contribute, please make a pull request.