🔓 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

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