Skip to content
πŸ” Password strength meter based on zxcvbn in vue.js
Branch: develop
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
build
config
docs πŸ› Fix demo page asset paths Jan 14, 2017
play
src
static
test/unit
.babelrc
.editorconfig Initial commit Jan 14, 2017
.eslintignore
.eslintrc.js
.gitignore ⬆️ Update dependencies Mar 22, 2017
.travis.yml ✨ Add travis badge and yaml Mar 22, 2017
CHANGELOG.md chore(release): 1.4.2 Mar 18, 2019
CODE_OF_CONDUCT.md
LICENSE.txt
README.md
index.html Initial commit Jan 14, 2017
package.json
yarn.lock fix: Add missing production env to remove dev settings Mar 18, 2019

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>

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

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

You can’t perform that action at this time.