/vue-bootstrap-login

A login component that was made with vue, bootstap and much love.

Primary LanguageVueMIT LicenseMIT

A login/register component for the web apps.

Sign-Up / Sign-In Transition

1

Validation and Error

2

DEMO

Using the component:

Installing

   npm i vue-bootstrap-login

Import to Project

// main.js file
import loginMain from 'vue-bootstrap-login/src/components/loginMain'
Vue.component('myLoginComp', loginMain)

or

<script>
 import loginMain from 'vue-bootstrap-login/src/components/loginMain'
  export default {
    components: {
      myLoginComp: loginMain
    }
  }
</script>

and

<template>
  <myLoginComp ...props>
</template>

Props

   <myLoginComp 
    :v-model=""
    :btnColor=""
    :bgColor=""
    :isDark=""
    :loginTitle=""
    :registerTitle=""            
    :titleSize=""
    :passLength=""
    :forgotPassLink=""
    :termsLink=""            
    :isCorrect=""            
    :loginMessage=""
    :registerMessage=""/>
Prop Type Description Default
value/modelValue (v-model) Object email/password/submitType(login/register)/rememberMe {}
bgColor String component background color transparent
btnColor String buttons background color linear-gradient(90deg,rgba(6, 154, 231, 1) 0%,rgba(35, 204, 236, 1) 100%)
loginTitle String - WELCOME
registerTitle String - JOIN US!
titleSize String css font size 4rem
passLength Number minimum password size 6
forgotPassLink String forgot password link #
termsLink String registration terms link #
isCorrect Boolean sign up / sign in form validation result, when is false login/register button is disabled true
isDark Boolean Title and button texts color switch (dark/light) false
loginMessage String error message displayed on the login button when isCorrect=false information is incorrect
registerMessage String error message displayed on the register button when isCorrect=false information is incorrect

Built With