Todo List (Refs + List Rendering)

intermediate

By FrontendAtlas Team · Updated Jan 30, 2026

Build a small Todo List in Vue 3 using the Composition API and <script setup>. Users should be able to add tasks, mark them as completed, remove individual tasks, and clear all completed tasks. Framework focus: Vue SFC patterns, ref/reactive state, computed/watch, and v-model bindings.

Vue 3 Composition API with refs and computed List rendering with v-for and keys Immutable style array updates (map/filter) for clarity Basic component-level state management

Requirements

Render a Todo List as the main UI in App.vue.
Use a text input and 'Add' button to create new todos.
Display todos in a list using v-for.
Each todo should have a checkbox to toggle completion and a 'Remove' button.
Provide a 'Clear completed' button that removes all completed todos when clicked.

Expected behavior

Clicking 'Add' with non-empty trimmed text adds a new todo to the list and clears the input.
Checking a todo's checkbox toggles its completed state and visually marks it (line-through).
Clicking 'Remove' deletes that specific todo.
Clicking 'Clear completed' removes all todos where done === true.
An empty state message is shown when there are no todos.

Implementation notes

Use `ref('')` for the controlled input value (newTask).
Store the list of todos in a `ref<Todo[]>([])` where each todo has `id`, `text`, and `done`.
Use `computed` for simple derived state like `hasTodos`.
Implement helpers `addTask`, `toggleTask`, `removeTask`, and `clearCompleted` inside `<script setup>`.
Keep everything in a single App.vue component.

Guides

Shipping Code Under PressurePlaybook JavaScript Problems That Actually Show UpPlaybook Build Great UI in 60 MinutesPlaybook

Preparing for interviews? Use guided tracks for structure, then drill company-specific question sets when you need targeted practice.

Explore interview tracks Browse company questions Open Vue prep path

Files

Select a file

No preview yet. Click “Rebuild preview”.