how to use sidebar in vue 3 vuetify 3

How to Use Sidebar in Vue 3 Vuetify 3

VueJS
04/09/23
Webvees

In this tutorial, we will create sidebar using vuetifyjs 3 in Vue.js 3 . We will see sidebar left and right side, Before we begin, you need to install and configure Vuetify 3 in Vue 3.

How to Install Vuetify 3 in Vue 3

1. Vuetify 3 create sidebar using v-card, v-layout, v-navigation-drawer, v-list, v-list-item component.

<template>
    <v-card>
        <v-layout>
            <v-navigation-drawer permanent location="left">
                <template v-slot:prepend>
                    <v-list-item lines="two" prepend-avatar="https://randomuser.me/api/portraits/women/81.jpg"
                        title="Jane Smith" subtitle="Logged in"></v-list-item>
                </template>

                <v-divider></v-divider>

                <v-list density="compact" nav>
                    <v-list-item prepend-icon="mdi-home-city" title="Home" value="home"></v-list-item>
                    <v-list-item prepend-icon="mdi-account" title="My Account" value="account"></v-list-item>
                    <v-list-item prepend-icon="mdi-store" title="Products" value="products"></v-list-item>
                    <v-list-item prepend-icon="mdi-cart" title="Orders" value="orders"></v-list-item>
                    <v-list-item prepend-icon="mdi-account-group-outline" title="Users" value="users"></v-list-item>
                </v-list>
            </v-navigation-drawer>
            <v-main style="height: 1200px"></v-main>
        </v-layout>
    </v-card>
</template>
vuetify 3 sidebar

vuetify 3 sidebar

2. Vuetify 3 vue 3 right side sidebar using location="right" props.

<template>
    <v-card>
        <v-layout>
            <v-navigation-drawer permanent location="right">
                <template v-slot:prepend>
                    <v-list-item lines="two" prepend-avatar="https://randomuser.me/api/portraits/women/81.jpg"
                        title="Jane Smith" subtitle="Logged in"></v-list-item>
                </template>

                <v-divider></v-divider>

                <v-list density="compact" nav>
                    <v-list-item prepend-icon="mdi-home-city" title="Home" value="home"></v-list-item>
                    <v-list-item prepend-icon="mdi-account" title="My Account" value="account"></v-list-item>
                    <v-list-item prepend-icon="mdi-store" title="Products" value="products"></v-list-item>
                    <v-list-item prepend-icon="mdi-cart" title="Orders" value="orders"></v-list-item>
                    <v-list-item prepend-icon="mdi-account-group-outline" title="Users" value="users"></v-list-item>
                </v-list>
            </v-navigation-drawer>
            <v-main style="height: 1200px"></v-main>
        </v-layout>
    </v-card>
</template>
vuetify 3 right side sidebar

vuetify 3 right side sidebar

3. Vuetify 3 vue 3 sidebar with color.

<template>
    <v-card>
        <v-layout>
            <v-navigation-drawer class="bg-deep-purple" theme="dark" permanent location="left">
                <template v-slot:prepend>
                    <v-list-item lines="two" prepend-avatar="https://randomuser.me/api/portraits/women/81.jpg"
                        title="Jane Smith" subtitle="Logged in"></v-list-item>
                </template>

                <v-divider></v-divider>

                <v-list density="compact" nav>
                    <v-list-item prepend-icon="mdi-home-city" title="Home" value="home"></v-list-item>
                    <v-list-item prepend-icon="mdi-account" title="My Account" value="account"></v-list-item>
                    <v-list-item prepend-icon="mdi-store" title="Products" value="products"></v-list-item>
                    <v-list-item prepend-icon="mdi-cart" title="Orders" value="orders"></v-list-item>
                    <v-list-item prepend-icon="mdi-account-group-outline" title="Users" value="users"></v-list-item>
                </v-list>
            </v-navigation-drawer>
            <v-main style="height: 1200px"></v-main>
        </v-layout>
    </v-card>
</template>
vue 3 vuetify 3 sidebar

vue 3 vuetify 3 sidebar