Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

πŸ”“ 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

  <password v-model="password"/>

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

πŸ‘ˆ With events


  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)

With custom input

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

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


Prop Type Default Value Description
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
userInputs Array empty array Array of strings that zxcvbn will treat as an extra dictionary
referenceValue String 'input' Prop to change the ref of the input. This way you can have the input outside of the component.


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) [β„Ή] (
  • @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.


Buy Me A Coffee