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.
Full-Screen Toggle
Quasar comes with code to let us toggle full-screen mode and check if we’re in full-screen mode.
To use it, 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
color="secondary"
@click="$q.fullscreen.toggle()"
:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
:label="$q.fullscreen.isActive ? 'Exit Fullscreen' : 'Go Fullscreen'"
>
</q-btn>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We call $q.fullscreen.toggle() to toggle full-screen mode.
Then we $q.fullscreen.isActive property indicates whether we’re in full-screen mode.
App Visibility
We can watch for app visibility with the $q.appVisible 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"></div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
watch: {
"$q.appVisible"(val) {
console.log(
val ? "App became visible" : "App went in the background"
);
}
}
});
</script>
</body>
</html>
Bottom Sheet
We can add a bottom sheet with Quasar’s $q.bottomSheet method.
To add it, 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
no-caps
push
color="primary"
label="List BottomSheet"
@click="show()"
></q-btn>
<q-btn
no-caps
push
color="white"
text-color="primary"
label="Grid BottomSheet"
@click="show(true)"
></q-btn>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
show(grid) {
this.$q
.bottomSheet({
message: "Bottom Sheet message",
grid,
actions: [
{
label: "Drive",
img: "https://cdn.quasar.dev/img/logo_drive_128px.png",
id: "drive"
},
{
label: "Keep",
img: "https://cdn.quasar.dev/img/logo_keep_128px.png",
id: "keep"
},
{
label: "Google Hangouts",
img: "https://cdn.quasar.dev/img/logo_hangouts_128px.png",
id: "calendar"
},
{},
{
label: "John",
avatar: "https://cdn.quasar.dev/img/boy-avatar.png",
id: "john"
}
]
})
.onOk((action) => {
console.log("Action chosen:", action.id);
})
.onCancel(() => {
console.log("Dismissed");
})
.onDismiss(() => {
console.log("I am triggered on both OK and Cancel");
});
}
}
});
</script>
</body>
</html>
We call bottomSheet with an array of objects to add the items to the bottom sheet.
label has the text of each item. img has the image for each item.
Then we can watch various events with the onOk , onCancel and onDismiss methods to watch item click and closing the bottom sheet.
Cookies
We can get and set cookies with the $q.cookies property.
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"></div>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
beforeMount() {
this.$q.cookies.set("cookie_name", "foo", {
expires: 10,
secure: true
});
console.log(this.$q.cookies.getAll());
}
});
</script>
</body>
</html>
We call set with the key, value, and options respectively.
expires has the expiration time in seconds.
secure makes sure the cookie is set on HTTPS connections only.
Other cookie options like path , domain , sameSite , httpOnly , etc. are supported.
And we get all the cookies with the getAll method.
Conclusion
We can toggle full screen and get and set cookies with Quasar’s built in plugins.
