Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Menus
We can add menus with the v-menu component.
For example, we can write:
<template>
<v-row>
<v-col cols="12">
<div class="text-center">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">Dropdown</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-col>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
We added a button to trigger the menu.
We pass all the attrs properties to the v-btn so that we can trigger the menu with it.
The on object has all the event listeners needed for triggering the menu.
Then we gave a v-list with the menu items.
Absolute Position
The position of the menu can be changed with the absolute prop.
For example, we can write:
<template>
<v-row class="d-flex" justify="center">
<v-menu v-model="showMenu" absolute offset-y style="max-width: 600px">
<template v-slot:activator="{ on, attrs }">
<v-card
class="portrait"
img="https://placekitten.com/600/600"
height="300"
width="600"
v-bind="attrs"
v-on="on"
></v-card>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
We add the absolute prop to the v-menu so that it’ll show where the mouse is clicked.
It’ll show when we left-click on the mouse.
Menu with Activator and Tooltip
We can add a menu with a activator and a tooltip.
For example, we can write:
<template>
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on: menu, attrs }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="{ ...tooltip, ...menu }"
>Dropdown with Tooltip</v-btn>
</template>
<span>tooltip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{ title: "Click Me" },
{ title: "Click Me 2" },
{ title: "Click Me 3" },
],
}),
};
</script>
We add the tooltip with the v-tooltip wrapped around our v-btn .
We pass the event listeners from the 2 template tags to our v-btn so that we can listen to button and tooltip events.
Then we add the v-list component to add the menu items.
Conclusion
We can add a menu to our app with the v-menu component.
