https://github.com/ilkerdurmaz/vue-bootstrap-login
A login component that was made with vue, bootstap and much love.
https://github.com/ilkerdurmaz/vue-bootstrap-login
component login login-forms vue vue-components vuejs
Last synced: 5 months ago
JSON representation
A login component that was made with vue, bootstap and much love.
- Host: GitHub
- URL: https://github.com/ilkerdurmaz/vue-bootstrap-login
- Owner: ilkerdurmaz
- License: mit
- Created: 2022-04-02T13:18:15.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-11T06:41:53.000Z (almost 4 years ago)
- Last Synced: 2025-11-02T10:08:30.999Z (8 months ago)
- Topics: component, login, login-forms, vue, vue-components, vuejs
- Language: Vue
- Homepage: https://www.npmjs.com/package/vue-bootstrap-login
- Size: 3.28 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A login/register component for the web apps.
### Sign-Up / Sign-In Transition
### Validation and Error
## [DEMO](https://ilkerdurmaz.github.io/vue-bootstrap-login/)
## Using the component:
**Installing**
```bash
npm i vue-bootstrap-login
```
**Import to Project**
```javascript
// main.js file
import loginMain from 'vue-bootstrap-login/src/components/loginMain'
Vue.component('myLoginComp', loginMain)
```
or
```vue
import loginMain from 'vue-bootstrap-login/src/components/loginMain'
export default {
components: {
myLoginComp: loginMain
}
}
```
and
```vue
```
### Props
``` html
```
| 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
* [Vue.js](https://vuejs.org/)
* [Bootstrap, Bootstrap Icons](https://getbootstrap.com)
* [Vuelidate](https://vuelidate-next.netlify.app/)