Vue 3

How to Build a Tab Component with Vue.js 3?

Spread the love

Sometimes, we may want to display things in tabs.

In this article, we’ll look at how to build a tab component with Vue 3.

Build a Tab Component with Vue.js 3

We can build a tab component easily with Vue 3’s dynamic component feature.

To use it, we can use the keep-alive and component components.

For instance, we can write:

  <button @click="currentTabComponent = 'Tab1'">tab 1</button>
  <button @click="currentTabComponent = 'Tab2'">tab 2</button>
  <button @click="currentTabComponent = 'Tab3'">tab 3</button>
    <component :is="currentTabComponent"></component>

import Tab1 from "./components/Tab1.vue";
import Tab2 from "./components/Tab2.vue";
import Tab3 from "./components/Tab3.vue";

export default {
  name: "App",
  components: {
  data() {
    return {
      currentTabComponent: "Tab1",


  <div>tab 1</div>


  <div>tab 2</div>


  <div>tab 3</div>

In App.vue , we have 3 buttons that sets the currentTab component value to the tag name for the component to show.

Then we have the keep-alive component to prevent unmounting of the dynamic components.

The component component lets us set which component to display dynamically.

The is prop takes a string with the tag name of the component to display.

Next, we register the components in the compoennts property.

Then in data we return the currentTabComponent set to 'Tab1' , which is the name of the component tag for the component we want to display initially.

Then in Tab1.vue , Tab2.vue and Tab3.vue , we render the tab contents.

Now when we click on each button, we should see different content displayed below it.


We can add tabs easily into a Vue 3 app with the keep-alive and component components.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *