amazone/client/pages/signup.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">Create account</h1>
                <!--Your Name-->
                <div class="a-row a-spacing-base">
                  <label for="" class="a-form-label">Ypur name</label>
                  <input
                    v-model="name"
                    type="text"
                    id="ap_customer_name"
                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
                  />
                </div>
                <!--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="onSignup" class="a-button-text">Create your Amazon account</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>
                    Aready habe an accouint?
                    <nuxt-link to="/login" class="a-link-emphasis">login</nuxt-link>
                  </b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


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

  layout: 'none',

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

  methods: {
    async onSignup () {
      try {
        let  data = {
          name: this.name,
          email: this.email,
          password: this.password
        }

        let response = await this.$axios.$post('/api/auth/signup', data)

        console.log(response)

        if (response.success) {
          this.$auth.loginWith('local', {
            data: {
              email: this.email,
              password: this.password
            }
          })

          debugger

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