hilton meyer

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.


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

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,


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.