vue-password-strength
v1.2.0
Published
A password field with strength indicator for in your Vue projects.
Downloads
90
Maintainers
Readme
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:
<template>
<div id="app">
<vue-password-strength />
</div>
</template>
<script>
import VuePasswordStrength from 'vue-password-strength';
export default {
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
<template>
<div id="app">
<vue-password-strength
:value="oldPasswordValue"
placeholder="Your old password"
/>
</div>
</template>
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
<template>
<div id="app">
<vue-password-strength
@score="handleScore"
@inputChange="handleInputChange"
@feedback="handleFeedback"
/>
</div>
</template>
<script>
import VuePasswordStrength from 'vue-password-strength';
export default {
name: 'app',
components: {
VuePasswordStrength
},
methods: {
handleScore(score) {
// do something with the score value
},
handleInputChange(value) {
// do something with the input value
},
handleFeedback(feedback) {
// 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.