nb-password-status-bar

This is a password (validator) component for Vue.js 3+.

Loading component...

This component is designed to accept the most secure password standard that is currently recommended:

  • Minimum of 8 characters
  • At least 1 uppercase letter
  • At least 1 lowercase letter
  • At least 1 number
  • At least 1 special character (!@#$%^&*(),.?:{}\|<>+-_)

Installation

Yarn
yarn add @vlalg-nimbus/nb-password
NPM
npm install @vlalg-nimbus/nb-password

Usage

Vue 3
import { createApp } from 'vue'
import App from './App.vue'

import NbPasswordComponents from '@vlalg-nimbus/nb-password'
import "@vlalg-nimbus/nb-password/dist/style.css";

const app = createApp(App)
app.use(NbPasswordComponents)
app.mount('#app')
Nuxt 3
import NbPasswordComponents from '@vlalg-nimbus/nb-password'
import "@vlalg-nimbus/nb-password/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbPasswordComponents)
})

To use, simply call the component, in this case it will be NbPasswordStatusBar or nb-password-status-bar.

Mode 1
<template>
  <NbPasswordStatusBar />
</template>
Mode 2
<template>
  <nb-password-status-bar />
</template>
Mode 3
<template>
  <nb-password-status-bar></nb-password-status-bar>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
displayString'b'Defines the display type. Accepts ib and b.
passwordString''Defines the password text.
widthNumber56Defines the component width. It only works when display is passed with the value ib.
heightNumber5Defines the component height.
borderRadiusNumber0Defines border-radius.
Table of Contents