amazone/client/pages/login.vue

<template>
  <div class="registerPage">
    <div class="container">
      <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
          <div class="text-center">
            <nuxt-link to="#">
              <img src="/img/logo-black.png" alt="">
            </nuxt-link>
          </div>
          <div class="mt-4">
            <div class="a-box a-spacing-extra-large">
              <div class="a-blx-inner">
                <h1 class="a-spacing-small">Login</h1>
                <!--Your Email-->
                <div class="a-row a-spacing-base">
                  <label for="" class="a-form-label">Ypur Email</label>
                  <input
                    v-model="email"
                    type="text"
                    id="ap_customer_email"
                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
                  />
                </div>
                <!--Your Password-->
                <div class="a-row a-spacing-base">
                  <label for="" class="a-form-label">Ypur Password</label>
                  <input
                    v-model="password"
                    type="password"
                    id="ap_customer_password"
                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
                  />
                  <div class="a-alert-container">
                    <div class="a-alert-content">password must be at least 6 charteres</div>
                  </div>
                </div>
                <!-- Button -->
                <div class="a-row a-spacing-extra-large mb-4">
                  <span class="a-button-primary">
                    <span class="a-button-inner">
                      <span @click="onLogin" class="a-button-text">Continuye</span>
                    </span>
                  </span>
                  <div class="a-row a-spacing-top-medium a-size-small">
                    <b>
                      By create an accoutnm
                      <a href="#">conditions of Use</a> and
                      <a href="#">conditions of Use</a>
                    </b>
                  </div>
                </div>
                <h4/>
                <div class="a-row">
                  <b>
                    don have an account?
                    <nuxt-link to="/signup" class="a-link-emphasis">Sign up</nuxt-link>
                  </b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  middleware: 'auth',
  auth: 'guest',

  layout: 'none',

  data () {
    return {
      email: '',
      password: ''
    }
  },

  methods: {
    async onLogin () {
      try {
        this.$auth.loginWith('local', {
          data: {
            email: this.email,
            password: this.password
          }
        })

        this.$router.push('/')
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>