DEV Community

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.


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


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">

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


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">
Enter fullscreen mode Exit fullscreen mode


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">
Enter fullscreen mode Exit fullscreen mode


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


Visit the PrimeVue Sidebar showcase for demos and documentation.

Discussion (0)

Editor guide