1 Vue Nested Lists

by Vladimir 1 min read

This collection is a guide to creating visually stunning nested lists in Vue. It focuses on the UI, demonstrating how to “draw” tree-like structures with connector lines using CSS and pseudo-elements. To bring the interface to life, <TransitionGroup> is used to animate the addition and removal of nodes. To make the component fully customizable, slots are utilized for inserting custom icons (folder/file) that dynamically change based on the state.

Examples

Multi-column to-do application interface with nested tasks and progress bars.

To-Do List Styling

A multi-list to-do application built with Vue.js and styled with Tailwind CSS, featuring nested tasks, progress tracking, and interactive editing capabilities.

See the Pen To-Do List Styling.