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:
`<template>
<button @click="currentTabComponent = 'Tab1'">tab 1</button>
<button @click="currentTabComponent = 'Tab2'">tab 2</button>
<button @click="currentTabComponent = 'Tab3'">tab 3</button>
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>
</template>
<script>
import Tab1 from "./components/Tab1.vue";
import Tab2 from "./components/Tab2.vue";
import Tab3 from "./components/Tab3.vue";
export default {
name: "App",
components: {
Tab1,
Tab2,
Tab3,
},
data() {
return {
currentTabComponent: "Tab1",
};
},
};
</script>
components/Tab1.vue
<template>
<div>tab 1</div>
</template>
components/Tab2.vue
<template>
<div>tab 2</div>
</template>
components/Tab3.vue
<template>
<div>tab 3</div>
</template>
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.
Conclusion
We can add tabs easily into a Vue 3 app with the keep-alive and component components.
