PronounsPage/components/TabsNav.vue

<template>
    <div>
        <ul :class="['nav', pills ? 'nav-pills' : 'nav-tabs', navclass]">
            <li v-for="tab in visibleTabs" class="nav-item">
                <a
                    :class="['nav-link', activeTab === tab ? 'active' : '']"
                    :aria-current="activeTab === tab ? 'page' : ''"
                    href="#"
                    @click.prevent="activeTab = tab"
                >
                    <slot :name="`${tab}-header`"></slot>
                </a>
            </li>
        </ul>
        <div class="card">
            <div v-for="tab in visibleTabs" :class="['card-body', activeTab === tab ? 'd-block-force' : 'd-none']">
                <h3 v-if="showheaders" class="h4 mb-3">
                    <slot :name="`${tab}-header`"></slot>
                </h3>
                <slot :name="tab"></slot>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue';

import useHash from '../composables/useHash.ts';

export default defineComponent({
    props: {
        tabs: { required: true },
        active: {},
        pills: { type: Boolean },
        showheaders: { type: Boolean },
        navclass: { default: 'nav-tabs' },
        anchors: { type: Boolean },
    },
    setup() {
        const { handleHash, setHash } = useHash();
        return {
            handleHash,
            setHash,
        };
    },
    data() {
        return {
            visibleTabs: this.tabs.filter((x) => x !== undefined),
            activeTab: this.active || this.tabs[0],
        };
    },
    watch: {
        activeTab() {
            if (!this.anchors) {
                return;
            }
            this.setHash('', this.activeTab);
        },
    },
    mounted() {
        if (!this.anchors) {
            return;
        }

        this.handleHash('', (hash) => {
            if (!this.visibleTabs.includes(hash)) {
                return;
            }
            this.activeTab = hash;
        }, false);
    },
});
</script>