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.
Dark Mode
We can enable dark mode with the $q.dark.set method:
<!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"></div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
beforeMount() {
this.$q.dark.set(true);
}
});
</script>
</body>
</html>
true will turn on dark mode and false will turn it off.
Dialog
We can add a dialog with the $q.dialog method:
<!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="Confirm" color="primary" @click="confirm"></q-btn>
<q-btn label="Prompt" color="primary" @click="prompt"></q-btn>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
confirm() {
this.$q
.dialog({
title: "Confirm",
message: "Would you like to turn on the wifi?",
cancel: true,
persistent: true
})
.onOk(() => {
console.log("OK");
})
.onOk(() => {
console.log("Second OK catcher");
})
.onCancel(() => {
console.log("Cancel");
})
.onDismiss(() => {
console.log("I am triggered on both OK and Cancel");
});
},
prompt() {
this.$q
.dialog({
title: "Prompt",
message: "What is your name?",
prompt: {
model: "",
type: "text"
},
cancel: true,
persistent: true
})
.onOk((data) => {
console.log("OK, received", data);
})
.onCancel(() => {
console.log("Cancel");
})
.onDismiss(() => {
console.log("I am triggered on both OK and Cancel");
});
}
}
});
</script>
</body>
</html>
The title property sets the title.
message sets the dialog message.
cancel adds a Cancel button when it’s set to true .
persistent makes the dialog persistent.
And we can watch the events emitted from the dialogs with the onOK , onCancel and onDismiss methods.
The prompt property lets us show an input with the prompt.
We get the data from the data parameter from the onOK callback with the prompt dialog.
We can set the dark property to true to enable dark mode.
Radio, Checkboxes, and Toggles
We can add dialogs that let users select options with radio buttons, checkboxes, and toggles.
To add them, we 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="Radio" color="primary" @click="radio"></q-btn>
<q-btn label="Checkbox" color="primary" @click="checkbox"></q-btn>
<q-btn label="Toggle" color="primary" @click="toggle"></q-btn>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
radio() {
this.$q
.dialog({
title: "Options",
message: "Choose an option:",
options: {
type: "radio",
model: "opt1",
items: [
{ label: "Option 1", value: "opt1", color: "secondary" },
{ label: "Option 2", value: "opt2" },
{ label: "Option 3", value: "opt3" }
]
},
cancel: true,
persistent: true
})
.onOk((data) => {
console.log("OK, received", data);
});
},
checkbox() {
this.$q
.dialog({
title: "Options",
message: "Choose your options:",
options: {
type: "checkbox",
model: [],
items: [
{ label: "Option 1", value: "opt1", color: "secondary" },
{ label: "Option 2", value: "opt2" },
{ label: "Option 3", value: "opt3" }
]
},
cancel: true,
persistent: true
})
.onOk((data) => {
console.log("OK, received", data);
});
},
toggle() {
this.$q
.dialog({
title: "Options",
message: "Choose your options:",
options: {
type: "toggle",
model: [],
items: [
{ label: "Option 1", value: "opt1", color: "secondary" },
{ label: "Option 2", value: "opt2" },
{ label: "Option 3", value: "opt3" }
]
},
cancel: true,
persistent: true
})
.onOk((data) => {
console.log("OK, received", data);
});
}
}
});
</script>
</body>
</html>
We just add the options.items property to add the options.
And we change the control type to show with the options.type property.
We get the selected item from the data parameter from the onOK callback.
Conclusion
We can add dark mode and dialogs with the Quasar library into our Vue app.
