Make a responsive v-toolbar vuejs-CodePudding

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

CodePudding user response：

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.