Vuetify List: How to Create Lists with Vuetify

Lists are used to display a group of related information. This information might be dynamic and modifiable by the user (e.g., a list of contacts or tasks) or it might be static (like a list of links for navigating around an app). Lists provide a consistent styling for a group of text or images. In this article, we’re going to learn how to add lists to our UI using the Vuetify list component.

The v-list Component

The names of the components for creating lists in Vuetify are quite self-explanatory. The v-list component is for creating lists. We use the v-list-item component to create an additional item in the list. v-list-item-content contains the primary list content, and v-list-item-title displays the list title. For example:

<template>
  <v-app>
    <v-card class="mx-auto ma-4">
      <v-list>
        <v-list-item
          v-for="i in 5"
          :key="i"
        >
          <v-list-item-content>
            <v-list-item-title>
              List Item {{ i }}
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the Vuetify list component.

Vuetify List Two Line

Vuetify lists are single-line by default. To display two lines of content in a list, we set the two-line prop to true:

<template>
  <v-app>
    <v-card class="mx-auto ma-4">
      <v-list>
        <v-list-item
          v-for="i in 5"
          :key="i"
          two-line
        >
          <v-list-item-content>
            <v-list-item-title>
              List Item
            </v-list-item-title>
            <v-list-item-subtitle>
              Subtitle
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the two-line prop of the Vuetify list component.
https://wp.codingbeautydev.com/blog/displaying-the-task-list-vuetify-to-do-list-app-tutorial/

Vuetify List Three Line

We can also display three lines of text in a list with the three-line prop:

<template>
  <v-app>
    <v-card class="mx-auto ma-4">
      <v-list>
        <v-list-item
          v-for="i in 5"
          :key="i"
          three-line
        >
          <v-list-item-content>
            <v-list-item-title>
              List Item
            </v-list-item-title>
            <v-list-item-subtitle>
              Subtitle 1
            </v-list-item-subtitle>
            <v-list-item-subtitle>
              Subtitle 2
            </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>
Using the three-line prop of the Vuetify list component.

Vuetify List Item Groups

We can use the v-list-item-group component in a list to create a group of selectable list items.

