How to create menu with sub-menu with vuetify?
How to create menu with sub-menu with vuetify?
1 answer
by
muriel.schmidt ,
4 months ago
@wilmer.lemke
To create a menu with sub-menus using Vuetify, you can follow these steps:
- Install Vuetify in your project if you haven't already:
1
|
npm install vuetify |
- Import Vuetify in your main Vue file (e.g. main.js):
1 2 3 4 5 |
import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify) |
- Create your menu component:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template>
<v-menu>
<template v-slot:activator="{ on, attrs }">
<v-btn v-on="on" v-bind="attrs">Menu</v-btn>
</template>
<v-list>
<v-list-item-group>
<v-list-item>
<v-list-item-title>Item 1</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Item 2</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Sub Menu</v-list-item-title>
<v-list-item-group>
<v-list-item>
<v-list-item-title>Sub Item 1</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Sub Item 2</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list-item>
</v-list-item-group>
</v-list>
</v-menu>
</template>
|
- Add the menu component to your main Vue instance:
1 2 3 4 5 6 7 |
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {
'menu-component': MenuComponent
}
})
|
- Use the menu component in your Vue template:
1 2 3 |
<div id="app"> <menu-component></menu-component> </div> |
Now you should have a menu with sub-menus using Vuetify in your Vue project. Feel free to customize the menu and sub-menu items as needed.