Vuetify — Subheaders and Data Iterators

Photo by Joshua Sortino 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.

Subheaders with Social Media

We can add subheaders with social media icons below it.

For example, we can write:

<template>
  <v-card flat tile>
    <v-container v-for="type in types" :key="type" class="grey lighten-4" fluid>
      <v-subheader>{{ type }}</v-subheader>
      <v-row>
        <v-spacer></v-spacer>
        <v-col v-for="card in cards" :key="card" cols="12" sm="6" md="4">
          <v-card>
            <v-img
              :src="`https://picsum.photos/200/300?image=${Math.floor(Math.random()*1000)}`"
              height="300px"
            >
              <span class="headline white--text pl-4 pt-4" v-text="card.title"></span>
            </v-img>
            <v-card-actions class="white justify-center">
              <v-btn
                v-for="(social, i) in socials"
                :key="i"
                :color="social.color"
                class="white--text"
                fab
                icon
                small
              >
                <v-icon>{{ social.icon }}</v-icon>
              </v-btn>
            </v-card-actions>
          </v-card>…