I have this code
<template>
<V-toolbar>
Button 1
Button 2
.....
Button n
<\V-toolbar>
<\template>
And number of buttons will increase with scaling of application.
My question is how to make it responsive so that in a small screen these buttons can be viewed as a menu (...) .
Thanks
You can make use of the Vuetify breakpoint service, like below:
<v-toolbar>
<v-menu bottom left v-if="$vuetify.breakpoint.xs || $vuetify.breakpoint.sm">
<template v-slot:activator="{ on, attrs }">
<v-btn
dark
icon
v-bind="attrs"
v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
Button 1
Button 2
.....
Button n
</v-menu>
<template v-else>
Button 1
Button 2
.....
Button n
</template>
</v-toolbar>
You can view more breakpoint options here.