Vuetify — Weather Card and Carousel
By: John Au-Yeung
Tags: Programming, Technology, JavaScript, Software Development, Web Development

Photo by lanah nel on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Weather Card

We can add a weather card with Vuetify.

For example, we can write:

<template>

<v-container>

<v-row>

<v-col col="12">

<v-card class="mx-auto" max-width="400">

<v-list-item two-line>

<v-list-item-content>

<v-list-item-title class="headline">London</v-list-item-title>

<v-list-item-subtitle>Mon, 12:30 PM, Mostly sunny</v-list-item-subtitle>

</v-list-item-content>

</v-list-item> <v-card-text>

<v-row align="center">

<v-col class="display-3" cols="6">23°C</v-col>

<v-col cols="6">

<v-img

src="https://cdn.vuetifyjs.com/images/cards/sun.png"

alt="Sunny image"

width="92"

></v-img>

</v-col>

</v-row>

</v-card-text> <v-list-item>

<v-list-item-icon>

<v-icon>mdi-send</v-icon>

</v-list-item-icon>

<v-list-item-subtitle>23 km/h</v-list-item-subtitle>

</v-list-item> <v-list-item>

<v-list-item-icon>

<v-icon>mdi-cloud-download</v-icon>

</v-list-item-icon>

<v-list-item-subtitle>48%</v-list-item-subtitle>

</v-list-item> <v-slider v-model="time" :max="6" :tick-labels="labels" class="mx-4" ticks></v-slider> <v-list class="transparent">

<v-list-item v-for="item in forecast" :key="item.day">

<v-list-item-title>{{ item.day }}</v-list-item-title> <v-list-item-icon>

<v-icon>{{ item.icon }}</v-icon>

</v-list-item-icon> <v-list-item-subtitle class="text-right">{{ item.temp }}</v-list-item-subtitle>

</v-list-item>

</v-list> <v-divider></v-divider> <v-card-actions>

<v-btn text>Full Report</v-btn>

</v-card-actions>

</v-card>

</v-col>

</v-row>

</v-container>

</template> <script>

export default {

name: "HelloWorld",

data: () => ({

labels: ["SU", "MO", "TU", "WED", "TH", "FR", "SA"],

time: 0,

forecast: [

{

day: "Tuesday",

icon: "mdi-white-balance-sunny",

temp: "24\xB0/12\xB0",

},

{

day: "Wednesday",

icon: "mdi-white-balance-sunny",

temp: "22\xB0/14\xB0",

},

{ day: "Thursday", icon: "mdi-cloud", temp: "25\xB0/15\xB0" },

],

}),

};

</script>

We add a v-card with the v-list-item with the text.

The v-card-text has the degrees and image for the weather.

Below that, we have the text for the cloud and wind speed.

And we have the slider for the days.

And a list for the forecast.

The forecast are rendered from the forecast object.

At the bottom, we have the v-btn for the actions.

Carousels

The v-carousel component is used to display a large number of visual content on a rotating timer.

We can create a simple one by writing:

<template>

<v-container>

<v-row>

<v-col col="12">

<v-carousel cycle height="400" hide-delimiter-background show-arrows-on-hover>

<v-carousel-item v-for="(slide, i) in slides" :key="i">

<v-sheet :color="colors[i]" height="100%">

<v-row class="fill-height" align="center" justify="center">

<div class="display-3">Slide {{ slide }}</div>

</v-row>

</v-sheet>

</v-carousel-item>

</v-carousel>

</v-col>

</v-row>

</v-container>

</template> <script>

export default {

name: "HelloWorld",

data: () => ({

colors: [

"indigo",

"warning",

"pink darken-2",

"red lighten-1",

"deep-purple accent-4",

],

slides: [1, 2, 3, 4, 5],

}),

};

</script>

We use the v-carousel component with v-carousel-item s inside.

The background color for the slides are set with the color prop.

Photo by Eric Tompkins on Unsplash

Conclusion

We can add a carousel and weather card with Vuetify.