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

With custom input

<template>
  <div>
    <input type="password" v-model="password">
    <password v-model="password" :strength-meter-only="true"/>
  </div>
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    })
  }
</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 | | disabled | Boolean | false | input field disabled 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 | | disabledClass | String | Password__field--disabled | disabled 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 | | showStrengthMeter | Boolean | true | Hide the Strength Meter if you want to implement your own | | strengthMeterOnly | Boolean | false | Hides the built-in input if you want to implement your own | | labelHide | String | 'Hide Password' | Label for the hide icon | labelShow | String | 'Show Password' | Label for the show icon | autocomplete | String | 'new-password' | Input field autocomplete property | userInputs | Array | empty array | Array of strings that zxcvbn will treat as an extra dictionary

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