Vuetify — Subheaders

Vuetify is a popular UI framework for Vue apps.

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

Subheaders

The v-subheader component is used to separate sections of lists.

For example, we can write:

<template>
  <v-col cols="12" sm="6" offset-sm="3">
    <v-card>
      <v-subheader :inset="inset">Subheader</v-subheader>

      <v-list>
        <template v-for="(item, index) in items">
          <v-list-item v-if="item.action" :key="item.title">
            <v-list-item-action>
              <v-icon>{{ item.action }}</v-icon>
            </v-list-item-action>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <v-divider v-else-if="item.divider" :key="index" :inset="inset"></v-divider>
        </template>
      </v-list>
    </v-card>
  </v-col>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    inset: true,
    items: [
      {
        action: "label",
        title: "List item 1",
      },
      {
        divider: true,
      },
      {
        action: "label",
        title: "List item 2",
      },
      {
        divider: true,
      },
      {
        action: "label",
        title: "List item 3",
      },
    ],
  }),
};
</script>

We have the v-subheader component on top of a list.

It’ll be aligned to the text of the list with the inset prop.

Grid Subheaders

We can add subheaders above a grid.

For example, we can write:

<template>
  <v-row>
    <v-col cols="12" sm="6" offset-sm="3">
      <v-card>
        <v-subheader>May</v-subheader>
        <v-container fluid>
          <v-row>
            <v-col v-for="i in 6" :key="i" cols="4">
              <img
               :src="`https://randomuser.me/api/portraits/men/${i}.jpg`"
                class="image"
                height="100%"
                width="100%"
              />
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the v-subheader on top of a grid.

Menu Subheaders

Subheaders also fit automatically in menus.

For example, we can write:

<template>
  <v-row>
    <v-col cols="12" sm="6" offset-sm="3">
      <v-card>
        <v-toolbar color="teal" dark>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>

           <v-toolbar-title>Manage</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </v-toolbar>

        <v-list>
          <template v-for="(item, index) in items">
            <v-list-item v-if="item.action" :key="item.title">
              <v-list-item-action>
                <v-icon>{{ item.action }}</v-icon>
              </v-list-item-action>

              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>

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

            <v-subheader v-else-if="item.header" :key="item.header">{{ item.header }}</v-subheader>
          </template>
        </v-list>
      </v-card>
    </v-col>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        action: "move_to_inbox",
        title: "Inbox",
      },
      {
        action: "send",
        title: "Sent",
      },
      { divider: true },
      { header: "Labels" },
      {
        action: "label",
        title: "Family",
      },
    ],
  }),
};
</script>

We created a v-list with the items.

The v-subheader is one of the types of items that we’re looping through within the v-list component.

The subheader will be aligned with the menu text without any extra styles.

Conclusion

Subheaders are useful for titles for lists.