How to Use Async and Await with Vue.js Apps

John Au-Yeung
John Au-Yeung
Sep 15, 2019 · 19 min read

Vue.js is a great framework for building front end web apps. It uses a component based architecture which makes organizing code easy. It allows you to use the latest features JavaScript has to offer which means writing code to build your apps is easy than ever. With latest versions of JavaScript (ES2017 or later), the async and await keywords are introduced. It is a shorthand for chaining promises, equivalent to calling a chain of then functions and returning a promise in each of the callbacks in the then function. For example:

is the same as:

Notice that the first code block is much shorter than the second one. Each promise is called sequentially in both examples.

This syntax is available to almost all modern browsers and can be made usable with Internet Explorer with transpilers like Babel. Vue.js uses Babel so we can use it in almost any browser including Internet Explorer.

In this story, we will build an address book app with Vue.js that uses Vee-Validate to validate our inputs. The form allows us to add and edit our contacts also we can get and delete contacts.

To build our app, first we need to quickly set up a back end. To do this, we use a Node.js package called JSON Server to run our back end. The package’s documentation is located at https://github.com/typicode/json-server. Once this is running, it provides us with routes for us to save our contact entries from front end. To install the package, run:

We will run this later so we can save our contacts.

Now we can start building our app. To do this, install the Vue CLI by running:

Then create the app by running:

vee-validate-address-book-app is our app name. When running the wizard, be sure you choose to include Vuex and Vue Router as we will use it later. Next we have to install some libraries. We need a HTTP client, a Material Design library for making our app look good, and the Vee-Validate library. To do this, run npm i axios vee-validate vue-material . Axios is our HTTP client for communicating to back end. Vue Material is our Material Design library.

Next we create our components that we nest in our page components. To do this, create a components folder in our project folder and within it, create a file called ContactForm.vue . In this file, we put:

<br /><md-field :class="{ 'md-invalid': errors.has('lastName') }">
        <label for="lastName">Last Name</label>
        <md-input
          name="lastName"
          v-model="contact.lastName"
          :disabled="sending"
          v-validate="'required'"
        />
        <span class="md-error" v-if="errors.has('lastName')">Last Name is required.</span>
      </md-field><br /><md-field :class="{ 'md-invalid': errors.has('addressLineOne') }">
        <label for="addressLineOne">Address Line 1</label>
        <md-input
          name="addressLineOne"
          v-model="contact.addressLineOne"
          :disabled="sending"
          v-validate="'required'"
        />
        <span class="md-error" v-if="errors.has('addressLineOne')">Address line 1 is required.</span>
      </md-field><br /><md-field :class="{ 'md-invalid': errors.has('addressLineTwo') }">
        <label for="addressLineTwo">Address Line 2</label>
        <md-input name="addressLineTwo" v-model="contact.addressLineTwo" :disabled="sending" />
        <span class="md-error" v-if="errors.has('addressLineTwo')">Address line 2 is required</span>
      </md-field><br /><md-field :class="{ 'md-invalid': errors.has('city') }">
        <label for="city">City</label>
        <md-input name="city" v-model="contact.city" :disabled="sending" v-validate="'required'" />
        <span class="md-error" v-if="errors.has('city')">City is required.</span>
      </md-field><br /><md-field :class="{ 'md-invalid': errors.has('country') }">
        <label for="country">Country</label>
        <md-select
          name="country"
          v-model="contact.country"
          md-dense
          :disabled="sending"
          v-validate.continues="'required'"
        >
          <md-option :value="c" :key="c" v-for="c in countries">{{c}}</md-option>
        </md-select>
        <span class="md-error" v-if="errors.firstByRule('country', 'required')">Country is required.</span>
      </md-field><br /><md-field :class="{ 'md-invalid': errors.has('postalCode') }">
        <label for="postalCode">Postal Code</label>
        <md-input
          name="postalCode"
          v-model="contact.postalCode"
          :disabled="sending"
          v-validate="{ required: true, regex: getPostalCodeRegex() }"
        />
        <span
          class="md-error"
          v-if="errors.firstByRule('postalCode', 'required')"
        >Postal Code is required.</span>
        <span
          class="md-error"
          v-if="errors.firstByRule('postalCode', 'regex')"
        >Postal Code is invalid.</span>
      </md-field><br /><md-field :class="{ 'md-invalid': errors.has('phone') }">
        <label for="phone">Phone</label>
        <md-input
          name="phone"
          v-model="contact.phone"
          :disabled="sending"
          v-validate="{ required: true, regex: getPhoneRegex() }"
        />
        <span class="md-error" v-if="errors.firstByRule('phone', 'required')">Phone is required.</span>
        <span class="md-error" v-if="errors.firstByRule('phone', 'regex')">Phone is invalid.</span>
      </md-field><br /><md-field :class="{ 'md-invalid': errors.has('gender') }">
        <label for="gender">Gender</label>
        <md-select
          name="gender"
          v-model="contact.gender"
          md-dense
          :disabled="sending"
          v-validate.continues="'required'"
        >
          <md-option value="male">Male</md-option>
          <md-option value="female">Female</md-option>
        </md-select>
        <span class="md-error" v-if="errors.firstByRule('gender', 'required')">Gender is required.</span>
      </md-field><br /><md-field :class="{ 'md-invalid': errors.has('age') }">
        <label for="age">Age</label>
        <md-input
          type="number"
          id="age"
          name="age"
          autocomplete="age"
          v-model="contact.age"
          :disabled="sending"
          v-validate="'required|between:0,200'"
        />
        <span class="md-error" v-if="errors.firstByRule('age', 'required')">Age is required.</span>
        <span class="md-error" v-if="errors.firstByRule('age', 'between')">Age must be 0 and 200.</span>
      </md-field><br />
      <md-field :class="{ 'md-invalid': errors.has('email') }">
        <label for="email">Email</label>
        <md-input
          type="email"
          name="email"
          autocomplete="email"
          v-model="contact.email"
          :disabled="sending"
          v-validate="'required|email'"
        />
        <span class="md-error" v-if="errors.firstByRule('email', 'required')">Email is required.</span>
        <span class="md-error" v-if="errors.firstByRule('email', 'email')">Email is invalid.</span>
      </md-field><md-progress-bar md-mode="indeterminate" v-if="sending" /><md-button type="submit" class="md-raised">{{editing ? 'Edit':'Create'}} Contact</md-button>
    </form>
  </div>
