{"id":13536048,"url":"https://github.com/apertureless/vue-password-strength-meter","last_synced_at":"2025-05-15T23:07:07.554Z","repository":{"id":49058564,"uuid":"78948861","full_name":"apertureless/vue-password-strength-meter","owner":"apertureless","description":"🔐 Password strength meter based on zxcvbn in vue.js","archived":false,"fork":false,"pushed_at":"2021-06-29T17:19:53.000Z","size":2438,"stargazers_count":564,"open_issues_count":11,"forks_count":67,"subscribers_count":14,"default_branch":"develop","last_synced_at":"2025-05-10T02:28:30.100Z","etag":null,"topics":["password","password-safety","password-strength-meter","vue","vuejs","vuejs2","zxcvbn"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apertureless.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-14T15:40:22.000Z","updated_at":"2025-02-28T03:02:38.000Z","dependencies_parsed_at":"2022-09-22T14:26:02.535Z","dependency_job_id":null,"html_url":"https://github.com/apertureless/vue-password-strength-meter","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-password-strength-meter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-password-strength-meter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-password-strength-meter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-password-strength-meter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apertureless","download_url":"https://codeload.github.com/apertureless/vue-password-strength-meter/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436948,"owners_count":22070947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["password","password-safety","password-strength-meter","vue","vuejs","vuejs2","zxcvbn"],"created_at":"2024-08-01T09:00:34.122Z","updated_at":"2025-05-15T23:07:01.919Z","avatar_url":"https://github.com/apertureless.png","language":"JavaScript","funding_links":["https://ko-fi.com/C0C1WP7C","https://www.buymeacoffee.com/xcqjaytbl"],"categories":["JavaScript","实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form"],"readme":"# 🔓 vue-password-strength-meter\n\n[![Build Status](https://travis-ci.org/apertureless/vue-password-strength-meter.svg?branch=master)](https://travis-ci.org/apertureless/vue-password-strength-meter)\n[![npm version](https://badge.fury.io/js/vue-password-strength-meter.svg)](https://badge.fury.io/js/vue-password-strength-meter)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-password-strength-meter/blob/master/LICENSE.txt)\n\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)\n\nInteractive password strength meter based on [zxcvbn](https://github.com/dropbox/zxcvbn) for vue.js\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/static/demo.gif\" alt=\"🔓\" title=\"🔓 Demo\" /\u003e\n\u003c/p\u003e\n\n## 📺 Demo\n\n[Demo here](https://apertureless.github.io/vue-password-strength-meter/)\n\n## 🔧 Install\n\n`yarn add vue-password-strength-meter zxcvbn`\n\n## 👈 Usage\n\n```javascript\n\n\u003ctemplate\u003e\n  \u003cpassword v-model=\"password\"/\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Password from 'vue-password-strength-meter'\n  export default {\n    components: { Password },\n    data: () =\u003e ({\n      password: null\n    })\n  }\n\u003c/script\u003e\n\n```\n## 👈 With events\n\n```javascript\n\n\u003ctemplate\u003e\n  \u003cpassword\n    v-model=\"password\"\n    :toggle=\"true\"\n    @score=\"showScore\"\n    @feedback=\"showFeedback\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Password from 'vue-password-strength-meter'\n  export default {\n    components: { Password },\n    data: () =\u003e ({\n      password: null\n    }),\n    methods: {\n      showFeedback ({suggestions, warning}) {\n        console.log('🙏', suggestions)\n        console.log('⚠', warning)\n      },\n      showScore (score) {\n        console.log('💯', score)\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n### With custom input\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cinput type=\"password\" v-model=\"password\"\u003e\n    \u003cpassword v-model=\"password\" :strength-meter-only=\"true\"/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Password from 'vue-password-strength-meter'\n  export default {\n    components: { Password },\n    data: () =\u003e ({\n      password: null\n    })\n  }\n\u003c/script\u003e\n```\n## Props\n\n| Prop   |      Type      |  Default Value | Description\n|----------|:-------------:|------|------|\n| secureLength |  Number | 7 | password min length |\n| badge |  Boolean | true | display password count badge |\n| toggle |  Boolean | false | show button to toggle password visibility |\n| showPassword |  Boolean | false | If you are not using the `toggle` button you can directly show / hide the password with this prop |\n| defaultClass |  String | Password__field | input field class |\n| disabledClass |  String | Password__field--disabled | disabled input field class |\n| errorClass |  String | Password__badge--error | error class for password count badge |\n| successClass |  String | Password__badge--success | success class for password count badge |\n| strengthMeterClass |  String | Password__strength-meter | strength-meter class |\n| strengthMeterFillClass |  String | Password__strength-meter--fill | strength-meter class for individual data fills |\n| showStrengthMeter |  Boolean | true | Hide the Strength Meter if you want to implement your own |\n| strengthMeterOnly |  Boolean | false | Hides the built-in input if you want to implement your own |\n| labelHide |  String | 'Hide Password' | Label for the hide icon\n| labelShow |  String | 'Show Password' | Label for the show icon\n| userInputs | Array | empty array | Array of strings that zxcvbn will treat as an extra dictionary\n| referenceValue | String | 'input' | Prop to change the `ref` of the input. This way you can have the input outside of the component.\n\n## Events\n\n### Show / Hide Password\n\n- `@show` will be emitted if showing the password\n- `@hide` will be emitted if hiding the password\n- `@score` will return the zxcvbn score (Integer from 0-4) [ℹ] (https://github.com/dropbox/zxcvbn#usage)\n- `@feedback` will return an zxcvbn feedback object with `suggestion` and `warning`\n\n\n## 💅 Customizing\n\nYou can customize the styling of the input field, badge and strength-meter by passing your own css classes\nto `defaultClass`, `strengthMeterClass` etc.\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# run unit tests\nnpm run unit\n\n# run all tests\nnpm test\n```\n\nFor detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n\n## Support\n\n\u003ca href=\"https://www.buymeacoffee.com/xcqjaytbl\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-password-strength-meter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapertureless%2Fvue-password-strength-meter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-password-strength-meter/lists"}