iOS Style Alert / Confirm Dialog Box For Vue.js

In this post i am going share simple iOS Style Alert / Confirm Dialog Box For Vue.js. This vue component will replace default javascript alert box with iOS Style Alert / conform / prompt popup.

vue-confirm

Install
npm install --save vue-confirm-dialog
Quick Start Usage

import Vue from "vue";
import VueConfirmDialog from "vue-confirm-dialog";

Vue.use(VueConfirmDialog);
<!-- your page layout -> e.g. default.vue -->
<template>
  ...
  <vue-confirm-dialog></vue-confirm-dialog>
  ...
</template>
JS – Component
<!-- in your component -->
<script>
export default {
  methods: {
  ...
    handleClick(){
      let self = this
      this.$vueConfirm.confirm(
        {
          message: `Are you sure?`,
          button: {
            no: 'No',
            yes: 'Yes'
          }
        },
        function(confirm) {
          if (confirm == true) {
            self.$vueConfirm.close()
          }
        }
      )
    }
    ...
  }
...
}
</script>


Example Component
<template>
  <div class="grid">
    <ul>
      <li v-for="(item, i) in list" :key="item.id">
        <span class="item">
          {{ item.text }}
          <button @click.stop="showConfirm(item)">Delete</button>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Example",
  data() {
    return {
      list: [
        { text: "item 1", id: 1 },
        { text: "item 2", id: 2 },
        { text: "item 3", id: 3 }
      ]
    };
  },
  methods: {
    showConfirm(item) {
      let self = this;
      this.$vueConfirm.confirm(
        {
          message: `Are you sure? ${item.text} will be remove?`,
          button: {
            no: "No",
            yes: "Yes"
          }
        },
        
        function(confirm, password) {
          if (confirm == true) {
            if (password == "USER_PASSWORD") {
              for (let i = 0; i < self.list.length; i++) {
                if (self.list[i].id == item.id) {
                  self.list.splice(i, 1);
                  self.$vueConfirm.close();
                  break;
                }
              }
            }
          }
        }
      );
    }
  }
};
</script>

<style scoped>
.grid {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
ul {
  border: 1px solid gray;
  padding: 1rem 2rem;
  width: 200px;
}
li {
  text-align: left;
  margin: 0.5rem 0;
}
.item {
  display: grid;
  grid-template-columns: 1fr 96px;
  width: 100%;
}
</style>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by aslanon. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.