</template><script>
import { COUNTRIES } from "@/helpers/exports";
import { contactMixin } from "@/mixins/contactMixin";export default {
  name: "ContactForm",
  mixins: [contactMixin],
  props: {
    editing: Boolean,
    contactId: Number
  },
  computed: {
    isFormDirty() {
      return Object.keys(this.fields).some(key => this.fields[key].dirty);
    },
    contacts() {
      return this.$store.state.contacts;
    }
  },
  data() {
    return {
      sending: false,
      contact: {},
      countries: COUNTRIES.map(c => c.name)
    };
  },  beforeMount() {
    this.contact = this.contacts.find(c => c.id == this.contactId) || {};
  },  methods: {
    async save(evt) {
      evt.preventDefault();
      try {
        const result = await this.$validator.validateAll();
        if (!result) {
          return;
        }
        if (this.editing) {
          await this.updateContact(this.contact, this.contactId);
          await this.getAllContacts();
          this.$emit("contactSaved");
        } else {
          await this.addContact(this.contact);
          await this.getAllContacts();
          this.$router.push("/");
        }
      } catch (ex) {
        console.log(ex);
      }
    },    async getAllContacts() {
      try {
        const response = await this.getContacts();
        this.$store.commit("setContacts", response.data);
      } catch (ex) {
        console.log(ex);
      }
    },getPostalCodeRegex() {
      if (this.contact.country == "United States") {
        return /^[0-9]{5}(?:-[0-9]{4})?$/;
      } else if (this.contact.country == "Canada") {
        return /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/;
      }
      return /./;
    },getPhoneRegex() {
      if (["United States", "Canada"].includes(this.contact.country)) {
        return /^[2-9]\d{2}[2-9]\d{2}\d{4}$/;
      }
      return /./;
    }
  }
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.contact-form {
  margin: 0 auto;
  width: 90%;
}
</style>

In the file above, we have the contact form for adding and updating contacts in our address book. It is where Vee-Validate is used the most. Notice that in most input controls within the form tag, we have the v-validate prop, this is where we specify what kind of input the control accepts. required means that the form field is required. regex means we validate against a specified regular expression. This allows for custom form validation where there is no built in rules for Vee Validate available, or when you need to validate the field differently depending on the value of another field. For example for phone number, we have this function:

It allows us to validate the number to see if it matches the North American telephone format when we enter United States or Canada. Otherwise, we let people enter whatever they want.

Similar, for postal code, we have:

This allows us to check for US zip codes and Canadian postal codes.

Notice is the file above we used the async and await syntax for chaining promises in this block:

We have at least 3 promises being called in any case, so using the old syntax, chaining promises would be much longer than this. Also, we can use try...catch block to catch errors instead of chaining the catch function with its own callback function passed in at the end. It is also much readable and while it looks like synchronous code, it is not. You cannot return anything at the end but a promise.

To display errors, we can check if errors exists for a form field, then display errors. For example, for first name, we have:

errors.has(‘firstName’) checks if the first name field meets the validation criteria that we specified. Since we’re checking if it’s filled in, there is only one possible error, so we can just display the only error when errors.has(‘firstName’) returns true . For something more complex like phone, we have:

<span class="md-error" v-if="errors.firstByRule('phone', 'regex')">Phone is invalid.</span>

This allows us to check for each validation rule separately. For the phone number field, we have to check if it’s filled in and if what’s filled in has a valid format. The errors.firstByRule function allows us to do that. errors.firstByRule(‘phone’, ‘required’) returns true if the field is not filled in and false otherwise. errors.firstByRule(‘phone’, ‘regex’) returns true is the phone number is filled in in an incorrect format and false otherwise.

Vee-Validate provides a this.field object to your component. So we can check if fields are dirty, which means if they have been manipulated or not, by adding:

Each property is a form field and each property of the this.fields object has a dirty property, so we can check if they fields are manipulated or not.

In the save function of the methods object, we have:

We need evt.preventDefault() to stop the form from submitting the normal way, i.e. without calling the Ajax code below. this.$validator.validateAll() validates the form. this.$validator is an object provided by Vee Validate. It returns a promise, so we need the function to be async and we need await before the function call. If result is falsy, the form validation failed, so we run return to stop the rest of the function from executing. Finally, if form fields are all valid, we can submit. Since this form is used for both adding and editing contacts, we have to check which action we’re doing. If we edit, then we call await this.updateContact(this.contact, this.contactId); to update our contact. Otherwise, we add contact so we call await this.addContact(this.contact); In either case, we call await this.getAllContacts(); to refresh our contacts and put them in the store. If we are adding then we will redirect to the home page at the end by calling this.$router.push(“/”); . this.updateContact , this.addContact , and this.getAllContacts are all from our contactMixin which we will write shortly. Notice that we use the async and await keywords for chaining promises again.

Next we write some helper code. Create a folder called helpers and within it, make a file called export.js and put in the following:

This provides the countries that we reference in ContactForm.vue .

Next we add our mixin to manipulate our contacts by communicating with our back end. We make a folder call mixins and create a file called contactMixin.js within it. In the file, we put: 

export const contactMixin = {
    methods: {
        getContacts() {
            return axios.get(`${apiUrl}/contacts`);
        },addContact(data) {
            return axios.post(`${apiUrl}/contacts`, data);
        },updateContact(data, id) {
            return axios.put(`${apiUrl}/contacts/${id}`, data);
        },deleteContact(id) {
            return axios.delete(`${apiUrl}/contacts/${id}`);
        }
    }
}

This will let us include our functions in the methods object of the component object we include or mixin with by putting it in the mixins array of our component object.

Next we add our pages. To do this, create a views folder if it doesn’t already exists and add ContactFormPage.vue . In there, put:

<script>
// @ is an alias to /src
import ContactForm from "@/components/ContactForm.vue";export default {
  name: "ContactFormPage",
  components: {
    ContactForm
  }
};
</script>

This just displays the ContactForm component that we created. We set the :edit prop to false so that it’ll add our contact instead of editing.

Next we add our home page to display a list of contacts. In the views folder, we add a file called Home.vue if it doesn’t already exists. Then in there we put:

<md-table-row v-for="c in contacts" :key="c.id">
        <md-table-cell md-numeric>{{c.id}}</md-table-cell>
        <md-table-cell>{{c.firstName}}</md-table-cell>
        <md-table-cell>{{c.lastName}}</md-table-cell>
        <md-table-cell>{{c.addressLineOne}}</md-table-cell>
        <md-table-cell>{{c.addressLineTwo}}</md-table-cell>
        <md-table-cell>{{c.city}}</md-table-cell>
        <md-table-cell>{{c.country}}</md-table-cell>
        <md-table-cell>{{c.postalCode}}</md-table-cell>
        <md-table-cell>{{c.gender}}</md-table-cell>
        <md-table-cell md-numeric>{{c.age}}</md-table-cell>
        <md-table-cell>{{c.email}}</md-table-cell>
        <md-table-cell>
          <md-button class="md-primary" @click="selectedContactId = c.id; showDialog = true">Edit</md-button>
        </md-table-cell>
        <md-table-cell>
          <md-button class="md-accent" @click="removeContact(c.id)">Delete</md-button>
        </md-table-cell>
      </md-table-row>
    </md-table><md-dialog :md-active.sync="showDialog">
      <md-dialog-content>
        <ContactForm
          :editing="true"
          :contactId="selectedContactId"
          @contactSaved="selectedContactId = undefined; showDialog = false"
        />
      </md-dialog-content>
    </md-dialog>
  </div>
</template><script>
import { contactMixin } from "@/mixins/contactMixin";
import ContactForm from "@/components/ContactForm.vue";export default {
  name: "HomePage",
  mixins: [contactMixin],
  components: {
    ContactForm
  },
  props: {
    editing: Boolean,
    id: Number
  },
  computed: {
    contacts() {
      return this.$store.state.contacts;
    }
  },
  data() {
    return {
      showDialog: false,
      selectedContactId: undefined
    };
  },beforeMount() {
    this.getAllContacts();
  },methods: {
    async getAllContacts() {
      try {
        const response = await this.getContacts();
        this.$store.commit("setContacts", response.data);
      } catch (ex) {
        console.log(ex);
      }
    },async removeContact(id) {
      try {
        await this.deleteContact(id);
        await this.getAllContacts();
      } catch (ex) {
        console.log(ex);
      }
    }
  }
};
</script><style scoped>
.md-dialog-container {
  padding: 20px;
}.md-content.md-table.md-theme-default {
  width: 95%;
  margin: 0 auto;
}
</style>

We get our contacts during page load by call the this.getAllContacts function in the beforeMount function. Notice that we have this.getContacts function from our mixin. Mixins allows us to reuse code. Code in our mixinx cannot have the same name as the functions in our methods objects in our components because mixin functions hooks straight into our methods since we exported an object with methods field in our Mixin code.

In App.vue , we add our menu and top bar by putting the following:

<md-list>
        <md-list-item>
          <router-link to="/">
            <span class="md-list-item-text">Home</span>
          </router-link>
        </md-list-item><md-list-item>
          <router-link to="/contact">
            <span class="md-list-item-text">Add Contact</span>
          </router-link>
        </md-list-item>
      </md-list>
    </md-drawer><router-view />
  </div>
</template><script>
export default {
  name: "app",
  data: () => {
    return {
      showNavigation: false
    };
  }
};
</script><style lang="scss">
.center {
  text-align: center;
}
</style>

In main.js , we add our boilerplate code to include Vue Material and Vee Validate in our app:

Vue.use(VeeValidate);
Vue.use(VueMaterial);Vue.config.productionTip = falsenew Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

In router.js , we add our routes so we can see our pages:

Vue.use(Router)export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },
    {
      path: '/contact',
      name: 'contact',
      component: ContactFormPage
    }
  ]
})

