Vue Bulma Laravel Tabs

parentVue.vue

<template>
    <div>
        <Tabs :tabsInitial="tabData"></Tabs>
    
         <div class="contactOverview" v-if="selectedContentTab === 'Oversikt'">
             <p>Working</p>
         </div>

    </div>
</template>

<script>
    import Tabs from './utilities/Tabs.vue';
    export default {
        components: { Tabs },
        data () {
            return {
                tabData: [
                    {id: 0, name: 'Oversikt',},
                    {id: 1, name: 'Looger'},
                    {id: 2, name: 'Filer'},
                    {id: 3, name: 'Timer'},
                ],
                selectedContentTab: 'Oversikt'
            }
        },
        mounted() {
            this.$eventHub.$on('showTabContentIndex', this.showTabContentIndex)
        },
        methods: {
            showTabContentIndex (tab) {
                this.selectedContentTab = tab.name
            }
        }
    }
</script>

Tabs.vue

<template>
    <div>
        <div class="tabs">
            <ul>
                <li v-for="tab in tabs" :key="tab.id" :class="{ 'is-active': isActivated(tab) }"><a @click="selectTab(tab)">{{ tab.name }}</a></li>
            </ul>
        </div>
    </div>

</template>

<script>
    export default {
        props: {
          tabsInitial: {
              type: Array,
          }
        },
        data () {
            return {
                tabs: this.tabsInitial,
                selectedTabIndex: 0,
            }
        },
        methods: {
            selectTab(tab) {
                this.selectedTabIndex = tab.id;
                this.$eventHub.$emit('showTabContentIndex', tab)
            },

            isActivated(tab) {
                return tab.id === this.selectedTabIndex;
            }
        }
    }
</script>

Instruction how to use the Vue Bulma Laravel tab component:

disclaminer: work-in-progress

The Bulma CSS framework comes without javascript, and I made this reusable component to add active state to
the tabs and for toggling tab-content. You could use the eventbus to initiate a call to a API to load data when switching tabs.

Add a global eventbus in your app.js file:
Vue.prototype.$eventHub = new Vue();

Add your parent-component to you app.js file:
Vue.component('ShowContact', require('./components/ShowContact.vue'));