Spookie/assets/js/components/tabs/TabWrapper.vue

<template lang="html">
	<div class="tabs">
		<ul class="tabs-header">
			<li
				v-for="title in tabTitles"
				:key="title"
				:class="{ selected: title === selectedTitle }"
				@click="handleClick(title)"
			>
				{{ title }}
			</li>
		</ul>
		<slot/>
	</div>
</template>

<script>
import { ref, provide } from 'vue'

export default {
	name: 'TabWrapper',
	setup(props, { slots }) {
		const tabTitles = ref(slots.default()
			.map((tab) => tab.props.title))
		const selectedTitle = ref(tabTitles.value[0])

		provide('selectedTitle', selectedTitle)
		return {
			selectedTitle,
			tabTitles
		}
	},
	methods: {
		handleClick(title) {
			this.selectedTitle = title
			this.$emit('tabActivated', title)
		}
	},
}
</script>

<style>
.tabs {
	width: auto;
	margin: 0 auto;
}

.tabs-header {
	margin-bottom: 10px;
	list-style: none;
	display: flex;
}

.tabs-header li {
	width: 140px;
	text-align: center;
	padding: 10px 20px;
	margin-right: 10px;
	background-color: #ddd;
	border-radius: 5px;
	color: black;
	cursor: pointer;
	transition: 0.4s all ease-out;
}

.tabs-header li.selected {
	background-color: #0984e3;
	color: white;
}
</style>