#app
  v-app(dark)
    v-content
      v-container(fill-height)
        v-layout(align-center justify-center)
          v-flex(class='login-form' class='text-xs-center') 
            .display-1.mb-3 #[v-icon.mr-2(large) work] MyWorkspace
            v-card(light)
              v-card-text
                .subheading
                  template(v-if='options.isLoggingIn') Log in to your customer portal
                  template(v-else) Crate a new account
                v-form
                  v-text-field(v-if='!options.isLoggingIn' v-model='user.name' light prepend-icon='person' label='Name')
                  v-text-field(v-model='user.email' light prepend-icon='email' label='Email' type='email')
                  v-text-field(v-model='user.password' light prepend-icon='lock' label='Password' type='password')
                  v-checkbox(v-if='options.isLoggingIn' v-model='options.shouldStayLoggedIn' light label='Stay logged in?' hide-details)
                  v-btn(v-if='options.isLoggingIn' @click.prevent='' block type='submit') Sign in
                  v-btn(v-else block type='submit' @click.prevent='options.isLoggingIn = true') Sign up
            div(v-if='options.isLoggingIn')
              | Don't have an account?
              v-btn(light @click='options.isLoggingIn = false') Sign up

    v-footer(app)
      v-flex(class='text-xs-center') © 2018. All rights reserved.
View Compiled
.login-form
  max-width: 500px
View Compiled
const vm = new Vue({
  el: '#app',
  data: {
    user: {
      // email: 'admin@example.com',
      // password: 'admin',
      // name: 'John Doe',
    },
    options: {
      isLoggingIn: true,
      shouldStayLoggedIn: true,
    },
  },
})
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons
  2. https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.18/vuetify.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.18/vuetify.min.js
  3. https://unpkg.com/js-yaml/dist/js-yaml.min.js