Vue Password displays strength indicator for password fields. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import Password from 'primevue/password';
Getting Started
A model can be bound using the standard v-model directive.
<Password v-model="value" />
Customization
Password component uses regular expressions for middle and strong passwords with the following defaults.
Medium ^(((?=.[a-z])(?=.[A-Z]))|((?=.[a-z])(?=.[0-9]))|((?=.[A-Z])(?=.[0-9])))(?=.{6,}).
- At least one lowercase
- At least one uppercase or one number
- Minimum 6 characters
Strong ^(?=.[a-z])(?=.[A-Z])(?=.*[0-9])(?=.{8,})
- At least one lowercase
- At least one uppercase
- At least one numeric
- Minimum 8 characters
It is possible to define your own checks with the mediumRegex and strongRegex properties.
Templating
3 slots are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.
<Password v-model="value4">
<template #header>
<h6>Pick a password</h6>
</template>
<template #footer>
<Divider />
<p class="p-mt-2">Suggestions</p>
<ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
</template>
</Password>
Theming
Password supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Password showcase for demos and documentation.