Buefy — Message Box

Photo by Simon Berger 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.

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"…