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.
Bar
We can add a top bar with the q-bar component.
For instance, we can add a Windows-style top bar 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://use.fontawesome.com/releases/v5.0.13/css/all.css"
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-bar>
<div class="cursor-pointer">File</div>
<div class="cursor-pointer">Edit</div>
<div class="cursor-pointer gt-xs">View</div>
<div class="cursor-pointer gt-xs">Window</div>
<div class="cursor-pointer">Help</div>
<q-space></q-space>
<q-btn dense flat icon="minimize"></q-btn>
<q-btn dense flat icon="crop_square"></q-btn>
<q-btn dense flat icon="close"></q-btn>
</q-bar>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-bar component with the divs to add the top bar items.
We have the cursor-pointer to change the cursor style to a pointer when we hover over the elements.
q-space separates the divs from the buttons.
We also have:
<link
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
rel="stylesheet"
type="text/css"
/>
to add the Font Awesome icons.
We can add a Mac OS style top bar 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://use.fontawesome.com/releases/v5.0.13/css/all.css"
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-bar>
<div class="text-weight-bold">
App
</div>
<div class="cursor-pointer gt-md">File</div>
<div class="cursor-pointer gt-md">Edit</div>
<div class="cursor-pointer gt-md">View</div>
<div class="cursor-pointer gt-md">Window</div>
<div class="cursor-pointer gt-md">Help</div>
<q-space></q-space>
<q-btn dense flat icon="airplay" class="gt-xs"></q-btn>
<q-btn dense flat icon="battery_charging_full"></q-btn>
<q-btn dense flat icon="wifi"></q-btn>
<div>9:41</div>
<q-btn dense flat icon="search"></q-btn>
<q-btn dense flat icon="list"></q-btn>
</q-bar>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We just change the icons to the Apple styled ones.
To add an Android-style top bar, 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://use.fontawesome.com/releases/v5.0.13/css/all.css"
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-bar dense class="bg-black text-white">
<div>mobi-net</div>
<q-icon name="email"></q-icon>
<q-space></q-space>
<q-icon name="bluetooth"></q-icon>
<q-icon name="signal_wifi_4_bar"></q-icon>
<q-icon name="signal_cellular_4_bar"></q-icon>
<div class="gt-xs">100%</div>
<q-icon name="battery_full"></q-icon>
<div>10:00AM</div>
</q-bar>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-icon components directly instead of adding the icons into buttons.
And we can add an iOS-style top bar 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://use.fontawesome.com/releases/v5.0.13/css/all.css"
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-gutter-sm">
<q-bar dense class="bg-teal text-white">
<q-icon name="signal"></q-icon>
<div>net</div>
<div>4G</div>
<q-space></q-space>
<q-icon name="wifi"></q-icon>
<q-icon name="near_me"></q-icon>
<div>100%</div>
<q-icon name="batteryFull"></q-icon>
</q-bar>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We just switch out the icons for the iOS ones.
Conclusion
We can add a top bar with various styles easily into our Vue app with Quasar.
