before recipes:update

assets/js/components/tabs/TabContent.vue

@@ -0,0 +1,25 @@
+<template lang="html">
+	<div v-show="title == selectedTitle">
+		<slot/>
+	</div>
+</template>
+
+<script>
+import { inject } from 'vue'
+
+export default {
+	props: {
+		title: {
+			type: String,
+			required: true
+		}
+	},
+	setup() {
+		const selectedTitle = inject('selectedTitle')
+
+		return {
+			selectedTitle
+		}
+	}
+}
+</script>

assets/js/components/tabs/TabWrapper.vue

@@ -0,0 +1,70 @@
+<template lang="html">
+	<div class="tabs">
+		<ul class="tabs-header">
+			<li
+				v-for="title in tabTitles"
+				:key="title"
+				:class="{ selected: title === selectedTitle }"
+				@click="selectedTitle = 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
+		}
+	},
+	data: () => ({
+		selectedIndex: 0,
+		tabs: []
+	}),
+	created() {
+	},
+}
+</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>