Creating Tabs with Vue 2 and Tailwind css

https://dev.to/maxwelladapoe/creating-tabs-with-vue-2-and-tailwind-css-121d
So I was building an admin dashboard for hirehex using tailwind and needed to create some Tabs.
To be honest its rather simple to implement but requires some understanding of how components work in vue.js

I will be skipping the vue.js & tailwind project set up. But should you need it, you can check it out here
We will need 2 components for this:

Tab.vue & Tabs.vue
in Tab.vue:



<template>
<div v-show="isActive">
<slot></slot>
</div>
</template>

<script>
export default {
name: "Tab",
props: {
name: {
required: true,
type: [Number, String],
},
selected:{
default: false
}
},
data(){
return {
isActive:false
}
},
mounted(){
this.isActive = this.selected;
}
}
</script>



in Tabs.vue:



<template>
<div>
<div id="tab-links">
<ul class="flex space-x-2 ">
<li v-for="(tab, index) in tabs "
:key="index"
:class="{'border-b-2':tab.isActive}"
class="py-2 border-solid text-center w-40 cursor-pointer"
@click="selectTab(tab)">
{{tab.name}}
</li>
</ul>
<hr>
</div>

<div id="tab-details">
<slot></slot>
</div>

</div>

</template>

<script>
export default {
name: "Tabs",
data() {
return {
tabs: []
}
},
created() {
this.tabs = this.$children;
},
mounted() {
//check if a tab has been selected by default
let hasTabBeenSelected = this.tabs.findIndex(child=> child.selected ===true)
//set the default to the first one
if (hasTabBeenSelected === -1){
this.tabs[0].isActive=true;
}
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = tab.name === selectedTab.name;
})
}
}
}
</script>

<style scoped>
</style>


With these in place you should have a working tab component.

Feel free to modify this in anyway to meet your use case.

Thanks.

JS Operators You Need To Start Using

https://javascript.plainenglish.io/js-operators-you-need-to-start-using-7ebdfd4d2698?source=rss------vuejs-5
Write better and clean code. There are more to JS than =, ==, && and ||Continue reading on JavaScript in Plain English »

Angular vs React vs Vue

https://medium.com/cits-tech/angular-vs-react-vs-vue-e1783e23a4ae?source=rss------vuejs-5
Medium’daki ilk yazımla karşınızdayım. İki bölümden oluşacak bu serinin ilk bölümünde Angular, React ve Vue’yu popülerlik, community…Continue reading on CITS Tech »

Vue JS — Türkçe kaynak

https://medium.com/kocsistem/vue-js-t%C3%BCrk%C3%A7e-kaynak-cbb1d0d73490?source=rss------vuejs-5
Sol şeridi boşaltın Vue Js geçiyor.Continue reading on KoçSistem »

Create a beautiful Todo app in Vuetify: Toolbars

https://codingbeauty.medium.com/create-a-beautiful-todo-app-in-vuetify-toolbars-5e321f43c548?source=rss------vuejs-5
Welcome to this brand new tutorial series, where we’re going to be creating a Todo app all the way from start to finish using the popular…Continue reading on Medium »

An Example of Benchmarking Core Web Vitals of React and Vue Frontends

https://javascript.plainenglish.io/an-example-of-benchmarking-core-web-vitals-of-react-and-vue-frontends-58e3b4a9c94a?source=rss------vuejs-5
Skilled people like Sunil Sandhu are better than me at developing applications using several frameworks.Continue reading on JavaScript in Plain English »

How To Add Google Analytics to Your Vue.js Web App

https://medium.com/@surbhitrao/how-to-add-google-analytics-to-your-vue-js-web-app-709c6e7c5872?source=rss------vuejs-5
Google Analytics is a free tracking tool to analyze your website visitors — this is also possible in Vue.js Apps. Here you can find out…Continue reading on Medium »

Angular vs React vs Vue Part 2

https://medium.com/cits-tech/angular-vs-react-vs-vue-part-2-6abe6ba29c25?source=rss------vuejs-5
Angular, React ve Vue üzerinden karşılaştırmalar yaptığımız serinin ikinci kısmından merhaba. Bu kısımda development, architecture ve…Continue reading on CITS Tech »

