vue-password-strength
A password field with strength indicator for in your Vue projects.
Last updated a year ago by pixeldenker .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-password-strength 
SYNC missed versions from official npm registry.

Vue Password Strength Component

A password input field for Vue.js with a password strength indicator.
It uses zxcvbn to calcuate a score based on the input value entered by the user.

Table of Contents

Installation

Yarn

yarn add vue-password-strength

Npm

npm i vue-password-strength --save

Unpkg

<script src="https://unpkg.com/vue-password-strength"></script>

How to use

Component

In your component you can use the default vue-password-strength component as follows:

<template>
    <div id="app">
        <vue-password-strength />
    </div>
</template>
<script>
import VuePasswordStrength from 'vue-password-strength';

export default {
    name: 'app',
    components: {
        VuePasswordStrength
    },
    // ... rest of your component
}
</script>

SSR

For a boost in performance in SSR applications you can use the .vue component instead of the complied component.
Use import VuePasswordStrength from 'vue-password-strength/sfc'.

Options

The vue-password-strength component is fully customizable and can be changed to your liking.
Example

<template>
    <div id="app">
        <vue-password-strength
            :value="oldPasswordValue"
            placeholder="Your old password" 
        />
    </div>
</template>

Available options:

Name Type Default
id String 'input-password'
type String 'password'
placeholder String 'Enter your password'
value String
required Boolean false
labelText String 'Password'
inputGroupClass String 'dhk-password-input'
aboveInputClass String 'dhk-password-above-input'
labelClass String 'dhk-input-label'
inputClass String 'dhk-input'
passwordStrengthClass String 'dhk-password-strength-container'
passwordStrengthInnerClass String 'dhk-password-strength-inner'

Events

When a user enters a value in the input field, multiple events will be fired.
You can catch these events and do stuff with it.
Events fired by the vue-password-strength component are:

Score: The score calculated based on the current input value.
inputChange: Current input value.
feedback: Feedback generated by the zxcvbn library.

Example

<template>
    <div id="app">
        <vue-password-strength 
            @score="handleScore"
            @inputChange="handleInputChange"
            @feedback="handleFeedback"
        />
    </div>
</template>
<script>
import VuePasswordStrength from 'vue-password-strength';

export default {
    name: 'app',
    components: {
        VuePasswordStrength
    },
    methods: {
        handleScore(score) {
            // do something with the score value
        },
        handleInputChange(value) {
            // do something with the input value
        },
        handleFeedback(feedback) {
            // do something with the feedback
        }
    },
    // ... rest of your component
}
</script>

Issues

Issues can be created on the issues page.

Contributing

To contribute, please make a pull request.

Current Tags

  • 1.2.0                                ...           latest (a year ago)

3 Versions

  • 1.2.0                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.3                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (5)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |