primevue-mirror/layouts/doc/DocSectionText.vue

<template>
    <component :is="headerTag" class="doc-section-label">
        {{ $attrs.label }}
        <NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink>
    </component>
    <div v-if="$attrs" class="doc-section-description">
        <slot></slot>
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
    methods: {
        onClick(event) {
            const parentElement = event.currentTarget.parentElement;
            const hash = window.location.hash.substring(1);

            hash === this.$attrs.id && event.preventDefault();

            setTimeout(() => {
                parentElement.scrollIntoView({ block: 'start' });
            }, 0);
        }
    },
    computed: {
        checkRouteName() {
            const path = this.$router.currentRoute.value.path;

            if (path.lastIndexOf('/') === path.length - 1) {
                return path.slice(0, -1);
            }

            return path;
        },
        headerTag() {
            if (this.$attrs.level === 3) {
                return 'h4';
            } else if (this.$attrs.level === 2) {
                return 'h3';
            }

            return 'h2';
        }
    }
};
</script>