diff --git a/app/assets/javascripts/pages/projects/branches/index/components/delete_merged_brances_modal.vue b/app/assets/javascripts/pages/projects/branches/index/components/delete_merged_brances_modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..39ee79a26b07daaf1cfa56f86edf784d6beca491
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/branches/index/components/delete_merged_brances_modal.vue
@@ -0,0 +1,53 @@
+<script>
+  import axios from '~/lib/utils/axios_utils';
+  import { s__, sprintf } from '~/locale';
+  import Flash from '~/flash';
+  import modal from '~/vue_shared/components/modal.vue';
+  import { redirectTo } from '~/lib/utils/url_utility';
+
+  export default {
+    components: {
+      modal,
+    },
+    props: {
+      defaultBranch: {
+        type: String,
+        required: true,
+      },
+      url: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      modalText() {
+        return sprintf(s__(`You’re about to permanently delete all merged branches 
+        that were merged into ‘%{defaultBranchName}’. 
+        Once you confirm and press Delete merged branches, it cannot be undone or recovered.`),
+        { defaultBranchName: this.defaultBranch });
+      },
+    },
+    methods: {
+      onSubmit() {
+        axios.delete(this.url)
+        .then((resp) => {
+          redirectTo(resp.request.responseURL);
+        })
+        .catch(() => {
+          // TODO: Check with UX for the error message
+          Flash(s__('Branches|Deleting the merged branches failed'));
+        });
+      },
+    },
+  };
+</script>
+<template>
+  <modal
+    id="delete-merged-branches-modal"
+    :title="s__('Branches|Delete all merged branches?')"
+    :text="modalText"
+    kind="danger"
+    :primary-button-label="s__('Branches|Delete merged branches')"
+    @submit="onSubmit"
+  />
+</template>
diff --git a/app/assets/javascripts/pages/projects/branches/index/index.js b/app/assets/javascripts/pages/projects/branches/index/index.js
index cee0f19bf2ab1ddb0e207d57481c927aacb54a26..e813c4bc8d96c2f6b90b9e643a7106ae9f81d27b 100644
--- a/app/assets/javascripts/pages/projects/branches/index/index.js
+++ b/app/assets/javascripts/pages/projects/branches/index/index.js
@@ -1,7 +1,34 @@
+import Vue from 'vue';
 import AjaxLoadingSpinner from '~/ajax_loading_spinner';
-import DeleteModal from '~/branches/branches_delete_modal';
+import Translate from '~/vue_shared/translate';
+import deleteMergedBranchesModal from './components/delete_merged_brances_modal.vue';
+
+Vue.use(Translate);
+
+function createDeleteMergedBranchesModal(props) {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#delete-merged-branches-modal',
+    components: {
+      deleteMergedBranchesModal,
+    },
+    render(createElement) {
+      return createElement('delete-merged-branches-modal', {
+        props,
+      });
+    },
+  });
+}
 
 export default () => {
+  const deleteMergedBranchesButton = document.getElementById('delete-merged-branches-button');
   AjaxLoadingSpinner.init();
-  new DeleteModal(); // eslint-disable-line no-new
+  deleteMergedBranchesButton.onclick = (event) => {
+    const button = event.currentTarget;
+    const props = {
+      defaultBranch: button.dataset.defaultBranch,
+      url: button.dataset.url,
+    };
+    createDeleteMergedBranchesModal(props);
+  };
 };
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index fb7707643641d8c7d58762d963e7fd792de3bf74..9ac3426d925c89ae5bd0e29339d9d024cb5dadec 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -2,6 +2,7 @@
 - page_title _('Branches')
 
 %div{ class: container_class }
+  #delete-merged-branches-modal
   .top-area.adjust
     - if can?(current_user, :admin_project, @project)
       .nav-text
@@ -25,12 +26,12 @@
               = link_to title, filter_branches_path(sort: value), class: ("is-active" if @sort == value)
 
       - if can? current_user, :push_code, @project
-        = link_to project_merged_branches_path(@project),
-          class: 'btn btn-inverted btn-remove has-tooltip',
+        %button#delete-merged-branches-button.btn.btn-inverted.btn-remove.has-tooltip{ type: 'button',
           title: s_("Branches|Delete all branches that are merged into '%{default_branch}'") % { default_branch: @project.repository.root_ref },
-          method: :delete,
-          data: { confirm: s_('Branches|Deleting the merged branches cannot be undone. Are you sure?'),
-            container: 'body' } do
+          data: { toggle: 'modal',
+          default_branch: @project.repository.root_ref,
+          target: '#delete-merged-branches-modal',
+          url: project_merged_branches_path(@project) } }
           = s_('Branches|Delete merged branches')
         = link_to new_project_branch_path(@project), class: 'btn btn-create' do
           = s_('Branches|New branch')