DEV Community

loading...
Cover image for Vue3 Sidebar

Vue3 Sidebar

primetek profile image PrimeTek ・1 min read

Vue3 Sidebar is a panel component displayed as an overlay at the edges of the screen.
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 Sidebar from 'primevue/sidebar';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Sidebar is used as a container and visibility is controlled with the visible property that requires a v-model two-way binding.

<Sidebar v-model:visible="visibleLeft">
    Content
</Sidebar>

<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
Enter fullscreen mode Exit fullscreen mode

Position

Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the position property.

<Sidebar v-model:visible="visibleRight" position="right">
    Content
</Sidebar>
Enter fullscreen mode Exit fullscreen mode

Size

Sidebar size can be changed using a fixed value or using one of the three predefined ones.

<Sidebar v-model:visible="visibleLeft" class="p-sidebar-sm"></Sidebar>
<Sidebar v-model:visible="visibleLeft" class="p-sidebar-md"></Sidebar>
<Sidebar v-model:visible="visibleLeft" class="p-sidebar-lg"></Sidebar>
Enter fullscreen mode Exit fullscreen mode

Full Screen

Full screen mode allows the sidebar to cover whole screen.

<Sidebar v-model:visible="visibleFull" position="full">
    Content
</Sidebar>
Enter fullscreen mode Exit fullscreen mode

Theming

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

Resources

Visit the PrimeVue Sidebar showcase for demos and documentation.

Discussion (0)

pic
Editor guide