A Vue component to handle submitting account creation details with Axios, instead of with a standard HTML form

CreateAccountForm.vue

<template>
  <form method="post" accept-charset="UTF-8">
    <h3><label for="username">Username</label></h3>
    <input v-model="username" id="username" type="text" name="username" />

    <h3><label for="email">Email</label></h3>
    <input v-model="email" id="email" type="text" name="email" />

    <h3><label for="password">Password</label></h3>
    <input v-model="password" id="password" type="password" name="password" />

    <button @click.prevent="handleCreateAccount">Create Account</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
    }
  },
  methods: {
    handleCreateAccount() {
      // Attempt login
      const userData = {
        username: this.username,
        email: this.email,
        password: this.password,
        action: 'users/save-user',
      }

      // NOTE: The following request using this.$axios assumes that you have your CSRF
      // header and data serialization pre-configured as recommended in my article here:
      // https://dev.to/jakedohm_34/using-axios-with-craft-and-vue-3ceb

      // If you don't have that set up, you'll need to manually pass your CSRF token
      // and serialize the loginData object. See the first comment on this Gist for info.

      this.$axios
        .post('/', userData)
        .then(response => {
          if (response && response.data && response.data.success === true) {
            // Everything worked!
            alert('User Signed Up!')
          } else {
            // Request went through, but something else went wrong.
            // Maybe the email/username was already in use, or something like that.
            // Check the error
            console.error('Account creation failed')
          }
        })
        .catch(error => {
          // Something went wrong with the request.
          // Could've been a CSRF issue, internet connection, who knows ¯\_(ツ)_/¯
          console.error('Account creation failed: ', error)
        })
    },
  },
}
</script>

As mentioned in the code, the way the form is submitted in this Gist requires you to pre-configure Axios according to this guide: https://dev.to/jakedohm_34/using-axios-with-craft-and-vue-3ceb

If you haven't configured Axios to handle CSRF and serialization automatically, the following code should work as a replacement:

import { stringify } from 'qs'
import axios from 'axios'

// see Gist for login data object
const userData = {}

loginData[window.csrfTokenName] = window.csrfTokenValue
axios.post('/', stringify(userData))

The rest (the code above and below the Axios call) should work the same for both implementations.