# vue-password-strength-meter

> Interactive password strength meter based on zxcvbn

Latest version **2.0.0** (published 2026-01-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-password-strength-meter
pnpm add vue-password-strength-meter
yarn add vue-password-strength-meter
bun add vue-password-strength-meter
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-01-23 |
| First published | 2017-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 562 |
| Author | Jakub Juszczak |
| Maintainers | apertureless |
| Keywords | vue.js, Vue, password, password strength, security |

## Links

- npm: https://www.npmjs.com/package/vue-password-strength-meter
- Repository: https://github.com/apertureless/vue-password-strength-meter
- Homepage: https://github.com/apertureless/vue-password-strength-meter#readme
- Issues: https://github.com/apertureless/vue-password-strength-meter/issues
- npm.io page: https://npm.io/package/vue-password-strength-meter

## Recent versions

- 2.0.0 (latest) — 2026-01-23
- 1.7.2 — 2020-04-30
- 1.7.1 — 2020-02-06
- 1.7.0 — 2020-02-06
- 1.6.1 — 2019-11-06
- 1.6.0 — 2019-11-01
- 1.5.0 — 2019-08-25
- 1.4.2 — 2019-03-18
- 1.4.1 — 2019-01-07
- 1.4.0 — 2019-01-07
- 1.3.2 — 2018-08-29
- 1.3.1 — 2018-08-29
- 1.3.0 — 2018-07-18
- 1.2.1 — 2018-04-09
- 1.2.0 — 2018-04-09
- … 9 more at https://npm.io/package/vue-password-strength-meter/versions

## README

# 🔓 vue-password-strength-meter

[![npm version](https://badge.fury.io/js/vue-password-strength-meter.svg)](https://badge.fury.io/js/vue-password-strength-meter)
[![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-password-strength-meter/blob/master/LICENSE.txt)

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)

Interactive password strength meter based on [zxcvbn](https://github.com/dropbox/zxcvbn) for vue.js

<p align="center">
  <img src="/static/demo.gif" alt="🔓" title="🔓 Demo" />
</p>

## 📺 Demo

[Demo here](https://apertureless.github.io/vue-password-strength-meter/)

## 🔧 Install

`yarn add vue-password-strength-meter zxcvbn`

## 👈 Usage

```javascript

<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

```javascript

<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

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

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

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

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

``` bash
# install dependencies
npm install

# serve with hot reload
npm run dev

# build for production with minification
npm run build

# run tests
npm test
```


## Support

<a href="https://www.buymeacoffee.com/xcqjaytbl" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

---
_Source: https://npm.io/package/vue-password-strength-meter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._