Bulma Based UI Components for Vue.js

Hi. In this post I’ll talk about Buefy. If you are using Vue.js on your projects you’ll love Buefy. Because it is based on the Bulma Framework. Bulma is an open source CSS framework based on Flexbox. I can say Tesla using Bulma on their some projects. If you’re bored with Bootstrap, it might be a good choice for you. There are many modern UI components in Buefy.

Bulma Based UI Components for Vue.js

Bulma Based UI Components for Vue.js

Before you start, you need to install Vue.js as you know. After that you can install Buefy with below command.

That’s all. We’ve install Buefy now. Now we’ll do some configuration on our main.js file to use Buefy. Firstly we’ll import Buefy as component and its css file

We’ll pass Buefy component to vue’s use method. For example our main.js file should be like this:

Ok we’ve done everything to use Buefy. Let’s start with a simple example. I’ll create basic navbar component with Buefy.

And its script should be like this:

It will look like this when you run your project:

Bulma Based UI Components for Vue.js

Now we’ll change default component’s template and it’s script section. For example we have a component named Home.vue. It’s template should be like this:

And its script should be like this:

In this example we are using google books api. Now, our home page should be like this:

Bulma Based UI Components for Vue.js

 

Let’s Create Login Modal

We’ll create login modal. Buefy has the JavaScript API to use modal. In this example we’ll create a modal component named LoginModal.

And its script will be like this:

Our modal will be like this:

Bulma Based UI Components for Vue.js

Nice. We’ve created basic bookreads portal alternative to goodreads. But Buefy’s has more component. For example its table component alternative to jQuery DataTable.

I published the bookreads project on GitLab. You can use directly or you can fork it to contribute it.

https://gitlab.com/aligoren/bookreads

In this post we talked about Buefy and Vue. You can create great projects with Buefy and Vue. If you have any questions please ask

Thanks for reading.