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.
Breakpoints
Quasar uses the following breakpoints:
xs— Up to 599pxsm— Up to 1023pxmd— Up to 1439pxlg— Up to 1919pxxl— Bigger than 1920px
Flexbox
Quasar comes with flexbox helper classes.
We can create rows with the row class and columns with the col class.
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="row">
<div class="col">
.col
</div>
<div class="col">
.col
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
The col class will divide the rows into equal-sized columns.
Setting One Column Width
We can specify the column width of a column.
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">
<div class="row">
<div class="col">
.col
</div>
<div class="col-6">
.col-6
</div>
<div class="col">
.col
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
We set the middle column’s class to col-6 to make it wider.
The max-width of a column is 12 units.
Variable Width Content
We can add variable-width content with Quasar.
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">
<div class="row">
<div class="col-12 col-md-2">
.col-12 .col-md-2
</div>
<div class="col-12 col-md-auto">
.col-12 .col-md-auto
</div>
<div class="col-12 col-md-2">
.col-12 .col-md-2
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
We have col-md-2 to make the column width 2 when the breakpoint is md .
col-md-auto makes the width automatically sized.
Alignment
We can change the alignment of the elements in the flexbox container with the classes provided by Quasar.
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="row items-start">
<div class="col">
1
</div>
<div class="col">
2
</div>
<div class="col">
3
</div>
</div>
</div>
<script>
new Vue({
el: "#q-app",
data() {
return {};
},
methods: {}
});
</script>
</body>
</html>
We have the items-start class to put all the column divs at the top of the container.
There’s also the items-center class to make the child elements vertically centered and items-end makes the child elements align to the bottom.
Conclusion
We can use the classes provided by Quasar to position and size our elements.
