2FAuth/resources/js/components/SettingTabs.vue

<template>
    <div class="options-header has-background-black-ter">
        <div class="columns is-centered">
            <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-third-fullhd">
                <div class="tabs is-centered is-fullwidth">
                    <ul>
                        <li v-for="tab in tabs" :key="tab.view" :class="{ 'is-active': tab.view === activeTab }">
                            <router-link :id="tab.id" :to="{ name: tab.view }">{{ tab.name }}</router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'SettingTabs',

        data(){
            return {
                tabs: [
                	{
                		'name' : this.$t('settings.options'),
                        'view' : 'settings.options',
                        'id'   : 'lnkTabOptions'
                	},
                	{
                		'name' : this.$t('settings.account'),
                        'view' : 'settings.account',
                        'id'   : 'lnkTabAccount'
                	},
                	{
                		'name' : this.$t('settings.oauth'),
                        'view' : 'settings.oauth.tokens',
                        'id'   : 'lnkTabOAuth'
                	},
                	{
                		'name' : this.$t('settings.webauthn'),
                        'view' : 'settings.webauthn.devices',
                        'id'   : 'lnkTabWebauthn'
                	},
            	]
            }
        },

        props: {
            activeTab: {
                type: String,
                default: ''
            },
        },
    }

</script>