Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Temporary Drawer
We can create a temporary drawer that sits above the app and use an overlay to darken the background.
Clicking outside the drawer will cause it to close.
For example, we can write:
<template>
<v-row>
<v-col cols="12">
<v-sheet height="400" class="overflow-hidden" style="position: relative;">
<v-container class="fill-height">
<v-row align="center" justify="center">
<v-btn color="pink" dark @click.stop="drawer = !drawer">Toggle</v-btn>
</v-row>
</v-container>
<v-navigation-drawer v-model="drawer" absolute temporary>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Smith</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in items" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-sheet>
</v-col>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
drawer: null,
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
We have the v-navigation-drawer component to add the drawer that opens when we click on the Toggle button.
The Toggle button is created with a v-btn component with the click listener.
We just toggle the drawer variable between true and false to toggle the menu.
The drawer state is used by the v-navigation-drawer ‘s v-model directive to control the opening and closing of the drawer.
The drawer items are in the v-list-item components.
Right Positioned Menu
We can position the menu on the right side of the screen.
For example, we can write:
<template>
<v-row>
<v-col cols="12">
<v-card height="350px">
<v-navigation-drawer absolute permanent right>
<template v-slot:prepend>
<v-list-item two-line>
<v-list-item-avatar>
<img src="https://randomuser.me/api/portraits/women/81.jpg" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>Jane Smith</v-list-item-title>
<v-list-item-subtitle>Logged In</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in items" :key="item.title">
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
</v-col>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
drawer: null,
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
to place it on the right with the right prop.
Conclusion
We add the temporary drawer and place it on the left or right side of the screen with Vuetify.
