Getting Started with Buefy for Vue.js

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

In this article, we’ll look at how to install Buefy and use it.

Installation

We can install Buefy with NPM or Yarn.

To install it, we run:

npm install buefy

Then we add it to our Vue project’s main.js file:

import Vue from "vue";
import App from "./App.vue";
import Buefy from "buefy";
import "buefy/dist/buefy.css";

Vue.use(Buefy);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

We can also add the CSS and JS files in our HTML file directly with:

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

Constructor Options

Buefy takes a few options for to configure it.

For example, we can write:

import Vue from "vue";
import App from "./App.vue";
import Buefy from "buefy";
import "buefy/dist/buefy.css";

Vue.use(Buefy, {
  defaultIconPack: "fas",
  defaultContainerElement: "#content"
  // ...
});
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

defaultIconPack has the icons package name.

defaultIconcomponent has the container element to render the icon.

There are also many other properties listed at https://buefy.org/documentation/constructor-options.

Button

We can add a button with the b-button component.

For example, we can use it by writing:

<template>
  <section>
    <b-button @click="clickMe">Click Me</b-button>
  </section>
</template>

<script>
export default {
  methods: {
    clickMe() {
      this.$buefy.notification.open("Clicked!!");
    }
  }
};
</script>

We have the clickMe method to show a notification when the button is clicked.

Button Types and States

We can set the type prop to set the button color.

For example, we can write:

<template>
  <section>
    <b-button type="is-primary">Primary</b-button>
    <b-button type="is-primary is-light">Primary Light</b-button>
  </section>
</template>

<script>
export default {};
</script>

is-primary changed the color to purple.

And is-light makes it lighter.

Other type values include is-success , is-danger , is-info , and is-link .

We can also add other props to a button.

disabled disables the button.

loading displays a loading spinner in the button.

focused makes it focused.

rounded makes it more rounded.

selected makes the button selected.

active makes it display as an active button.

For example, we can write:

<template>
  <section>
    <b-button focused>Primary</b-button>
  </section>
</template>

<script>
export default {};
</script>

to make the button focused.

Button Sizes

We can change the button size with the size prop.

For example, we can write:

<template>
  <section>
    <div class="buttons">
      <b-button size="is-small">Small</b-button>
      <b-button>Default</b-button>
      <b-button size="is-medium">Medium</b-button>
      <b-button size="is-large">Large</b-button>
    </div>
  </section>
</template>

<script>
export default {};
</script>

to set the button to various sizes.

Button Icons

We can add button icons to our buttons.

For example, we can use Font Awesome 4.7.0 icons by adding the CSS file into the head tag of main.html :

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />

Then we can add our icon by writing:

<template>
  <section>
    <div class="buttons">
      <b-button size="is-small" icon-left="address-book">Add</b-button>
      <b-button icon-left="address-book">Add</b-button>
      <b-button size="is-medium" icon-left="address-book">Add</b-button>
      <b-button size="is-large" icon-left="address-book">Add</b-button>
    </div>
  </section>
</template>

<script>
export default {};
</script>

in main.js , we write:

import Vue from "vue";
import App from "./App.vue";
import Buefy from "buefy";
import "buefy/dist/buefy.css";

Vue.use(Buefy, {
  defaultIconPack: "fa"
});
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

We add the icon-left prop with the icon name without the fa prefix.

The defaultIconPack is set to 'fa' to set the prefix.

Conclusion

Buefy is a useful UI library for Vue. We can add buttons easily with it.