lhsazevedo / vuetify-material-auth

A work-in-progress Google like login example using vuetify

Vuetify Material Auth

A work-in-progress Google like auth example using vuetify

Introduction

This project is a simple demonstration of how to create a Google like, router based, multi step login form using Vue and Vuetify.

Features and Roadmap

• Sign in flow
• Sign up flow
• Username recovery flow
• Password recovery flow
• Internationalization

See it in action

Demo: https://vuetify-material-auth.vercel.app

Project setup

npm install
npm run serve

vuetify-material-auth's Issues

Make logo background transparent

Add username recovery steps

Add password recovery steps

Use Vuetify Lang API

First Timers Only

We know figuring out the process for contributing to an open source project or learning a new language can be intimidating, so we created this issue as a way for you to learn the ropes. (If you feel comfortable contributing to open source projects or to Vue.js, please leave this issue for someone else.)

What you will need to know

• Git
• Javascript
• Vue.js
• Vuetify

Background

This repository is a example of a Google like auth form using Vue and Vuetify.

Motivation

Google's auth form has an option to change the locale that isn't implemented in this example yet.

Objective

Use the Vuetify language API. This allows the addition of a language selector in the future.

Step by step

• Read the Vuetify internationalization documentation.
• Clone this repository, follow the installation instructions and make sure that the project is working in your development environment.
• Create a directory named locale inside the src folder.
• Inside the locale directory, create the en.js file. This file will be used for English texts.
• Add the basic structure according to the Vuetify example (import the default vuetify language and export an object mergin it).
• One by one, move the texts from the .vue templates to the new language file, replacing them with the t function of the Vuetify language API.

Example

SigninIdentifier.vue:

<template>
  <!-- Before -->
  <h1>Sign in</h1>
  <span>Use your Vuetify Account</span>

  <!-- After -->
  <h1>{{ $vuetify.lang.t('auth.signin.title') }}</h1>
  <span>{{ $vuetify.lang.t('auth.signin.subtitle') }}</span>
</template>

en.js:

import { en } from 'vuetify/src/locale'

export default {
  ...en,

  auth: {
    signin: {
      title: 'Sign in',
      description: 'Use your Vuetify Account'
    }
  }
}

Once approved, your changes will be merged.

Questions?

If you have questions ask in this issue or on your Pull Request (if you've created one).