Vuetify — List Item Icons and Avatars

Vuetify is a popular UI framework for Vue apps.

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

List Items with Avatar with Title and Action

We can add list items with avatar prop.

For example, we can write:

<template>
  <v-row>
    <v-col cols="12">
      <v-card max-width="500" class="mx-auto">
        <v-list>
          <v-list-item v-for="item in items" :key="item.title">
            <v-list-item-icon>
              <v-icon v-if="item.icon" color="pink">mdi-star</v-icon>
            </v-list-item-icon>

<v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>

<v-list-item-avatar>
              <v-img :src="item.avatar"></v-img>
            </v-list-item-avatar>
          </v-list-item>
        </v-list>
      </v-card>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        icon: true,
        title: "Jason Smith",
        avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
      },
      {
        title: "Travis Jones",
        avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
      },
      {
        title: "Ali Simpson",
        avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
      },
    ],
  }),
};
</script>

We have the v-list-item-title component with the title.

And the v-img component with the avatar image inside the v-list-item-avatar .

The v-list-item-icon lets us add an icon on the left side.

Icon with 2 Lines and Action

We can add icons that span 2 lines.

For example, we can write:

<template>
  <v-row>
    <v-col cols="12">
      <v-card max-width="600" class="mx-auto">
        <v-list two-line subheader>
          <v-subheader inset>Folders</v-subheader>

<v-list-item v-for="item in items" :key="item.title">
            <v-list-item-avatar>
              <v-icon :class="[item.iconClass]" v-text="item.icon"></v-icon>
            </v-list-item-avatar>

<v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
              <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle>
            </v-list-item-content>

<v-list-item-action>
              <v-btn icon>
                <v-icon color="grey lighten-1">mdi-information</v-icon>
              </v-btn>
            </v-list-item-action>
          </v-list-item>
        </v-list>
      </v-card>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        icon: "folder",
        iconClass: "grey lighten-1 white--text",
        title: "Photos",
        subtitle: "Jan 9, 2020",
      },
      {
        icon: "folder",
        iconClass: "grey lighten-1 white--text",
        title: "Recipes",
        subtitle: "Jan 17, 2020",
      },
      {
        icon: "folder",
        iconClass: "grey lighten-1 white--text",
        title: "Work",
        subtitle: "Jan 28, 2020",
      },
    ],
  }),
};
</script>

We have the v-list-item-avatar component with the v-icon component.

We set the class prop with the iconClass on the entry.

The icons automatically span 2 lines.

Avatar with 3 Lines

We can add avatars than span 3 lines.

For example, we can write:

<template>
  <v-row>
    <v-col cols="12">
      <v-card max-width="450" class="mx-auto">
        <v-list three-line>
          <template v-for="(item, index) in items">
            <v-subheader v-if="item.header" :key="item.header" v-text="item.header"></v-subheader>

            <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>

            <v-list-item v-else :key="item.title">
              <v-list-item-avatar>
                <v-img :src="item.avatar"></v-img>
              </v-list-item-avatar>

<v-list-item-content>
                <v-list-item-title v-html="item.title"></v-list-item-title>
                <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </template>
        </v-list>
      </v-card>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      { header: "Today" },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
        title: "Brunch this weekend?",
        subtitle:
          "<span class='text--primary'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus efficitur tellus sit amet purus ullamcorper, ac vulputate lectus imperdiet.</span>",
      },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
        title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
        subtitle:
          "<span class='text--primary'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus efficitur tellus sit amet purus ullamcorper, ac vulputate lectus imperdiet.</span>",
      },
    ],
  }),
};
</script>

We have the three-line prop to make the list item display with 3 lines.

Conclusion

We can add list items with various icons and other content with Vuetify.