In this tutorial, we’ll build a simple working tab system in Vue 3 with Tailwind CSS. Additionally, we’ll create tabs using the Vue.js 3 Composition API.
Example 1
Simple Vue.js 3 tab system with Tailwind CSS.
Vue
<template>
<div>
<h2 class="font-bold text-blue-900 text-1xl">Vue Js Simple Tabs</h2>
<div class="container mx-auto">
<ul class="flex justify-center space-x-2 text-white">
<li>
<button @click="activeTabOne" class="inline-block px-4 py-2 bg-purple-500">
Tab 1
</button>
</li>
<li>
<button @click="activeTabTwo" class="inline-block px-4 py-2 bg-purple-500">
Tab 2
</button>
</li>
<li>
<button @click="activeTabThree" class="inline-block px-4 py-2 bg-purple-500">
Tab 3
</button>
</li>
</ul>
<div class="p-3 mt-6 bg-white border">
<div v-show="tab === 1">
Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</div>
<div v-show="tab === 2">
Tab 2 Content show Lorem ipsum dolor sit amet consectetur, adipisicing
elit.
</div>
<div v-show="tab === 3">
Tab 3 Content show Lorem ipsum dolor sit amet consectetur adipisicing
elit. Amet,
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tab: 1,
};
},
methods: {
activeTabOne() {
this.tab = 1;
},
activeTabTwo() {
this.tab = 2;
},
activeTabThree() {
this.tab = 3;
},
},
};
</script>Example 2
Vue js 3 tab with tailwind css.
Vue
<template>
<div>
<h2 class="font-bold text-blue-900 text-1xl">Vue Js tabs</h2>
<div class="container mx-auto">
<ul class="flex justify-center space-x-2 text-white">
<li>
<button @click="currentTab(1)" class="inline-block px-4 py-2 bg-blue-500">
Tab 1
</button>
</li>
<li>
<button @click="currentTab(2)" class="inline-block px-4 py-2 bg-blue-500">
Tab 2
</button>
</li>
<li>
<button @click="currentTab(3)" class="inline-block px-4 py-2 bg-blue-500">
Tab 3
</button>
</li>
</ul>
<div class="p-3 mt-6 bg-white border">
<div v-if="tab === 1">
Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quas sunt ducimus numquam! Quam, perspiciatis!
</div>
<div v-if="tab === 2">
Tab 2 Content show Lorem ipsum dolor sit amet consectetur, adipisicing
elit. aliquam rem. Exercitationem corporis eius voluptatibus.
</div>
<div v-if="tab === 3">
Tab 3 Content show Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tab: 1,
};
},
methods: {
currentTab: function (tabNumber) {
this.tab = tabNumber;
},
},
};
</script>
Example 3
Tailwind CSS Tab using vue js 3 composition api.
Vue
<template>
<div>
<h2 class="mb-4 font-bold text-center text-blue-900 text-1xl">Tailwind CSS Tab using vue js 3 composition api.
</h2>
<div class="container mx-auto">
<ul class="flex justify-center space-x-2 text-white ">
<li>
<button @click="currentTab(1)" class="inline-block px-4 py-2 bg-blue-500 focus:outline-none">
Tab 1
</button>
</li>
<li>
<button @click="currentTab(2)" class="inline-block px-4 py-2 bg-blue-500 focus:outline-none">
Tab 2
</button>
</li>
<li>
<button @click="currentTab(3)" class="inline-block px-4 py-2 bg-blue-500 focus:outline-none">
Tab 3
</button>
</li>
</ul>
<div class="p-3 mt-6 text-center bg-white">
<div v-if="tab === 1">
Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quas sunt ducimus numquam! Quam, perspiciatis!
</div>
<div v-if="tab === 2">
Tab 2 Content show Lorem ipsum dolor sit amet consectetur, adipisicing
elit. aliquam rem. Exercitationem corporis eius voluptatibus.
</div>
<div v-if="tab === 3">
Tab 3 Content show Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const tab = ref(1);
const currentTab = (tabNumber) => (tab.value = tabNumber);
return { tab, currentTab };
},
};
</script>
