Register form

Code for this can be found in the Github Branch

This is a continuation from the registration functionality that I setup up in Vuex. This post will now create a simple form for registering the user in firebase using that function.

src/views/Register.vue

<template>
  <div>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" v-model="username" />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" v-model="email" />
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" v-model="password" />
  </div>
  <button @click="registerUser">Register</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
    };
  },
  methods: {
    ...mapActions('auth', ['register']),
    registerUser() {
      const userData = {
        username: this.username,
        email: this.email,
        password: this.password,
      };

      this.register(userData);
    },
  },
};
</script>

Other than the standard Vue features I'm using there is a cool little use of the spread operator and one of Vuex's best features. Instead of having to have to try and traverse the context and state I use mapActions. This is then added to the methods and I can use is as a normal method in the file. Pretty cool. This will register the user and on success re-direct the user back to the homepage.