Buefy — Confirm Dialog

Image for post
Image for post
Photo by Marc Kleen on Unsplash

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Confirm Dialog

We can add a cancel button with the confirm button with the cancelText property:

<template>
<section>
<button class="button is-primary" @click="confirm">Launch confirm</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
confirm() {
this.$buefy.dialog.confirm({
title: "Title",
message: "Are you sure?",
cancelText: "Disagree",
confirmText: "Agree",
onConfirm: () => this.$buefy.toast.open("confirmed")
});
}
}
};
</script>

Also, we can add an icon with the type and iconPack properties:

<template>
<section>
<button class="button is-primary" @click="confirm">Launch confirm</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
confirm() {
this.$buefy.dialog.confirm({
title: "Title",
message: "Are you sure?",
confirmText: "Agree",
type: "is-danger",
iconPack: "fa",
hasIcon: true,
onConfirm: () => this.$buefy.toast.open("confirmed")
});
}
}
};
</script>

iconPack sets the icon pack to use. 'fa' stands for Font Awesome.

is-danger is the icon class name.

hasIcon enables the icon to be displayed.

Prompt Dialog

Buefy also comes with its own prompt dialog box.

For example, we can write:

<template>
<section>
<button class="button is-medium" @click="prompt">Launch prompt</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
prompt() {
this.$buefy.dialog.prompt({
message: `What's your name?`,
inputAttrs: {
placeholder: "Enter name",
maxlength: 10
},
trapFocus: true,
onConfirm: value => this.$buefy.toast.open(`Your name is: ${value}`)
});
}
}
};
</script>

We call the prompt method with a message and inputAttrs properties.

message has the message.

inputAttrs has placeholders and max length of the input.

The onConfirm method is called after the dialog is dismissed.

value has the value entered in the prompt input.

trapFocus focus on the prompt input when it’s opened.

We can also add a numeric prompt input:

<template>
<section>
<button class="button is-medium" @click="prompt">Launch prompt</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
prompt() {
this.$buefy.dialog.prompt({
message: `What's your age?`,
inputAttrs: {
placeholder: "Enter age",
maxlength: 3,
min: 18
},
trapFocus: true,
onConfirm: value => this.$buefy.toast.open(`Your age is: ${value}`)
});
}
}
};
</script>

maxlength restricts the length and min is the min value.

We can control how the dialog is closed.

For example, we can write:

<template>
<section>
<button class="button is-medium" @click="prompt">Launch prompt</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
prompt() {
this.$buefy.dialog.prompt({
message: `What's your age?`,
inputAttrs: {
placeholder: "Enter age"
},
trapFocus: true,
onConfirm: (value, { close }) => {
this.$buefy.toast.open(`Sending...`);
setTimeout(() => {
this.$buefy.toast.open(`Success`);
close();
}, 2000);
}
});
}
}
};
</script>

to call the close method on the onConfirm callback.

This way, we can close it when we want instead of closing it immediately.

Promise

The dialog methods also return a promise.

To do that, we set the defaultProgrammaticPromise to true when we call Vue.use .

For example, we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import Buefy from "buefy";
import "buefy/dist/buefy.css";
Vue.use(Buefy, {
defaultProgrammaticPromise: true
});
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
<section>
<button class="button is-medium" @click="prompt">Launch prompt</button>
</section>
</template>
<script>
export default {
name: "App",
methods: {
async prompt() {
await this.$buefy.dialog.prompt({
message: `What's your age?`,
inputAttrs: {
placeholder: "Enter age"
}
});
console.log("closed");
}
}
};
</script>

Now we see that the 'closed' string is logged after we closed the prompt.

Conclusion

We can add confirm dialogs with Buefy and configure it in various ways.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store