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.
Getting Started
The easiest way to get started is with the UMD build of the framework.
We can use that with only a script tag.
To do this, 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>
<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>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
to create an empty Quasar app.
We add the CSS for Google fonts and Quasar in the head tag.
Then we add Vue and Quasar in the body .
The 3rd script tag is the Vue app instance.
Colors
Quasar comes with its own colors.
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>
<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-btn color="red">button</q-btn>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
We added the q-btn with the color prop set to red to make the background color red.
It comes with many other colors.
Spacing
Quasar has spacing helper classes.
For instance, 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-card class="q-mt-md q-mr-sm">hello world</q-card>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
The q-mt-md and q-mr-sm are the classes for adding the top and right margins respectively.
md is the medium screen size and sm is the small screen breakpoint.
CSS Shadows
We can apply shadows to our components with the provided classes.
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-card class="shadow-2">hello world</q-card>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
We set the shadow-2 class to add a shadow with a depth of 2 around the card.
Other classes include:
no-shadow— remove any shadowinset-shadow— set an inset shadowshadow-N— whereNis an integer from 1 to 24.shadow-transition— apply a CSS transition on the shadow
We can also have shadows pointing up with:
shadow-up-1— set a depth of 1shadow-up-2— set a depth of 2shadow-up-N— whereNis an integer from 1 to 24.
They will apply a shadow on the top of the component.
Conclusion
We can get started with Quasar with the UMD module, which can be included with a script tag.
