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.
Card Title
We can add titles inside an image with the q-img component:
<!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-card class="my-card">
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg" basic>
<div class="absolute-bottom text-h6">
Title
</div>
</q-img>
<q-card-section>
Lorem ipsum
</q-card-section>
</q-card>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the title inside the q-img component to show the title.
absolute-bottom show the title at the bottom.
Card with Video
We can add videos with the q-video component.
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-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-card class="my-card">
<q-video src="https://www.youtube.com/embed/LXb3EKWsInQ"></q-video>
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-card-section class="q-pt-none">
Lorem ipsum dolor sit amet
</q-card-section>
</q-card>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-video component with the YouTube embed URL to embed a YouTube video in the card.
Horizontal Card
Also, we can add cards with a vertical button bar with:
<!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-card class="my-card" flat bordered>
<q-card-section horizontal>
<q-img
class="col"
src="https://cdn.quasar.dev/img/mountains.jpg"
></q-img>
<q-card-actions vertical class="justify-around q-px-md">
<q-btn flat round color="red" icon="favorite"></q-btn>
<q-btn flat round color="accent" icon="bookmark"></q-btn>
<q-btn flat round color="primary" icon="share"></q-btn>
</q-card-actions>
</q-card-section>
</q-card>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the vertical prop to make the button bar vertical.
And we add the justify-around class to spread the buttons out evenly.
q-px-md adds padding to the button bar.
Expandable Card
We can make an expandable card by using the v-show directive with the q-slide-transition component.
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"
/>
<style>
.my-card {
width: 100%;
max-width: 350px;
}
</style>
</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-card class="my-card" flat bordered>
<q-img src="https://cdn.quasar.dev/img/parallax2.jpg"></q-img>
<q-card-section>
<div class="text-overline text-orange-9">Overline</div>
<div class="text-h5 q-mt-sm q-mb-xs">Title</div>
<div class="text-caption text-grey">
Lorem ipsum dolor sit amet
</div>
</q-card-section>
<q-card-actions>
<q-btn flat color="dark" label="Share"></q-btn>
<q-btn flat color="primary" label="Book"></q-btn>
<q-space></q-space>
<q-btn
color="grey"
round
flat
dense
:icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
@click="expanded = !expanded"
>
</q-btn>
</q-card-actions>
<q-slide-transition>
<div v-show="expanded">
<q-separator></q-separator>
<q-card-section class="text-subitle2">
Lorem ipsum dolor sit amet
</q-card-section>
</div>
</q-slide-transition>
</q-card>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
expanded: false
}
});
</script>
</body>
</html>
We add the q-slide-transition component with the div that we want to toggle inside.
This will add the transition when we toggle the div with the q-btn above.
We toggle it by changing the expanded reactive property.
Conclusion
We add cards with various options into our Vue app with Quasar.
