πŸ” Password strength meter based on zxcvbn in vue.js
Clone or download

README.md

πŸ”“ vue-password-strength-meter

Build Status npm version vue2 license

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

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

Buy Me A Coffee