Interactive, Ordered, Animated List in Vue.js with Vuetify.js and Nuxt.js

A short tutorial about building an interactive list component as a simple alternative to drag & drop.

Photo by Kolar.io on Unsplash

TL;DR

Here’s the component in action:

And here’s the final code on Codesandbox:

Introduction

There are many situations where it’s necessary to ask the user to enter a list of items, for example their social profiles, postal addresses, contacts, etc. Implementing a list supporting just add and remove operations is relatively easy. When it comes to changing the order of the items, Drag & Drop seems like an obvious solution. However, unfortunately D&D is not officially supported by Vuetify.js and custom-made solutions can be tedious to develop, are not reliable in all possible situations and they require additional maintenance. To overcome these challenges, I would like to present you with a simple trick that works great if the number of items on the list is small.

Static List

Let’s begin with a static list.

To clearly separate the items, each one will be wrapped in a card component. Here’s the CardList component:

<v-card v-for="(item, index) in value" :key="index" outlined class="mt-3">
  <v-card-text>
    <slot :item="item" :index="index" />
  </v-card-text>
</v-card>

It can be used as follows:

<card-list v-model="items" #default="{ item }">
  <v-row>
    <v-col cols="12">
      <v-text-field v-model="item.name" label="Name" hide-details />
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="12">
      <v-text-field v-model="item.email"…