Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.
In this article, we’ll look at how to create a to-do list app with Vue 3 and JavaScript.
Create the Project
We can create the Vue project with Vue CLI.
To install it, we run:
npm install -g @vue/cli
with NPM or:
yarn global add @vue/cli
with Yarn.
Then we run:
vue create budget-tracker
and select all the default options to create the project.
We also need the uuid package to let us generate unique IDs for our grocery list items.
To do this, we run:
npm i uuid
Create the Budget Tracker
The budget tracker lets us enter our budget and our expense items.
To do this, we write:
<template>
<div>
<form>
<fieldset>
<label>budget</label>
<input v-model.number="budget" />
</fieldset>
</form>
<form @submit.prevent="add">
<h1>add expensse</h1>
<fieldset>
<label>description</label>
<input v-model="expense.description" />
</fieldset>
<fieldset>
<label>cost</label>
<input v-model.number="expense.cost" />
</fieldset>
<button type="submit">add expense</button>
</form>
<p>remaining budget: ${{ remainingBudget }}</p>
<div v-for="(item, index) of expenses" :key="item.id">
{{ item.description }} - ${{ item.cost }}
<button @click="remove(index)">remove</button>
</div>
</div>
</template>
<script>
import { v4 as uuidv4 } from "uuid";
export default {
name: "App",
data() {
return {
expense: {
description: "",
cost: 0,
},
expenses: [],
budget: 0,
};
},
computed: {
expenseValid() {
const { cost, description } = this.expense;
return +cost >= 0 && description.length > 0;
},
remainingBudget() {
const { budget, expenses } = this;
const totalExpenses = expenses
.map(({ cost }) => cost)
.reduce((a, b) => a + b, 0);
return budget - totalExpenses;
},
},
methods: {
add() {
if (!this.expenseValid) {
return;
}
this.expenses.push({
id: uuidv4(),
...this.expense,
});
this.expense = {};
},
remove(index) {
this.expenses.splice(index, 1);
},
},
};
</script>
The first form element has an input field to let us enter the budget.
v-model binds the entered value to the budget reactive property.
The number reactive property converts what we enter to a number.
Similarly, we have the 2nd form element to let us enter the expense items.
It has the description and cost properties.
The add expense button triggers the submit event on the 2nd form and calls the add method to add the expense item to the expenses reactive property array.
The p element renders the remainingBudget computed property, which has the budget minus the total expenses.
And the v-for directive renders the expense items we entered.
In the component object, we have the data method with the reactive properties initialized by return an object with them inside.
We have the expenseValid computed property to check if the expense fields are valid.
remainingBudget computes the budget minus the total expenses calculated from the expenses items.
In methods , we have the add method to add the budget item by calling this.expenses.push .
We generate a unique ID for each entry with the uuidv4 function.
The remove method removes an expenses item by its index with splice . It’s called the remove button when we click on it.
Conclusion
We can create a budget tracker app easily with Vue 3 and JavaScript.
