Category: Buefy

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.

Pagination

Buefy comes with a pagination component.

We can add it with the b-pagination component:

<template>
  <section>
    <b-pagination
      :total="total"
      v-model="current"
      :range-before="rangeBefore"
      :range-after="rangeAfter"
      :order="order"
      :size="size"
      :simple="isSimple"
      :rounded="isRounded"
      :per-page="perPage"
      :icon-prev="prevIcon"
      :icon-next="nextIcon"
      :iconPack="iconPack"
    ></b-pagination>
  </section>
</template>

<script>
export default {
  data() {
    return {
      total: 200,
      current: 10,
      perPage: 10,
      rangeBefore: 3,
      rangeAfter: 1,
      order: "",
      size: "",
      isSimple: false,
      isRounded: false,
      iconPack: "fa",
      prevIcon: "arrow-circle-left",
      nextIcon: "arrow-circle-right"
    };
  },
  methods: {}
};
</script>

iconPack has the icon pack to use.

'fa' is for Font Awesome.

prevIcon has the icon for going to the previous page.

nextIcon has the icon for going to the next page.

current has the current page.

total is the total number of pages.

perPage has the number of entries per page.

We add the icons by putting:

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

in the head tag of public/index.html .

Progress

We can add the progress bar with the b-progress component:

<template>
  <section>
    <b-progress></b-progress>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

Since the value prop isn’t set, it’ll animate indefinitely.

We can set the progress value with the value prop:

<template>
  <section>
    <b-progress :value="80" show-value format="percent"></b-progress>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

format has the text form to show in the bar.

The size prop changes the size:

<template>
  <section>
    <b-progress size="is-large"></b-progress>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

We can add other props to it:

<template>
  <section>
    <b-progress
      :type="type"
      :size="size"
      :max="50000"
      :value="indeterminate ? undefined : 40000"
      :show-value="showValue"
      :format="format"
      :precision="precision"
      :keep-trailing-zeroes="keepTrailingZeroes"
      :locale="locale"
    ></b-progress>
  </section>
</template>

<script>
export default {
  data() {
    return {
      indeterminate: false,
      type: null,
      size: "is-medium",
      showValue: true,
      format: "raw",
      precision: 2,
      keepTrailingZeroes: false,
      locale: undefined
    };
  },
  methods: {}
};
</script>

keepTrailingZeroes lets us set whether to show the railing zeroes in the value.

format is the number format.

indeterminate lets us set whether to animate forever.

size has the size.

showValue lets us set whether to show the value.

We can customize the value display by populating the default slot:

<template>
  <section>
    <b-progress :value="65" size="is-medium" show-value>65 / 100</b-progress>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

Conclusion

We an add pagination links and progress bars with Buefy.

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.

Navbar

Buefy comes with a navbar component.

We can add it with the b-navbar component:

<template>
  <div id="app">
    <b-navbar>
      <template slot="brand">
        <b-navbar-item tag="router-link" :to="{ path: '/' }">
          <img src="http://placekitten.com/100/100" alt="cat icon">
        </b-navbar-item>
      </template>
      <template slot="start">
        <b-navbar-item href="#">Home</b-navbar-item>
        <b-navbar-dropdown label="Info">
          <b-navbar-item href="#">About</b-navbar-item>
          <b-navbar-item href="#">Contact</b-navbar-item>
        </b-navbar-dropdown>
      </template>

      <template slot="end">
        <b-navbar-item tag="div">
          <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">Sign in</a>
          </div>
        </b-navbar-item>
      </template>
    </b-navbar>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We populate the brand slot with our logo.

start slot has the navbar items.

end slot has the buttons at the end of the navbar.

b-navbar-item has the navbar items.

Notification

We can show notifications with the b-notification component.

For example, we can write:

<template>
  <section>
    <button class="button block" @click="isActive = !isActive">Toggle</button>
    <b-notification
      v-model="isActive"
    >Lorem ipsum dolor sit amet</b-notification>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>

to add a toggle for the notification.

And we use v-model to bind to the open state of the notification.

We can set the type prop to set the background color of the notification:

