🔓 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

<template>
  <password v-model="password"/>
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    })
  }
</script>

👈 With events

<template>
  <password
    v-model="password"
    :toggle="true"
    @score="showScore"
    @feedback="showFeedback"
  />
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    }),
    methods: {
      showFeedback ({suggestions, warning}) {
        console.log('🙏', suggestions)
        console.log('⚠', warning)
      },
      showScore (score) {
        console.log('💯', score)
      }
    }
  }
</script>

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
toggle	Boolean	false	show button to toggle password visibility
showPassword	Boolean	false	If you are not using the toggle button you can directly show / hide the password with this prop
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

Events

Show / Hide Password

• @show will be emitted if showing the password
• @hide will be emitted if hiding the password
• @score will return the zxcvbn score (Integer from 0-4) [ℹ] (https://github.com/dropbox/zxcvbn#usage)
• @feedback will return an zxcvbn feedback object with suggestion and warning

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

Support