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

Jarek Lipski
4 min readMar 9, 2020

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"…
Jarek Lipski

Freelance Full-Stack Developer | Technoblast @ Tech for Bio