vue-login-critter v0.1.3

Vue Login Critter

An attempt to build a customisable login form with an animated character based on https://github.com/cgoldsby/LoginCritter.

The goal is to build a login form component which allows:

• Drop in of different characters or avatars, supporting rich animations and interactivity
• Customisation of colours, form inputs and button
• TBC

If you like or use this project, please consider supporting my work. Thanks! 🙏🏼

Todo list

This project is in early stages of development, so expect bugs and breaking changes. If you give it a go, please let me know your thoughts!

• Rich animated interactive character responses as user types username and password.

  To allow for rich character animations and interactivity, I think supporting Lottie is the way forward here.

• Additional customisation options such as form inputs, colours, labels.

• Customise background color
• Submit button is a slot which can be replaced
• Character states represented by images (neutral, active, shy, peek and success)

Install

npm install vue-login-critter --save

Usage

In main.js in your Vue project

import Vue from 'vue'
import LoginCritter from 'vue-login-critter'

Vue.use(LoginCritter)

And then, in your template

<login-critter
  background-color="#fff"
  text-color="#333"
  :neutral-image="require('path/to/neutralimage.png')"
  :active-image="require('path/to/activeimage.png')"
  :shy-image="require('path/to/shyimage.png')"
  :peek-image="require('path/to/peekimage.png')"
  :success-image="require('path/to/successimage.png')"
>
  <template v-slot:footer>
    <button type="submit">My button label</button>
  </template>
</login-critter>

See documentation about props, slots and events below.

Props

Thanks to https://github.com/cgoldsby/LoginCritter for the default character assets.

Slots

Events

<login-critter
  // ...props
  @submit-form="loginUser"
>
</login-critter>

// and in your methods
loginUser(username, password) {
  // do something here
}