<template>
  <v-app>
    <v-card class="mx-auto ma-4" width="300">
      <v-list>
        <v-list-item-group v-model="selectedItem" color="primary">
          <v-list-item v-for="(item, i) in items" :key="i">
            <v-list-item-icon
              ><v-icon v-text="item.icon"></v-icon
            ></v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selectedItem: 1,
    items: [
      { text: 'Contacts', icon: 'mdi-account' },
      { text: 'Recent', icon: 'mdi-clock' },
      { text: 'Starred', icon: 'mdi-star' },
      { text: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
A selectable Vuetify list created with the list item group component.

The list maintains state, and clicking another list item will change the selection:

Changing the selected item of the list.

Dense Lists

We can compact lists in Vuetify with the dense prop:

<template>
  <v-app>
    <v-card class="mx-auto ma-4" width="300">
      <v-list dense>
        <v-list-item-group v-model="selectedItem" color="primary">
          <v-list-item v-for="(item, i) in items" :key="i">
            <v-list-item-icon
              ><v-icon v-text="item.icon"></v-icon
            ></v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selectedItem: 1,
    items: [
      { text: 'Contacts', icon: 'mdi-account' },
      { text: 'Recent', icon: 'mdi-clock' },
      { text: 'Starred', icon: 'mdi-star' },
      { text: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
Using the dense prop.

Disabled Lists

We can disable interaction with a list by setting the disabled prop to true:

<template>
  <v-app>
    <v-card class="mx-auto ma-4" width="300">
      <v-list disabled>
        <v-list-item-group v-model="selectedItem" color="primary">
          <v-list-item v-for="(item, i) in items" :key="i">
            <v-list-item-icon
              ><v-icon v-text="item.icon"></v-icon
            ></v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selectedItem: 1,
    items: [
      { text: 'Contacts', icon: 'mdi-account' },
      { text: 'Recent', icon: 'mdi-clock' },
      { text: 'Starred', icon: 'mdi-star' },
      { text: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>

Flat Lists

The flat prop removes the background color of the selected list item:

<template>
  <v-app>
    <v-card class="mx-auto ma-4" width="300">
      <v-list flat>
        <v-list-item-group v-model="selectedItem" color="primary">
          <v-list-item v-for="(item, i) in items" :key="i">
            <v-list-item-icon
              ><v-icon v-text="item.icon"></v-icon
            ></v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selectedItem: 1,
    items: [
      { text: 'Contacts', icon: 'mdi-account' },
      { text: 'Recent', icon: 'mdi-clock' },
      { text: 'Starred', icon: 'mdi-star' },
      { text: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
A flat Vuetify list.

Vuetify List Nav Styling

Setting the nav prop to true on a v-list reduces the width and rounds the corners of the v-list-items in it:

<template>
  <v-app>
    <v-card class="mx-auto ma-4" width="300">
      <v-list nav>
        <v-list-item-group v-model="selectedItem" color="green">
          <v-list-item v-for="(item, i) in items" :key="i">
            <v-list-item-icon
              ><v-icon v-text="item.icon"></v-icon
            ></v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selectedItem: 1,
    items: [
      { text: 'Contacts', icon: 'mdi-account' },
      { text: 'Recent', icon: 'mdi-clock' },
      { text: 'Starred', icon: 'mdi-star' },
      { text: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
A Vuetify list with the nav styling.

Rounded List Items in Vuetify

We can make the v-list-items inside a v-list fully rounded by setting the rounded prop to true:

<template>
  <v-app>
    <v-card class="mx-auto ma-4" width="300">
      <v-list rounded>
        <v-list-item-group v-model="selectedItem" color="indigo">
          <v-list-item v-for="(item, i) in items" :key="i">
            <v-list-item-icon
              ><v-icon v-text="item.icon"></v-icon
            ></v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selectedItem: 1,
    items: [
      { text: 'Contacts', icon: 'mdi-account' },
      { text: 'Recent', icon: 'mdi-clock' },
      { text: 'Starred', icon: 'mdi-star' },
      { text: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
A Vuetify list with rounded list items.

Shaped List Items in Vuetify

Lists with the shaped prop set to true have rounded borders on one side of the v-list-items:

<template>
  <v-app>
    <v-card class="mx-auto ma-4" width="300">
      <v-list shaped>
        <v-list-item-group v-model="selectedItem" color="red accent-2">
          <v-list-item v-for="(item, i) in items" :key="i">
            <v-list-item-icon
              ><v-icon v-text="item.icon"></v-icon
            ></v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selectedItem: 1,
    items: [
      { text: 'Contacts', icon: 'mdi-account' },
      { text: 'Recent', icon: 'mdi-clock' },
      { text: 'Starred', icon: 'mdi-star' },
      { text: 'Settings', icon: 'mdi-cog' },
    ],
  }),
};
</script>
A Vuetify list with shaped list items.

Vuetify List Sub Groups

With the v-list-group component and its sub-group prop we can create sub groups of up to two levels in depth:

<template>
  <v-app>
    <v-card class="mx-auto ma-4" width="300">
      <v-list>
        <v-list-group :value="true" prepend-icon="mdi-file">
          <template v-slot:activator>
            <v-list-item-title>Files</v-list-item-title>
          </template>
          <v-list-group :value="true" no-action sub-group>
            <template v-slot:activator>
              <v-list-item-content>Books</v-list-item-content>
            </template>

            <v-list-item v-for="(book, i) in books" :key="i" link>
              <v-list-item-title v-text="book"></v-list-item-title>
              <v-list-item-icon><v-icon>mdi-book</v-icon></v-list-item-icon>
            </v-list-item>
          </v-list-group>
          <v-list-group no-action sub-group>
            <template v-slot:activator>
              <v-list-item-content>Code</v-list-item-content>
            </template>

            <v-list-item v-for="(code, i) in codes" :key="i" link>
              <v-list-item-title v-text="code"></v-list-item-title>
              <v-list-item-icon><v-icon>mdi-xml</v-icon></v-list-item-icon>
            </v-list-item>
          </v-list-group>
        </v-list-group>
        <v-list-item>
          <v-list-item-icon><v-icon>mdi-cog</v-icon></v-list-item-icon>
          <v-list-item-title>Settings</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    selectedItem: 1,
    books: ['History', 'Fiction', 'Philosophy'],
    codes: ['C#', 'JavaScript', 'PHP'],
  }),
};
</script>
A Vuetify list with sub groups.

We can expand and contract the sub groups as needed:

Expanding and contracting sub groups in the list.

Summary

Lists are used to present a group of information that are related in some way. Vuetify provides v-list, v-list-group, v-list-item and other components for creating and customizing lists.



Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Every Crazy Thing JavaScript Does

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *