Image for post
Image for post
Photo by Paul Gilmore 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.

Modal

Buefy comes with a modal component.

We can use the b-modal component to add it.

For example, we can write:

<template>
<div id="app">
<button class="button is-primary is-medium" @click="isActive = true">Launch modal</button>
<b-modal v-model="isActive">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
</b-modal>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>

We put a card inside the b-modal to show its content.

We can call the close method to close the modal.

For example, we can write:

<template>
<div id="app">
<button class="button is-primary is-medium" @click="isActive = true">Launch modal</button>
<b-modal v-model="isActive">
<template #default="props">
<button @click="props.close">close</button>
</template>
</b-modal>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>

to add the Close button that calls props.close to close the modal.

We can open a modal programmatically with the this.$vuefy.modal.open method:

Login.vue

<template>
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">Login</p>
<button type="button" class="delete" @click="$emit('close')"/>
</header>
<section class="modal-card-body">
<b-field label="Email">
<b-input type="email" :value="email" placeholder="Your email" required></b-input>
</b-field>
<b-field label="Password">
<b-input type="password" required></b-input>
</b-field>
</section>
<footer class="modal-card-foot">
<button class="button" type="button" @click="$emit('close')">Close</button>
<button class="button is-primary">Login</button>
</footer>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
email: "",
password: ""
};
}
};
</script>

App.vue

<template>
<div id="app">
<button class="button is-primary is-medium" @click="open">Launch modal</button>
<b-modal>
<template #default="props">
<button @click="props.close">close</button>
</template>
</b-modal>
</div>
</template>
<script>
import Login from "@/components/Login.vue";
export default {
name: "App",
data() {
return {};
},
methods: {
open() {
this.$buefy.modal.open({
parent: this,
component: Login,
hasModalCard: true,
customClass: "custom-class",
trapFocus: true
});
}
}
};
</script>

We add the Login.vue component with a login form.

Login.vue emits the close event to close the modal when we click the close button or the footer buttons.

And we use that with the this.$buefy.modal.open method to show the Login component in the modal.

parent has the parent component, which is set to the current component.

We can add the full-screen prop to make the modal fullscreen:

<template>
<div id="app">
<b-modal full-screen v-model="isActive">
<Login/>
</b-modal>
</div>
</template>
<script>
import Login from "@/components/Login.vue";
export default {
name: "App",
data() {
return {
isActive: true
};
},
methods: {},
components: {
Login
}
};
</script>

Conclusion

We can add modals with Buefy’s b-modal component.

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