vue-password-strength-meter

🔓 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'
  import 'vue-password-strength-meter/style.css'

  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'
  import 'vue-password-strength-meter/style.css'

  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'
  import 'vue-password-strength-meter/style.css'

  export default {
    components: { Password },
    data: () => ({
      password: null
    })
  }
</script>

Composition API

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

<script setup>
  import { ref } from 'vue'
  import Password from 'vue-password-strength-meter'
  import 'vue-password-strength-meter/style.css'

  const password = ref(null)
</script>

Props

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
npm run dev

# build for production with minification
npm run build

# run tests
npm test

Support