React, Vue, Svelte and Laravel

React#

import { useRef } from 'react';
import { StrengthMeter } from '@devix-labs/password-strength/react';
import '@devix-labs/password-strength/styles.css';

const password = useRef(null);

<input ref={password} type="password" autoComplete="new-password" />
<StrengthMeter inputRef={password} userInputs={[email, name]} showTime />

The meter is drawn into a div by the widget, so React never re-renders it while someone is typing — which is what keeps the live region quiet.

Vue#

<script setup>
import { ref, onMounted } from 'vue';
import { StrengthMeter } from '@devix-labs/password-strength/vue';

const field = ref(null);
const email = ref('');
</script>

<template>
  <input ref="field" type="password">
  <StrengthMeter v-if="field" :for="field" :user-inputs="[email]" />
</template>

Svelte#

<script>
  import { strengthMeter } from '@devix-labs/password-strength/svelte';

  let email = '';
</script>

<input type="password" use:strengthMeter={{ userInputs: [email] }}>

A web component#

<script type="module" src="https://devix.pk/cdn/oss/password-strength@1.0.0/element.js"></script>

<input id="password" type="password" autocomplete="new-password">
<dx-strength-meter for="password" locale="ur" show-time breach-check></dx-strength-meter>

Laravel#

Check on the server as well. A meter in a browser is advice; anything in a browser can be skipped.

// app/Rules/NotAWeakPassword.php
use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Validation\Rules\Password;

$request->validate([
    'password' => ['required', 'confirmed', Password::min(12)->uncompromised()],
]);

Laravel's own Password::uncompromised() uses the same k-anonymity range API this does, so the browser and the server agree about what is in a breach.

Then mount the meter, giving it the fields the person has already filled in:

<input id="email" name="email" value="{{ old('email') }}">
<input id="password" name="password" type="password" autocomplete="new-password">

<script type="module">
  import { createStrengthMeter } from '/cdn/oss/password-strength@1.0.0/index.js';

  const email = document.querySelector('#email');
  const meter = createStrengthMeter(document.querySelector('#password'), {
    locale: @json(app()->getLocale()),
    userInputs: [email.value, @json(config('app.name'))],
    breachCheck: true,
    showTime: true,
  });

  email.addEventListener('input', () => meter.setUserInputs([email.value]));
</script>

What a meter is for, and what it is not#

It is advice, shown while somebody chooses. It is not a control, and a score of 4 is not a guarantee.

The controls that work are the boring ones, and they are all on the server: a minimum length, a check against known-breached passwords, rate limiting, and not forcing people to change a password that has not been compromised. That is NIST SP 800-63B, and it is in Laravel's Password rule already.

Use this to help someone choose well. Do not use it to decide whether to let them in.