Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Loader Dialog
We can create a loader dialog to show a progress bar inside it.
To do that, we write:
<template>
<v-container>
<v-row>
<v-col col="12">
<div class="text-center">
<v-btn
:disabled="dialog"
:loading="dialog"
class="white--text"
color="purple darken-2"
@click="dialog = true"
>Start loading</v-btn>
<v-dialog v-model="dialog" hide-overlay persistent width="300">
<v-card color="primary" dark>
<v-card-text>
Please wait
<v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
</v-card-text>
</v-card>
</v-dialog>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
dialog: false,
}),
watch: {
dialog(val) {
if (!val) {
return;
}
setTimeout(() => {
this.dialog = false;
}, 5000);
},
},
};
</script>
We added a dialog that shows a progress bar with the v-progress-linear component,
The indeterminate prop makes the progress bar move until the dialog is dismissed.
Nested Dialogs
We can open dialog boxes within another dialog.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<div>
<v-row justify="center">
<v-btn color="primary" class="ma-2" dark @click="dialog = true">Open Dialog 1</v-btn>
<v-btn color="primary" class="ma-2" dark @click="dialog2 = true">Open Dialog 2</v-btn>
<v-btn color="primary" class="ma-2" dark @click="dialog3 = true">Open Dialog 3</v-btn>
<v-menu bottom offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn class="ma-2" v-bind="attrs" v-on="on">A Menu</v-btn>
</template>
</v-menu>
<v-dialog
v-model="dialog"
fullscreen
hide-overlay
transition="dialog-bottom-transition"
scrollable
>
<v-card tile>
<v-card-text>
<v-btn color="primary" dark class="ma-2" @click="dialog2 = !dialog2">Open Dialog 2</v-btn>
<v-list three-line subheader>
<v-subheader>User Controls</v-subheader>
</v-list>
</v-card-text>
<div style="flex: 1 1 auto;"></div>
</v-card>
</v-dialog>
<v-dialog v-model="dialog2" max-width="500px">
<v-card>
<v-card-title>Dialog 2</v-card-title>
<v-card-text>
<v-btn color="primary" dark @click="dialog3 = !dialog3">Open Dialog 3</v-btn>
</v-card-text>
<v-card-actions>
<v-btn color="primary" text @click="dialog2 = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog3" max-width="500px">
<v-card>
<v-card-title>
<span>Dialog 3</span>
<v-spacer></v-spacer>
<v-menu bottom left>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
</v-menu>
</v-card-title>
<v-card-actions>
<v-btn color="primary" text @click="dialog3 = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
dialog: false,
dialog2: false,
dialog3: false,
notifications: false,
sound: true,
widgets: false,
}),
};
</script>
to show dialog boxes with buttons to open other dialog boxes.
They are all created with the v-dialog component.
Conclusion
We can add a dialog box to show a progress bar or other dialog boxes with Vuetify.
