Vue3 TabView

Vue3 TabView is a container component to group content with tabs. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';

Getting Started

Tabview element consists of one or more TabPanel elements. Header of the tab is defined using header attribute.

<TabView>
    <TabPanel header="Header I">
        Content I
    </TabPanel>
    <TabPanel header="Header II">
        Content II
    </TabPanel>
    <TabPanel header="Header III">
        Content III
    </TabPanel>
</TabView>

Active

Visibility of the content is specified with the activeIndex property that supports one or two-way binding.

<TabView :activeIndex="activeIndex">
    <TabPanel header="Header I">
        Content I
    </TabPanel>
    <TabPanel header="Header II">
        Content II
    </TabPanel>
    <TabPanel header="Header III">
        Content III
    </TabPanel>
</TabView>

Two-way binding requires v-model.

<TabView v-model:activeIndex="activeIndex">
    <TabPanel header="Header I">
        Content I
    </TabPanel>
    <TabPanel header="Header II">
        Content II
    </TabPanel>
    <TabPanel header="Header III"">
        Content III
    </TabPanel>
</TabView>

Disabled

A tab can be disabled to prevent the content to be displayed by setting the disabled property on a panel.

<TabView>
    <TabPanel header="Header I">
        Content I
    </TabPanel>
    <TabPanel header="Header II">
        Content II
    </TabPanel>
    <TabPanel header="Header III" :disabled="true">
        Content III
    </TabPanel>
</TabView>

Header Template

Custom content for the title section of a panel is defined using the header template.

<TabView>
    <TabPanel>
        <template #header>
            <i class="pi pi-calendar"></i>
            <span>Header I</span>
        </template>
        Content I
    </TabPanel>
    <TabPanel>
        <template #header>
            <span>Header II</span>
            <i class="pi pi-user"></i>
        </template>
        Content II
    </TabPanel>
</TabView>

Programmatic Control

Tabs can be controlled programmatically using activeIndex property.

<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
<Button @click="active = 1" class="p-button-text" label="Activate 2nd" />
<Button @click="active = 2" class="p-button-text" label="Activate 3rd" />

<TabView v-model:activeIndex="active">
    <TabPanel header="Header I">
        Content I
    </TabPanel>
    <TabPanel header="Header II">
        Content II
    </TabPanel>
    <TabPanel header="Header III">
       Content III
    </TabPanel>
</TabView>

export default {
    data() {
        return {
            active: 0
        }
    }
}

Dynamic Tabs

Tabs can be generated dynamically using the standard v-for directive.

<TabView>
    <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
        <p>{{tab.content}}</p>
    </TabPanel>
</TabView>

export default {
    data() {
        return {
            tabs: [
                {title: 'Title 1', content: 'Content 1'},
                {title: 'Title 3', content: 'Content 2'},
                {title: 'Title 3', content: 'Content 3'}
            ]
        }
    }
}

Theming

TabView supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue TabView showcase for demos and documentation.