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.
Message
We can add a message box with color with Buefy.
We can add it with the b-message component:
<template>
<div id="app">
<b-message title="Default" v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
isActive: true
}
}
};
</script>
title has the title.
v-model lets us control the open and close state.
The default slot has the content.
The color scheme can be changed with the type prop:
<template>
<div id="app">
<b-message type="is-success" title="Default" v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>
We can add an icon with the has-icon prop:
<template>
<div id="app">
<b-message
type="is-success"
has-icon
title="Default"
icon="address-book"
icon-pack="fa"
v-model="isActive"
>Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>
We add the icon , icon-pack , and has-icon props to show the icon.
icon-pack is the icon pack name.
'fa' is Font Awesome.
icon has the icon class name.
In public/index.html , we add:
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
to the head tag to make the Font Awesome icons available.
The title prop is optional, so we can remove it to show a message box without the header:
<template>
<div id="app">
<b-message v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>
The size prop changes the size:
<template>
<div id="app">
<b-message size="is-large" v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>
The auto-close prop makes it close automatically:
<template>
<div id="app">
<b-message auto-close v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>
The duration that it’s visible can be set with the duration prop:
<template>
<div id="app">
<b-message :duration="2000" auto-close v-model="isActive">Lorem ipsum dolor sit amet</b-message>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isActive: true
};
}
};
</script>
The number is in milliseconds.
Conclusion
We can add a message box with Buefy’s b-message component.
