1.1.2 • Published 6 years ago
nb-vue-password-strength-meter v1.1.2
🔓 vue-password-strength-meter
Interactive password strength meter based on zxcvbn for vue.js
📺 Demo
🔧 Install
yarn add vue-password-strength-meter zxcvbn
👈 Usage
<script>
import Password from 'vue-password-strength-meter'
export default {
components: { Password },
data () {
return {
password: null
}
}
}
</script>
<template>
<password v-model="password"></password>
</template>
Props
Prop | Type | Default Value | Description |
---|---|---|---|
id | String | password | input field id attribute |
placeholder | String | Please enter your password | input field placeholder attribute |
name | String | password | input field name attribute |
required | Boolean | true | input field required attribute |
secureLength | Number | 7 | password min length |
badge | Boolean | true | display password count badge |
defaultClass | String | Password__field | 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 |
tabindex | String | null | Tabindex for nested input |
💅 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.
1.1.2
6 years ago