{"id":22489941,"url":"https://github.com/miladd3/vue-simple-password-meter","last_synced_at":"2026-01-09T23:04:42.594Z","repository":{"id":39260889,"uuid":"233870281","full_name":"miladd3/vue-simple-password-meter","owner":"miladd3","description":"Vue Simple Password Meter is a simple password strength meter component written in vanilla js and extremly lightweight","archived":false,"fork":false,"pushed_at":"2024-06-19T08:09:09.000Z","size":3109,"stargazers_count":97,"open_issues_count":5,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-03T01:32:15.574Z","etag":null,"topics":["javascript","password","password-strength","vue","vue3","vue3-typescript","vuejs"],"latest_commit_sha":null,"homepage":"https://miladd3.github.io/vue-simple-password-meter/","language":"TypeScript","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/miladd3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-01-14T15:17:58.000Z","updated_at":"2024-11-25T19:04:56.000Z","dependencies_parsed_at":"2024-01-07T13:04:41.508Z","dependency_job_id":"87163a52-7e01-44bc-9af8-70310bae1f58","html_url":"https://github.com/miladd3/vue-simple-password-meter","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladd3%2Fvue-simple-password-meter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladd3%2Fvue-simple-password-meter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladd3%2Fvue-simple-password-meter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladd3%2Fvue-simple-password-meter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miladd3","download_url":"https://codeload.github.com/miladd3/vue-simple-password-meter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500572,"owners_count":17930091,"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":["javascript","password","password-strength","vue","vue3","vue3-typescript","vuejs"],"created_at":"2024-12-06T17:21:15.511Z","updated_at":"2025-12-30T01:07:20.174Z","avatar_url":"https://github.com/miladd3.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries","TypeScript","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"# vue-simple-password-meter\n\n**Vue Simple Password Meter** is a simple password checker written in vanilla js and extremely lightweight (** less than 1kb minified + Gzipped**)\n\n#### This is `Vue 3.*` compatible version. If you are using `Vue 2.*` [Click Here](https://github.com/miladd3/vue-simple-password-meter/tree/vue-2)\n\n## Demo\n\n[Demo](https://vspm-next.herokuapp.com/)\n\n## Install\n\n`npm install vue-simple-password-meter --save`\n\n## Usage\n\nSimply use v-model and send it to the component using password prop\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003clabel\u003ePassword\u003c/label\u003e\n    \u003cinput type=\"password\" v-model=\"password\" /\u003e\n    \u003cpassword-meter :password=\"password\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { defineComponent, ref } from 'vue';\nimport PasswordMeter from 'vue-simple-password-meter';\n\nexport default defineComponent({\n  components: {\n    PasswordMeter,\n  },\n  setup() {\n    const password = ref('');\n\n    return {\n      password,\n    };\n  },\n});\n\u003c/script\u003e\n```\n\n### Customize using css\n\nIf you want to customize the bar its really simple with some easy css you can customize it\n\nOverwrite these css styles globally and change each state color and style\n\n```css\n.po-password-strength-bar {\n    border-radius: 2px;\n    transition: all 0.2s linear;\n    height: 5px;\n    margin-top: 8px;\n}\n\n.po-password-strength-bar.risky {\n    background-color: #f95e68;\n    width: 10%;\n}\n\n.po-password-strength-bar.guessable {\n    background-color: #fb964d;\n    width: 32.5%;\n}\n\n.po-password-strength-bar.weak {\n    background-color: #fdd244;\n    width: 55%;\n}\n\n.po-password-strength-bar.safe {\n    background-color: #b0dc53;\n    width: 77.5%;\n}\n\n.po-password-strength-bar.secure {\n    background-color: #35cc62;\n    width: 100%;\n}\n```\n\n\n## Events\n\nYou can use event `score` to use scored number between `0` to `4` that scores password from risky to secure with 4 is a secure password and 0 is risky and between.\n\nYou can use this as a form verification tool\n\nSee below example for more detail\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003clabel\u003ePassword\u003c/label\u003e\n    \u003cinput type=\"password\" v-model=\"password\" /\u003e\n    \u003cspan v-if=\"score === 0\"\u003eUse better password\u003c/span\u003e\n    \u003cpassword-meter @score=\"onScore\" :password=\"password\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { defineComponent, ref } from \"vue\";\nimport PasswordMeter from \"vue-simple-password-meter\";\n\nexport default defineComponent({\n  name: \"App\",\n  components: {\n    PasswordMeter,\n  },\n  setup() {\n    const password = ref(\"\");\n    const score = ref(null);\n\n    const onScore = (payload) =\u003e {\n      console.log(payload.score); // from 0 to 4\n      console.log(payload.strength); // one of : 'risky', 'guessable', 'weak', 'safe' , 'secure'\n      score.value = payload.score;\n    };\n\n    return {\n      password,\n      onScore,\n      score,\n    };\n  },\n});\n\u003c/script\u003e\n```\n\n## Contributing\n\nIf you want to contribute to this project simply fork it and clone it then run\n`npm i`\nin the root of the project, then run\n`npm run serve`\nto run development server.\n\n## Motivation\n\nSince Every other components and libraries mostly were using [zxcvbn](https://github.com/dropbox/zxcvbn) was 799.5kb minified and 388.3kb minified and Gzipped, so I decided to make simpler approach and use regex instead of dictionary for validating.\n\n### Licence and cast\n\nMIT Licence\n\nby [Milad Dehghan](http://dehghan.net)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiladd3%2Fvue-simple-password-meter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiladd3%2Fvue-simple-password-meter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiladd3%2Fvue-simple-password-meter/lists"}