🔓 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

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