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.
