Password Strength

Check the strength of a password entered on the client side using the zxcvbn library.

score: 0 / 4
{ "warning": null, "suggestions": [ "useWords", "noNeed" ] }
vue
<template>
 <div class="example">
  <label>
   Password
   <input
    v-model="password"
    type="text"
   />
  </label>
  <PasswordStrength
   v-slot="result"
   :password="password"
  >
   <div>score: {{ result.score }} / 4</div>
   <div>{{ result.feedback }}</div>
  </PasswordStrength>
 </div>
</template>

<script lang="ts" setup>
const password = ref('');
</script>

See Also