how to use dropdown on hover in vue 3 vuetify 3

How to Use Dropdown on Hover in Vue 3 Vuetify 3

VueJS
31/08/23
Webvees

In this tutorial, we will create dropdown on hover using vuetifyjs 3 in Vue.js 3 . We will see dropdown on hover, Before we begin, you need to install and configure Vuetify 3 in Vue 3.

How to Install Vuetify 3 in Vue 3


Vuetify 3 create dropdown on hover using v-menu, v-btn, v-list, v-list-item component.

<template>
    <div class="text-center">
        <v-menu open-on-hover>
            <template v-slot:activator="{ props }">
                <v-btn color="primary" v-bind="props">
                    Dropdown on Hover
                </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>
</template>
<script>
export default {
    data: () => ({
        items: [
            { title: 'Click Me' },
            { title: 'Click Me' },
            { title: 'Click Me' },
            { title: 'Click Me 2' },
        ],
    }),
}
</script>
dropdown on hover using vuetifyjs 3 in vue.js 3

dropdown on hover using vuetifyjs 3 in vue.js 3