In store.js , we put:

Vue.use(Vuex)export default new Vuex.Store({
  state: {
    contacts: []
  },
  mutations: {
    setContacts(state, payload) {
      state.contacts = payload;
    }
  },
  actions: {}
})

to store our contact in a place where all components can access. The store uses the Vuex library so that we have a this.$store object to call our mutation with the this.$store.commit function and get the latest data from the store via the computed property of our component object, like so:

Finally in index.html , we put: 

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
  <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
  <title>Address Book App</title>
</head><body>
  <noscript>
    <strong>We're sorry but vee-validate-tutorial-app doesn't work properly without JavaScript enabled. Please enable it
      to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body></html>

to add the Roboto font and Material icons to our app.

Now we are ready to start our JSON server. Go to our project folder and run json-server — watch db.json to start the server. It will allow us to call these routes without any configuration:

These are all the routes we need. Data will be saved to db.json of the folder that we’re in, which should our app’s project folder.

At the end, we have the following:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

async and await are great ways to chain promises. The syntax is much more convenient than chaining then functions. The only thing you have to worry about is when your app has to be compatible with Internet Explorer. This syntax is not available for Internet Explorer without something like Babel. See full compatibility list at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function.

Subscribe to my email list now at http://jauyeung.net/subscribe/ to get more tutorials.

Follow me on Twitter at https://twitter.com/AuMayeung