Developing Vue Apps with the Quasar Library — Carousel Controls and Chat Messages

Image for post
Image for post
Photo by Jen Theodore 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.

Custom Carousel Controls

We can add custom carousel controls by populating the control slot.

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 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-carousel
swipeable
animated
v-model="slide"
:autoplay="autoplay"
ref="carousel"
infinite
>
<q-carousel-slide
:name="1"
img-src="https://cdn.quasar.dev/img/mountains.jpg"
>
</q-carousel-slide>
<q-carousel-slide
:name="2"
img-src="https://cdn.quasar.dev/img/parallax1.jpg"
>
</q-carousel-slide>
<q-carousel-slide
:name="3"
img-src="https://cdn.quasar.dev/img/parallax2.jpg"
>
</q-carousel-slide>
<template v-slot:control>
<q-carousel-control
position="top-right"
:offset="[18, 18]"
class="text-white rounded-borders"
style="background: rgba(0, 0, 0, 0.3); padding: 4px 8px;"
>
<q-toggle
dense
dark
color="orange"
v-model="autoplay"
label="Auto Play"
>
</q-toggle>
</q-carousel-control>
<q-carousel-control
position="bottom-right"
:offset="[18, 18]"
class="q-gutter-xs"
>
<q-btn
push
round
dense
color="orange"
text-color="black"
icon="arrow_left"
@click="$refs.carousel.previous()"
>
</q-btn>
<q-btn
push
round
dense
color="orange"
text-color="black"
icon="arrow_right"
@click="$refs.carousel.next()"
>
</q-btn>
</q-carousel-control>
</template>
</q-carousel>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1,
autoplay: false
}
});
</script>
</body>
</html>

We add the position prop to position the control slot.

offset moves the slot to the left and down.

We use the class to set the colors.

We have the q-toggle component to set the autoplay reactive property to set the autoplay prop.

And we have the q-btn components to let us navigate the slides with the previous and next methods.

Chat Message

We can add the q-chat-message component to add chat message bubbles.

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"
>
<div style="width: 100%; max-width: 400px;">
<q-chat-message :text="['hey, how are you?']" sent></q-chat-message>
<q-chat-message :text="['doing fine, how r you?']"></q-chat-message>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1,
autoplay: false
}
});
</script>
</body>
</html>

We set the text prop to an array of strings.

The sent prop is added to the message of the chat message of the sender.

Also, we can add the name prop to add the name of the person that sent the message:

<!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"
>
<div style="width: 100%; max-width: 400px;">
<q-chat-message
:text="['hey, how are you?']"
sent
name="me"
></q-chat-message>
<q-chat-message
:text="['doing fine, how r you?']"
name="James"
></q-chat-message>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1,
autoplay: false
}
});
</script>
</body>
</html>

Conclusion

We can add carousels with custom controls and add chat messages into our Vue app with Quasar.

Web developer. Subscribe to my email list now at http://jauyeung.net/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