Developing Vue Apps with the Quasar Library — Card Content

Photo by Wesley Tingey on Unsplash

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.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store