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.
Dialog Validation
We can add validation to prompt dialogs with the prompt.isValid property:
<!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">
<div class="q-pa-md">
<q-btn label="Prompt" color="primary" @click="prompt"></q-btn>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
prompt() {
this.$q
.dialog({
title: "Prompt",
message: "What is your name? (Minimum 3 characters)",
prompt: {
model: "",
isValid: (val) => val.length > 2,
type: "text"
},
cancel: true,
persistent: true
})
.onOk((data) => {
console.log(data);
});
}
}
});
</script>
</body>
</html>
We set isValid to a function that takes the entered value and returns the validation condition.
This can also be used with radio buttons and checkbox dialogs.
HTML Dialog
We can show a native HTML dialog with the html property set to true .
For example, we can write:
<!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">
<div class="q-pa-md">
<q-btn
label="Show HTML Dialog"
color="primary"
@click="showDialog"
></q-btn>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
showDialog() {
this.$q
.dialog({
title: "Alert<em>!</em>",
message:
'<em>I can</em> <span class="text-red">use</span> <strong>HTML</strong>',
html: true
})
.onOk(() => {
console.log("OK");
})
.onCancel(() => {
console.log("Cancel");
})
.onDismiss(() => {
console.log("I am triggered on both OK and Cancel");
});
}
}
});
</script>
</body>
</html>
We just set the title and message properties to HTML that we want to render.
This means that cross-site scripting attacks can be executed if malicious code is planted into the HTML.
We can render a custom dialog with the q-dialog component:
<!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">
<div class="q-pa-md">
<q-btn label="Show Dialog" color="primary" @click="showDialog"></q-btn>
</div>
</div>
<script>
const CustomComponent = {
template: `
<q-dialog ref="dialog" @hide="onDialogHide">
<q-card class="q-dialog-plugin">
<q-card-section>
Hello
</q-card-section>
<q-card-actions align="right">
<q-btn color="primary" label="OK" @click="onOKClick"></q-btn>
<q-btn color="primary" label="Cancel" @click="onCancelClick"></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
`,
methods: {
show() {
this.$refs.dialog.show();
},
hide() {
this.$refs.dialog.hide();
},
onDialogHide() {
this.$emit("hide");
},
onOKClick() {
this.$emit("ok");
this.hide();
},
onCancelClick() {
this.hide();
}
}
};
new Vue({
el: "#q-app",
data: {},
methods: {
showDialog() {
this.$q
.dialog({
component: CustomComponent,
parent: this,
text: "something"
})
.onOk(() => {
console.log("OK");
})
.onCancel(() => {
console.log("Cancel");
})
.onDismiss(() => {
console.log("Called on OK or Cancel");
});
}
}
});
</script>
</body>
</html>
We add the CustomComponent component with the q-dialog component to add a dialog.
We have the show and hide methods to show and hide the dialog.
And we emit the hide event when we close the dialog to close it.
onOKClick emits the ok event to trigger the onOK callback.
Conclusion
We can add dialogs with various customizations with the Quasar library.
