Back
Building a ToDo App With Vue 3 Composition API
The Composition API was a significant advancement in Vue 3— let's learn about it by using it to build a simple todo app.
In this article, we’ll be building a task tracker with Vue 3 Composition API. Here is the link to the application demo.
What is the Composition API?
As an alternative to the Options API, a new way to create Vue apps was introduced in Vue 3. It is a functional-based API that enables developers to create Vue components without using declarative functions by employing imported functions.
Why Use Composition API?
Due to the logical data distribution among numerous options, scaling a large Vue application that uses the Optional API can be highly frenetic and demanding. However, the Composition API corrects this by putting all the data that has been divided into options together, making them more flexible and easier to comprehend.
Composition Hooks
The Composition API comes with many custom hooks, some of which we’ll be using in this article. Before hopping in, let's familiarize ourselves with the hooks and their uses:
Ref: The ref hook is used to create a local state.
Watch: The watch hook initiates an event as soon as a change in a reactive state is noticed.
OnMounted: The onMounted hook is a lifecycle hook that registers a callback immediately after the component is mounted.
Prerequisites
To follow along with this tutorial, you’ll need to first clone the stater file from Github.
Setting Up Work Environments
After cloning the repo from Github, let’s navigate to the cloned project directory and run the command below in our terminal to initialize yarn for the project and also run the development server:
yarn && yarn dev
Creating Todo Functionalities
With our project initialized with yarn and running in the browser, we can start creating some basic functionalities.
Initializing Global Variables
In this section, we’ll be initializing some global variables that we’ll use later in our application. First, let’s replace the entire App.vue
with the code block below:
In the code block above, we're initializing our global variables. The setup attribute added to the
In the code block above, we’re pushing an object into the todos
array containing a todo
and done
property whenever the user creates a todo. We’re also checking for empty inputs.
The unshift
method adds the current item to the beginning of the array.
Deleting Todos
Let’s give our users the ability to remove unwanted todos from their list. Next, we’ll add the code below the addTodo
function in the the <script>
tag:
In the code block above, we’re filtering through the todos array and returning a new array without the todo passed to it.
Adding Todos to Browsers’ Local Storage
We want to persist our user’s data to the browser’s local storage to avoid losing it on page refresh and reload. To achieve this, we’ll add the code below the deleteTodo
into the <script>
tag:
In the code block above, we’re adding a newTodoValue
to the todos
object in the browser’s local storage by listening to changes in the todos array. We’re also setting the deep property to true to make our watch function listen further in the array for the slightest change.
Retrieving Todos from Browsers’ Local Storage
Finally, let’s retrieve our todos from the browser's local storage whenever our page is mounted. To achieve this, we’ll copy and paste the function below into the <script>
tag:
In the code block above, we’re getting the todos from the browser's local storage whenever the page is mounted, and returning an empty array if the local storage is empty.
Building User Interface
In the previous section, we did a setup of logic and functionalities for our task tracker. Let’s put all those into our user interface.
Handling Todo Input Event
In this section, we’ll be using the logic created earlier to retrieve and store our user’s input data:
In the code block above, we’re passing the user’s data from the input text into the addTodo
function. The addTodo
function adds this data to our todo array in our script
tag.
Displaying the Todo List
After adding the todo to our todos
array, we should visualize it in our UI. To achieve this, we’ll copy and paste the code below the create-task
section:
In the code block above, we’re looping through the todos
array to display each todo and a checkbox to complete the task. We’re also calling the deleteTodo
function to delete a particular todo from the list, and displacing a text if the todos
array is empty.
With our progress in this article, we’ve been able to achieve the results below:
Resources
Here is the link to the full source code on Github.
Conclusion
In this article, we’ve learned how to use the most popular Composition API hooks. We’ve also used the Vue Composition API to conduct some basic operations ranging from creating, retrieving, and deleting data. Due to its hook-based simplicity, the Composition API will always be the best and most significant feature in Vue 3.
Visit the Official Documentation for more information on other Vue's Composition API Hooks.
if(window.strchfSettings === undefined) window.strchfSettings = {};
window.strchfSettings.stats = {url: "https://pieces-app.storychief.io/en/building-a-todo-app-with-vue-3-composition-api?id=197796890&type=26",title: "Building a ToDo App With Vue 3 Composition API",id: "f48cd0d8-d254-4e17-a18e-3d20939412eb"};
(function(d, s, id) {
var js, sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {window.strchf.update(); return;}
js = d.createElement(s); js.id = id;
js.src = "https://d37oebn0w9ir6a.cloudfront.net/scripts/v0/strchf.js";
js.async = true;
sjs.parentNode.insertBefore(js, sjs);
}(document, 'script', 'storychief-jssdk'))