Advanced Composable Patterns

Welcome to the first lesson of our course on Advanced Composition API and Production Readiness. In this lesson, we will explore advanced patterns for building composables in Vue 3. Composables are a powerful way to organize and reuse logic in your applications, and mastering them is key to writing clean, maintainable, and scalable code.

By the end of this lesson, you will understand how to abstract complex logic into composables, how to use them effectively in your components, and how to leverage advanced patterns such as writable computed properties. This foundation will prepare you for more advanced topics and real-world scenarios as you progress through the course.

Before we dive into advanced patterns, let's briefly remind ourselves what composables are. In Vue 3, a composable is simply a function that uses Vue's Composition API features — like ref, reactive, and computed — to encapsulate and reuse logic.

Composables help you keep your code organized by separating business logic from your components' UI code. For example, instead of repeating the same logic in multiple components, you can write it once in a composable and use it wherever you need. This approach leads to code that is easier to test, maintain, and extend.

Let's take a closer look at the useTodos composable, which is designed to manage the state and logic for a todo list application. This composable uses Vue's ref and computed to manage the list of todos, the current filter, and various derived values.

One important computed property is nextTodoId. This property calculates the next available ID for a new todo item by finding the highest existing ID and adding one. If there are no todos yet, it starts at 1. This ensures that each todo has a unique identifier.

const nextTodoId = computed(() => 
  (todos.value.length ? Math.max(...todos.value.map(t => t.id)) + 1 : 1)
);

For example, if your current todos are:

todos.value = [
  { id: 1, text: 'Buy milk', completed: false },
  { id: 2, text: 'Read book', completed: true }
];

Then nextTodoId.value will be 3.

The composable also provides several functions to manage todos, such as adding, toggling completion, and deleting. A new function, updateTodoText, allows you to update the text of a specific todo by its ID. This is useful for editing existing todos directly from the UI.

function updateTodoText(todoId, newText) {
  const todo = todos.value.find(t => t.id === todoId);
  if (todo) {
    todo.text = newText;
  }
}

This function searches for the todo with the given ID and updates its text property if found.