Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Dialogs
We can add dialog boxes into our Vue app with the Quasar library.
For instance, we can add a simple one by writing:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-btn label="Show Alert" color="primary" @click="alert = true" />
<q-dialog v-model="alert">
<q-card>
<q-card-section>
<div class="text-h6">Alert</div>
</q-card-section>
<q-card-section class="q-pt-none">
Lorem ipsum
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="OK" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
alert: false
}
});
</script>
</body>
</html>
We add the q-btn component to add a button to open the dialog box.
The q-dialog component is controlled by the alert state, which is bound with v-model .
When alert is true , the dialog is displayed.
Inside the dialog, we have q-card to hold the content.
q-card-section divides the card into sections.
The v-close-popup prop makes the dialog close when we click the button.
We can add a close button to close the dialog when it’s clicked:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-btn label="Show Alert" color="primary" @click="alert = true" />
<q-dialog v-model="alert">
<q-card>
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Close icon</div>
<q-space></q-space>
<q-btn icon="close" flat round dense v-close-popup></q-btn>
</q-card-section>
<q-card-section>
Lorem ipsum
</q-card-section>
</q-card>
</q-dialog>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
alert: false
}
});
</script>
</body>
</html>
We just set the icon prop of q-btn to close to add a close icon.
q-space separates the title from the close button by pushing them to the left and right side respectively.
Also, we can position the dialog with the position prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-btn label="Show Alert" color="primary" @click="alert = true" />
<q-dialog v-model="alert" position="right">
<q-card>
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">Close icon</div>
<q-space></q-space>
<q-btn icon="close" flat round dense v-close-popup></q-btn>
</q-card-section>
<q-card-section>
Lorem ipsum
</q-card-section>
</q-card>
</q-dialog>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
alert: false
}
});
</script>
</body>
</html>
Conclusion
We can add a simple dialog box into a Vue app with Quasar’s q-dialog component.
