Vue3 Splitter

Vue3 Splitter is utilized to separate and resize panels. 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 Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';

Getting Started

Splitter requires two SplitterPanel components to wrap.

<Splitter style="height: 300px">
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Multiple Panels

Any number of panels can be nested inside a Splitter.

<Splitter style="height: 300px">
    <SplitterPanel v-for="item of items" :key="item.key">
        {{item.content}}
    </SplitterPanel>    
</Splitter>

Layout

Default orientation is configured with the layout property and default is the "horizontal" whereas other alternative is the "vertical".

<Splitter style="height: 300px" layout="vertical">
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Initial Sizes

When no size is defined, panels are split 50/50, use the size property to give relative widths e.g. 20/80.

<Splitter style="height: 300px">
    <SplitterPanel :size="20" >
        Panel 1
    </SplitterPanel>
    <SplitterPanel  :size="80">
        Panel 2
    </SplitterPanel>
</Splitter>

Minimum Size

Minimum size defines the lowest boundary for the size of a panel.

<Splitter style="height: 300px">
    <SplitterPanel :size="20" :minSize="10">
        Panel 1
    </SplitterPanel>
    <SplitterPanel  :size="80" :minSize="20">
        Panel 2
    </SplitterPanel>
</Splitter>

Nested Panels

Splitters can be combined to create advanced layouts.

<Splitter style="height: 300px">
    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10">
        Panel 1
    </SplitterPanel>
    <SplitterPanel :size="80">
        <Splitter layout="vertical">
            <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15">
                Panel 2
            </SplitterPanel>
            <SplitterPanel :size="85">
                <Splitter>
                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20">
                        Panel 3
                    </SplitterPanel>
                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80">
                        Panel 4
                    </SplitterPanel>
                </Splitter>
            </SplitterPanel>
        </Splitter>
    </SplitterPanel>
</Splitter>

Stateful

Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes can be restored. Define a stateKey to enable this feature. Default location of the state is session storage and other option is the local storage which can be configured using the stateStorage property.

<Splitter stateKey="mykey" stateStorage="local">
    <SplitterPanel>
        Panel 1
    </SplitterPanel>
    <SplitterPanel>
        Panel 2
    </SplitterPanel>
</Splitter>

Theming

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

Resources

Visit the PrimeVue Splitter showcase for demos and documentation.