<template>
  <section>
    <button class="button block" @click="isActive = !isActive">Toggle</button>
    <b-notification v-model="isActive" type="is-success">Lorem ipsum dolor sit amet</b-notification>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>

Also, we can add icons with the has-icon prop:

<template>
  <section>
    <button class="button block" @click="isActive = !isActive">Toggle</button>
    <b-notification
      v-model="isActive"
      has-icon
      icon="address-book"
      icon-pack="fa"
    >Lorem ipsum dolor sit amet</b-notification>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>

The icon prop has the icon name.

icon-pack has the icon library name.

'fa' is Font Awesome.

We can add the CSS by adding:

<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 of public/index.html .

We can set it to auto close with the auto-close and the duration props:

<template>
  <section>
    <button class="button block" @click="isActive = !isActive">Toggle</button>
    <b-notification v-model="isActive" auto-close :duration="2000">Lorem ipsum dolor sit amet</b-notification>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  }
};
</script>

We set the duration so that it auto closes after a given number of milliseconds.

Also, we can open it programmatically with the this.$vuefy.notification.open method:

<template>
  <section>
    <button class="button block" @click="open">Toggle</button>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  methods: {
    open() {
      this.$buefy.notification.open("lorem ipsum");
    }
  }
};
</script>

The notification displays on the top right corner.

We can also pass in an object:

<template>
  <section>
    <button class="button block" @click="open">Toggle</button>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  methods: {
    open() {
      this.$buefy.notification.open({
        duration: 5000,
        message: `lorem  <b>ipsum</b>`,
        position: "is-bottom-right",
        type: "is-danger",
        hasIcon: false
      });
    }
  }
};
</script>

message has the message.

position is the position.

type has the color style.

hasIcon lets us add an icon.

We can listen to the close event to do something when the notification closes:

<template>
  <section>
    <button class="button block" @click="open">Toggle</button>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  methods: {
    open() {
      const notif = this.$buefy.notification.open({
        duration: 5000,
        message: `lorem  <b>ipsum</b>`,
        position: "is-bottom-right",
        type: "is-danger",
        hasIcon: true
      });
      notif.$on("close", () => {
        this.$buefy.notification.open("Custom notification closed!");
      });
    }
  }
};
</script>

Conclusion

We can add navbars and notifications to our Vue app with Buefy.

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.

Modal

Buefy comes with a modal component.

We can use the b-modal component to add it.

For example, we can write:

<template>
  <div id="app">
    <button class="button is-primary is-medium" @click="isActive = true">Launch modal</button>
    <b-modal v-model="isActive">
      <div class="card">
        <div class="content">Lorem ipsum dolor sit amet</div>
      </div>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isActive: true
    };
  }
};
</script>

We put a card inside the b-modal to show its content.

We can call the close method to close the modal.

For example, we can write:

<template>
  <div id="app">
    <button class="button is-primary is-medium" @click="isActive = true">Launch modal</button>
    <b-modal v-model="isActive">
      <template #default="props">
        <button @click="props.close">close</button>
      </template>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isActive: true
    };
  }
};
</script>

to add the Close button that calls props.close to close the modal.

We can open a modal programmatically with the this.$vuefy.modal.open method:

Login.vue

<template>
  <div class="modal-card" style="width: auto">
    <header class="modal-card-head">
      <p class="modal-card-title">Login</p>
      <button type="button" class="delete" @click="$emit('close')"/>
    </header>
    <section class="modal-card-body">
      <b-field label="Email">
        <b-input type="email" :value="email" placeholder="Your email" required></b-input>
      </b-field>

<b-field label="Password">
        <b-input type="password" required></b-input>
      </b-field>
    </section>
    <footer class="modal-card-foot">
      <button class="button" type="button" @click="$emit('close')">Close</button>
      <button class="button is-primary">Login</button>
    </footer>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      email: "",
      password: ""
    };
  }
};
</script>

App.vue

<template>
  <div id="app">
    <button class="button is-primary is-medium" @click="open">Launch modal</button>
    <b-modal>
      <template #default="props">
        <button @click="props.close">close</button>
      </template>
    </b-modal>
  </div>
</template>

