Component

Vue Password Strength Component

<DomPasswordStrength>

A display-only password strength meter that can read a named DomForm field or a direct model value.

Playground

Try every prop live

Password strength playground

Adjust the props to explore sizing, content, and behaviour.

Very strong password (Time to crack: trillions of years)

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomPasswordStrength } from '@getdom/studio';

const data = reactive({
		"modelValue": "violet-orbit-lantern-47!",
		"name": "",
		"showCrackTime": true,
		"descriptionMode": "inline",
		"tooltipPlacement": "bottom",
		"visible": true
	});
</script>

<template>
	<DomPasswordStrength
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue`	string	string	''	Password value to assess when no form field name is provided.
`name`	string	string	''	Named DomForm field whose current value should be assessed.
`showCrackTime`	boolean	boolean	true	Show the estimated time required to crack the password.
`descriptionMode`	'inline' \| 'tooltip'	string	'inline'	Show the strength description below the meter or in a tooltip.
`tooltipPlacement`	'top' \| 'bottom' \| 'left' \| 'right'	string	'bottom'	Position of the strength description when descriptionMode is tooltip.
`visible`	boolean	boolean	true	Show or hide the strength meter.

Auto-generated from Password strength.props and inline _edit hints.