To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

We look at how to add tabs to our Vue apps.

Tabs

We can add tabbable panes into our app with the b-tabs component.

For example, we can write:

<template>
  <div id="app">
    <b-tabs content-class="mt-3">
      <b-tab title="First" active>
        <p>first tab</p>
      </b-tab>
      <b-tab title="Second">
        <p>second tab</p>
      </b-tab>
      <b-tab title="Disabled" disabled>
        <p>Bisabled tab</p>
      </b-tab>
    </b-tabs>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>

We added the b-tabs component which houses the b-tab components.

b-tab has the tab heading as set by the title .

We can click on a tab heading to go to a tab.

disabled means the tab is disabled.

We can’t go to a disabled tab.

#javascript #software-development #programming #web-development #technology