<script>
import Login from "@/components/Login.vue";
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    open() {
      this.$buefy.modal.open({
        parent: this,
        component: Login,
        hasModalCard: true,
        customClass: "custom-class",
        trapFocus: true
      });
    }
  }
};
</script>

We add the Login.vue component with a login form.

Login.vue emits the close event to close the modal when we click the close button or the footer buttons.

And we use that with the this.$buefy.modal.open method to show the Login component in the modal.

parent has the parent component, which is set to the current component.

We can add the full-screen prop to make the modal fullscreen:

<template>
  <div id="app">
    <b-modal full-screen v-model="isActive">
      <Login/>
    </b-modal>
  </div>
</template>

<script>
import Login from "@/components/Login.vue";
export default {
  name: "App",
  data() {
    return {
      isActive: true
    };
  },
  methods: {},
  components: {
    Login
  }
};
</script>

Conclusion

We can add modals with Buefy’s b-modal component.

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.

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.

Loading Indicator

We can add a loading indicator with the b-loading component:

<template>
  <div id="app">
    <b-loading is-full-page v-model="isLoading" :can-cancel="true"></b-loading>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isLoading: true
    };
  }
};
</script>

is-full-page sets the loading indicator to fill the page.

v-model binds to the isLoading state to let us control when it’s displayed.

can-cancel lets us close it with the Esc key with when it’s set to true .

We can open the loading indicator programmatically with the this.$buefy.loading.open method:

<template>
  <div id="app" ref="element">
    <button class="button is-primary is-medium" @click="open">load</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    open() {
      const loadingComponent = this.$buefy.loading.open({
        container: this.$refs.element.$el
      });
      setTimeout(() => loadingComponent.close(), 3 * 1000);
    }
  }
};
</script>

We call the method with the container property.

It sets the container for displaying the loading indicator.

We can set it to null to make it fill the screen.

The close method closes the loading indicator.

Also, we can create our own loading indicator by populating the default slot:

<template>
  <div id="app" ref="element">
    <b-loading is-full-page v-model="isLoading" :can-cancel="true">
      <b-icon pack="fa" icon="circle-o-notch" size="is-large" custom-class="fa-spin"></b-icon>
    </b-loading>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    isLoading: true
  }
};
</script>

We set the loading indicator to an icon with the b-icon component.

fa-spin makes Font Awesome icons spin.

Menu

Buefy comes with a menu component.

For example, we can write:

<template>
  <div id="app" ref="element">
    <b-menu>
      <b-menu-list label="Menu">
        <b-menu-item icon="address-book" icon-pack="fa" label="Info"></b-menu-item>
        <b-menu-item icon="settings" :active="isActive" expanded>
          <template slot="label" slot-scope="props">
            Administrator
            {{props.expanded ? '&#x2193;' : '&#x2191;'}}
          </template>
          <b-menu-item label="Users"></b-menu-item>
          <b-menu-item>
            <template slot="label">Devices
              <b-dropdown class="is-pulled-right" position="is-bottom-left">
                <b-icon slot="trigger"></b-icon>
                <b-dropdown-item>action 1</b-dropdown-item>
                <b-dropdown-item>action 2</b-dropdown-item>
              </b-dropdown>
            </template>
          </b-menu-item>
          <b-menu-item label="Payments" disabled></b-menu-item>
        </b-menu-item>
        <b-menu-item label="My Account">
          <b-menu-item label="Account data"></b-menu-item>
          <b-menu-item label="Addresses"></b-menu-item>
        </b-menu-item>
      </b-menu-list>
      <b-menu-list>
        <b-menu-item label="Expo" tag="router-link" target="_blank" to="/expo"></b-menu-item>
      </b-menu-list>
      <b-menu-list label="Actions">
        <b-menu-item label="Logout"></b-menu-item>
      </b-menu-list>
    </b-menu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { isActive: true };
  }
};
</script>

We add the b-menu to add the menu.

b-menu-item has the menu items.

b-dropdown adds dropdowns.

b-menu-list is a menu list to separate the menu into sections.

Conclusion

We can add a loading indicator and menu easily with Buefy.