How To Easily Customize Vue.js Custom Tab?

If you want to know how to easily customize the Vue.js custom tab? please read this article! There is the Vue.js custom tab which is can be easily customized without any NPM plugin and jQuery.

Step 1: Components

<template>
    <div class="tablist">
        <div class="container">
            <div class="tabs">
                <ul class="tabs__header">
                    <li
                        class="tabs__header-item"
                        v-for="tab in tabs"
                        v-on:click="selectTab (tab.id)"
                        v-bind:class="{ 'active': activeTab == tab.id }"
                        :key="tab.id"
                    >
                        {{tab.name}}
                    </li>
                </ul>
            </div>
            <div class="tabs__container">
                <ul
                    class="tabs__list"
                    ref='tabsList'
                >
                    <li
                        class="tabs__list-tab"
                        v-for="tab in tabs"
                        v-bind:class="{ 'active': activeTab == tab.id }"
                        :key="tab.id"
                    >
                        <p>{{tab.content}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

Step 1: JS

<script>
export default {
    name: 'Tab',
    data () {
        return {
            activeTab: 1,
            offsetRight: 0,
           
            tabs: [
                {
                    id: 1,
                    name: 'Tab One',
                    content: 'Company dolor sit amet consetetur diisci velit sed quis Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore meniam'
                },
                {
                    id: 2,
                    name: 'Tab Two',
                    content: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less'
                },
                {
                    id: 3,
                    name: 'Tab Three',
                    content: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look'
                }
            ]
        }
    },
    methods: {
        selectTab (id) {
            let tabsList = this.$refs.tabsList
            this.activeTab = id
            this.offsetRight = tabsList.clientWidth * (id - 1)
            tabsList.style.right = this.offsetRight + 'px'
        }
    },
    mounted () {
        let tabsList = this.$refs.tabsList
        tabsList.style.right = this.offsetRight + 'px'
    },
    computed: {
        products(){
            return this.$store.state.products.all.filter(item => {
                return item.productsType === 'left-sidebar'
            })
        }
    }
}
</script>

Step 1: CSS

<style lang="scss">
.tablist {
    background-color: #10c317;
    padding: 30px 30px 30px;
    margin-bottom: 20px;
    .container {
        max-width: 1000px;
        margin: auto;
        .tabs {
            .tabs__header {
                margin-bottom: 30px;
                color: #66bd6c;
                border-radius: 4px;
                cursor: pointer;
                width: 100%;
                padding: 0;
                list-style: none;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
 
                .tabs__header-item {
                    margin-right: 8px;
                    color: #ffffff;
                    background-color: #3ae283;
                    font-weight: 500;
                    text-transform: uppercase;
                    padding: 10px 18px 10px;
                    border-radius: 4px;
 
                    &.active {
                        background: #ffffff;
                        color: #121682;
                    }
                    i {
                        display: inline-block;
                        position: relative;
                        top: 4px;
                        font-size: 20px;
                        margin-right: 3px;
                    }
 
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
        .tabs__container {
            overflow: hidden;
            text-align: center;
            .tabs__list {
                list-style: none;
                margin: 0;
                padding: 0;
                position: relative;
                display: flex;
                flex-direction: row;
                transition: all 0.3s linear;
                .tabs__list-tab {
                    width: 100%;
                    min-width: 100%;
                    transition: opacity .5s ease;
                    color: #fff;
                    p {
                        margin-bottom: 0;
                        color: #ffffff;
                        font-size: 18px;
                        max-width: 500px;
                        margin: auto;
                    }
                }
            }
            .active {
                opacity: 1;
            }
        }
    }
}
</style>

That’s all. If you have any queries, then let me know in the comment section.