Vue3 Divider

Vue3 Divider is used to separate contents. 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 Divider from 'primevue/divider';

Getting Started

Divider has two orientations defined with the layout property, default is "horizontal" and the alternative is "vertical".

<div>Content 1</div>
<Divider />
<div>Content 2</div>

Border Style

Style of the border is configured with the type property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".

<div>Content 1</div>
<Divider type="dashed"/>
<div>Content 2</div>

Vertical Divider

Vertical divider is enabled by setting the layout property as "vertical".

<div class="p-d-flex">
    <div>Content 1</div>
    <Divider layout="vertical" />
    <div>Content 2</div>
    <Divider layout="vertical" />
    <div>Content 3</div>
</div>

Content

Any content placed inside is rendered within the boundaries of the divider. In addition, location of the content is configured with the align property. In horizontal layout, alignment options are "left", "center" and "right" whereas vertical mode supports "top", "center" and "bottom".

<div>Content 1</div>

<Divider align="left">
    <div class="p-d-inline-flex p-ai-center">
        <i class="pi pi-user p-mr-2"></i>
        <b>Icon</b>
    </div>
</Divider>

<div>Content 2</div>

<Divider align="center">
    <span class="p-tag">Badge</span>
</Divider>

<div>Content 3</div>

<Divider align="right">
    <Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
</Divider>

<div>Content 4</div>

Theming

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

Resources

Visit the PrimeVue Divider showcase for demos and documentation.