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.
Page Scroller
We can add a scrollable page component with the q-page-container component.
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">
<q-layout
view="lHh Lpr lFf"
container
style="height: 400px;"
class="shadow-2 rounded-borders"
>
<q-header elevated>
<q-toolbar>
<q-avatar>
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
</q-avatar>
<q-toolbar-title>
App
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-page-container>
<q-page padding>
<p v-for="n in 15" :key="n">
Lorem ipsum
</p>
<q-page-scroller
position="bottom-right"
:scroll-offset="150"
:offset="[18, 18]"
>
<q-btn fab icon="keyboard_arrow_up" color="accent" />
</q-page-scroller>
</q-page>
</q-page-container>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
drawerLeft: true
},
methods: {}
});
</script>
</body>
</html>
We have the q-layout component that’s used as the layout container.
The q-header component adds a header.
q-toolbar adds a toolbar.
q-page-container has the page container. q-page holds the page content.
q-page-scroller watches the scroll position and shows the q-btn is we scrolled to the bottom of the page.
The position is the position of the scroller component.
Also, we can add q-page-scroller to the top with position set to top :
<!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: 400px;"
class="shadow-2 rounded-borders"
>
<q-header elevated>
<q-toolbar>
<q-avatar>
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
</q-avatar>
<q-toolbar-title>
App
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-page-container>
<q-page padding>
<p v-for="n in 15" :key="n">
Lorem ipsum
</p>
<q-page-scroller
expand
position="top"
:scroll-offset="150"
:offset="[0, 0]"
>
<div
class="col cursor-pointer q-pa-sm bg-accent text-white text-center"
>
Scroll back up
</div>
</q-page-scroller>
</q-page>
</q-page-container>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
drawerLeft: true
},
methods: {}
});
</script>
</body>
</html>
Ajax Bar
We can show the progress of an ajax request with the Ajax bar component.
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">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-ajax-bar
ref="bar"
position="bottom"
color="accent"
size="10px"
skip-hijack
/>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
trigger() {
const bar = this.$refs.bar;
bar.start();
this.timer = setTimeout(() => {
if (this.$refs.bar) {
bar.stop();
}
}, Math.random() * 3000 + 1000);
}
},
mounted() {
this.trigger();
}
});
</script>
</body>
</html>
We add the q-ajax-bar component to add the loading bar.
position set to bottom puts the bar at the bottom.
The trigger method shows the bar with the bar.start method.
And the setTimeout callback calls bar.stop to stop the bar from displaying.
Conclusion
We can add a scrollable page and loading bar into our Vue app with the Quasar library.