Uni Локализация на веб компонентах и с абсолютной кастомизацией. Работает везде (

https://habr.com/ru/post/598319/?utm_campaign=598319&utm_source=habrahabr&utm_medium=rss
Я всегда мечтал о функциональности, которую можно было бы использовать на любом web проекте. Еще я мечтал иметь максимально гибкое решение для абсолютной кастомизации под себя. Два года назад мы начали работать над воплощением этой смелой мечты в реальность. Первой такой функциональностью стала именно Uni Локализация. Читать далее

[Source Code]Vue3 — Utility Function In 5 Minutes

https://steven-chen.medium.com/source-code-vue3-utility-function-in-5-minutes-8d28ed7abdf8?source=rss------vuejs-5
impress interviewee by reading source codeContinue reading on Medium »

Mengenal Tentang VueJS

https://medium.com/@dimaseka83/mengenal-tentang-vuejs-ae57fa250c26?source=rss------vuejs-5
VueJS merupakan progressive framework javascript yang mengadopsi ekosistem yang bertahap dan bertingkat antar pustaka dan berfitur lengkap…Continue reading on Medium »

Vue.js Interview Challenge — #10 — Countdown Timer — Solution

https://medium.com/js-dojo/vue-js-interview-challenge-10-countdown-timer-solution-462b2e6383c2?source=rss------vuejs-5
Solution for Interview Challenge # 10Continue reading on Vue.js Developers »

Vue.js Interview Challenge — #10 — Countdown Timer

https://medium.com/js-dojo/vue-js-interview-challenge-10-countdown-timer-ecfdc09ddd25?source=rss------vuejs-5
Interview Challenge # 10Continue reading on Vue.js Developers »

Adventure / Gravel cycling blog: Bikes and Bacon

https://marekmis.medium.com/adventure-gravel-cycling-blog-bikes-and-bacon-e4a6e39a9470?source=rss------vuejs-5
I finally finished building and writing the first batch of content for my new blog called Bikes and Bacon. Check it out here…Continue reading on Medium »

Best VUE JS Training Course in Bangalore | AchieversIT

https://medium.com/@achieversittraininga/best-vue-js-training-course-in-bangalore-achieversit-5275bc6d1dc?source=rss------vuejs-5
OverviewContinue reading on Medium »

VueJS: How to Delete/Destroy a Component

https://paulxiong.medium.com/vuejs-how-to-delete-destroy-a-component-a1abebc9ce1c?source=rss------vuejs-5
The simplest way, just put “:key=var1”Continue reading on Medium »

Create a beautiful to-do list app in Vuetify: displaying the list of tasks (lists, margins…

https://codingbeauty.medium.com/create-a-beautiful-to-do-list-app-in-vuetify-displaying-the-list-of-tasks-lists-margins-cc0fde2ed2c1?source=rss------vuejs-5
Displaying the list of tasks with Vuetify listsContinue reading on Medium »

Filtering data in vue js

https://medium.com/@maltinimalmo/filtering-data-in-vue-js-f40d67cd7162?source=rss------vuejs-5
ComputedContinue reading on Medium »

VueJS dynamic components/classes for people in a hurry

https://richard-taujenis.medium.com/vuejs-dynamic-components-classes-for-people-in-a-hurry-1a86582e1d5e?source=rss------vuejs-5
VueJS same as other web frameworks have to be utilized to its fullest and that can not be done without using its dynamic features!Continue reading on Medium »

Guide to load images in web app

https://rahuulmiishra.medium.com/guide-to-lazy-loading-of-images-e304684214c3?source=rss------vuejs-5
Hello world 🌎Continue reading on Medium »

Vue js Benefits That Make Life Better

https://procoders.medium.com/vue-js-benefits-that-make-life-better-7102285ff878?source=rss------vuejs-5
Vue.js is a lightweight and powerful JavaScript library for building user interfaces. Vue is a progressive framework that allows you to…Continue reading on Medium »