Vue.js 3: Building Reactive UIs

Introduction

Vue.js 3’s Composition API offers a flexible way to build reactive UIs. In this post, we’ll create a reactive todo list component.

Creating a Todo List Component

Use the Composition API to manage state and reactivity.

<script setup>
import { ref } from "vue";

const todos = ref([]);
const newTodo = ref("");

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({ text: newTodo.value, done: false });
    newTodo.value = "";
  }
}

function toggleTodo(index) {
  todos.value[index].done = !todos.value[index].done;
}
</script>

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input
          type="checkbox"
          v-model="todo.done"
          @change="toggleTodo(index)"
        />
        <span :class="{ 'line-through': todo.done }">{{ todo.text }}</span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.line-through {
  text-decoration: line-through;
}
</style>

Conclusion

Vue.js 3’s Composition API makes it easy to build reactive and maintainable UIs. Try combining it with Vue’s ecosystem for even more power!