UI components

The web page displays different components available in Buefy, such as a slider, a clickable button with a dropdown, and a breadcrumb.

Initializing Buefy is the same as initializing any other Vue plugin. It looks the same as what we went through in the previous section when we looked at Vuetify. The code will initialize Vue by using Buefy as stated in the Vue.use(Buefy) code:

import Vue from 'vue'
import App from './App.vue'
import Buefy from "buefy";
Vue.use(Buefy);
new Vue({
 render: h => h(App)
}).$mount('#app')

One of the components that we are using in our sample app is carousel, which displays a user interface like a slideshow. To create carousel, it is just a few lines of code, as shown in the following code snippet, using the <b-carousel> tag:

<!--example from https://buefy.org/documentation-->
<template>
 <section>
   <div class="container">
  ...