How To Use Async/Await In Vue.js

How To Use Async/Await In Vue.js:

In this article, we will learn how to use async/await in vue.js

Step 1: Create a new Vue project:

vue create async-await-demo

Step 2: Install require packages:

npm i axios bootstrap

Step 3: Open main.js file and add following in it:

import Vue from 'vue'
import App from './App.vue'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),

Step 4: Open App.vue file and add the following in it:

  <div id="app"><department></department></div>
import Department from './components/Department.vue';
export default { name: 'App', components: { Department } };
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

Step 5: Create Department.vue file and add the following in it:

  <div class="container">
    <div class="card">
      <div class="card-header">
        <h1>Department Details</h1>
      <div class="card-body">
        <router-link to="/add" class="btn btn-primary" exact
        <table border="1px" class="table">
          <tr v-for="department in departments" :key="">
            <td>{{ department.departmentId }}</td>
            <td>{{ department.departmentName }}</td>
                class="btn btn-danger"

import axios from "axios";
export default {
  data() {
    return {
      departments: [],
  mounted() {
  methods: {
   async getAllDepartment() {
      await fetch(`${this.apiUrl}/Department/GetAllDepartment`)
        .then((res) => res.json())
        .then((res) => {
          this.departments = res;
   async deleteDept(id) {
      let uri =
        `${this.apiUrl}/Department/DeleteDepartment/id?id=` + id;
      this.departments.splice(id, 1);
      await axios.delete(uri);

<style scoped>
.btn {
  margin: 10px;

Code in action:

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories