Vue.js Component for Bulma Tabs

Reusable Vue.js component for Bulma tabs. We extend Bulma tabs by adding a pane for each tab. Click the following tabs to see the demo.

The following is the source code for above demo.


<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="" integrity="sha256-zKA1Bf41O96+gJSlkn/Bh2HATW/OhwkApPlYTp3B5O8=" crossorigin="anonymous" />

<div id="vueapp">

<bulma-tab-panel :tabpanes="mytabpanes"></bulma-tab-panel>


<!-- you can put the following line at the end of html body -->
<script src=""></script>

We define a Vue.js component whose name is bulma-tab-panel, and we pass data of tabs to it.


'use strict';

Vue.component("bulma-tab-panel", {
    template: `
  <!-- Nav tabs -->
  <div class="tabs">
      <li v-for="(tabpane, index) in tabpanes" v-bind:class="{ 'is-active': tabsel == index }" @click="tabsel = index"><a>{{tabpane.nav}}</a></li>
  <!-- Tab panes -->
  <div class="content">
    <div v-for="(tabpane, index) in tabpanes" v-show="tabsel == index">{{tabpane.pane}}</div>
    props: ["tabpanes"],
    data: function() {
      return {
        tabsel: 0

var app = new Vue({
  el: '#vueapp',
  data: {
    mytabpanes: [
      {nav: "tab1", pane:"tab1 content"},
      {nav: "tab2", pane:"tab2 content"},
      {nav: "tab3", pane:"tab3 content"},
      {nav: "tab4", pane:"tab4 content"},

The data passed to the component is an array consisting of nav and content of the tabs. we use v-for to create the actual HTML of the tabs in the component.

We use the variable tabsel to indicate current selected tab. When users click on the tab, update tabsel according to the tab index and hence show the selected tab pane according to the value of tabsel.

The is-active class of tabs will also be updated according to tabsel. Set tabsel to 0 in the initialization phase to make first tab as default tab.

You can also make the same tabs without using component, see [4].

Tested on:

  • Bulma 0.7.1
  • Vue.js 2.5.17
  • Chromium 69.0.3497.81 on Ubuntu 18.04 (64-bit)


[1]Tabs | Bulma: a modern CSS framework based on Flexbox
[2]揭密 Vue 的双向绑定 - 边城客栈 - 开源中国
[3]Components Basics — Vue.js
[4][Vue.js] Bulma Tabs
[5]List Rendering — Vue.js