Building a Simple Vue.js Interactive Expense Tracker: A Beginner’s Guide

Written by

FixTechToday

in

In today’s fast-paced world, managing finances effectively is crucial. Whether you’re a student, a freelancer, or a seasoned professional, keeping track of your income and expenses can help you make informed financial decisions, save money, and achieve your financial goals. While there are numerous budgeting apps available, building your own expense tracker offers a unique opportunity to learn fundamental web development concepts, customize the app to your specific needs, and gain a deeper understanding of how these tools work under the hood. This article guides you through creating a simple, interactive expense tracker using Vue.js, a progressive JavaScript framework known for its simplicity and ease of use, perfect for beginners and intermediate developers alike.

Why Build an Expense Tracker with Vue.js?

Vue.js is an excellent choice for this project for several reasons:

  • Simplicity: Vue.js boasts a gentle learning curve, making it accessible for those new to JavaScript frameworks. Its clear syntax and component-based architecture simplify the development process.
  • Reactivity: Vue.js’s reactivity system automatically updates the user interface when data changes, ensuring a smooth and dynamic user experience. This means your expense tracker will update in real-time as you add or edit transactions.
  • Component-Based Architecture: Vue.js promotes breaking down your application into reusable components, making your code organized, maintainable, and scalable.
  • Community and Resources: Vue.js has a vibrant and supportive community, with plenty of documentation, tutorials, and libraries available to help you along the way.

By building an expense tracker with Vue.js, you’ll not only learn practical web development skills but also gain a valuable tool for managing your finances. You’ll understand how to handle user input, manipulate data, and present information dynamically.

Project Overview: What We’ll Build

Our expense tracker will be a single-page application (SPA) that allows users to:

  • Add new expense transactions with details like description, amount, and date.
  • View a list of all transactions.
  • Calculate and display the total expenses.
  • (Optional) Filter transactions by date range or category.

We’ll keep the design simple and focus on functionality, allowing you to easily customize the appearance later. We’ll also use local storage to persist the data, so your expenses are saved even when you close the browser. This project will cover the core concepts of Vue.js, including:

  • Component creation
  • Data binding
  • Event handling
  • Lists and rendering
  • Local storage integration

Getting Started: Setting Up Your Development Environment

Before we dive into the code, let’s set up our development environment. You’ll need the following:

  • A code editor: Visual Studio Code (VS Code) is highly recommended due to its excellent support for JavaScript and Vue.js. Other options include Sublime Text, Atom, or any editor you’re comfortable with.
  • Node.js and npm (Node Package Manager): Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. npm is a package manager that comes with Node.js and allows you to install and manage dependencies for your project. You can download and install Node.js from the official website: https://nodejs.org/.
  • Vue CLI (Command Line Interface): Vue CLI is a powerful tool that simplifies the process of creating and managing Vue.js projects. Install it globally using npm: npm install -g @vue/cli.

Once you have these tools installed, you’re ready to create your project.

Creating a New Vue.js Project

Open your terminal or command prompt and navigate to the directory where you want to create your project. Then, run the following command to create a new Vue.js project using Vue CLI:

vue create expense-tracker

The Vue CLI will prompt you to choose a preset. Select the “default” preset (Babel, ESLint). This will set up a basic Vue.js project with the necessary configurations. After the project is created, navigate into your project directory:

cd expense-tracker

Now, you can start the development server by running:

npm run serve

This will start a development server, and you should see your app running in your browser, typically at http://localhost:8080/. You can now begin building your expense tracker.

Building the Expense Tracker Components

Let’s break down the project into smaller, manageable components. This is a core principle of Vue.js development. We’ll create the following components:

  • ExpenseForm.vue: This component will handle the input form for adding new expenses.
  • ExpenseList.vue: This component will display the list of expense transactions.
  • ExpenseSummary.vue: This component will display the total expenses.
  • App.vue: The main component, which will orchestrate the other components.

1. ExpenseForm.vue

Create a new file named ExpenseForm.vue in the src/components directory. This component will contain a form with fields for description, amount, and date. Here’s the basic structure:

<template>
 <div class="expense-form">
 <h3>Add Expense</h3>
 <form @submit.prevent="addExpense">
 <div class="form-group">
 <label for="description">Description:</label>
 <input type="text" id="description" v-model="description" required>
 </div>
 <div class="form-group">
 <label for="amount">Amount:</label>
 <input type="number" id="amount" v-model.number="amount" required>
 </div>
 <div class="form-group">
 <label for="date">Date:</label>
 <input type="date" id="date" v-model="date" required>
 </div>
 <button type="submit">Add Expense</button>
 </form>
 </div>
</template>

<script>
 export default {
 data() {
 return {
 description: '',
 amount: 0,
 date: ''
 };
 },
 methods: {
 addExpense() {
 // Implement logic to add expense
 }
 }
 };
</script>

<style scoped>
 /* Add your styles here */
</style>

Let’s break down this code:

  • <template>: This section defines the HTML structure of the component.
  • <div class="expense-form">: This is a container for the form.
  • <form @submit.prevent="addExpense">: This is the form element. The @submit.prevent directive prevents the default form submission behavior (page reload) and calls the addExpense method when the form is submitted.
  • <input type="text" id="description" v-model="description" required>: This is an input field for the description. The v-model directive creates a two-way binding between the input field and the description data property in the component’s data. required makes the field mandatory.
  • <input type="number" id="amount" v-model.number="amount" required>: Input field for the amount. v-model.number ensures that the input value is treated as a number.
  • <input type="date" id="date" v-model="date" required>: Input field for the date.
  • <button type="submit">Add Expense</button>: The submit button.
  • <script>: This section contains the JavaScript code for the component.
  • data(): This function returns an object containing the component’s data. We define description, amount, and date as data properties.
  • methods: { addExpense() { ... } }: This object contains the component’s methods. The addExpense method will be called when the form is submitted.
  • <style scoped>: This section contains the CSS styles for the component. The scoped attribute limits the styles to this component only.

Now, let’s add the logic to the addExpense method. This method will:

  1. Create a new expense object with the values from the form.
  2. Emit an event to the parent component (App.vue) to add the expense to the list.
  3. Clear the form inputs.

Update your ExpenseForm.vue script section:

export default {
 data() {
 return {
 description: '',
 amount: 0,
 date: ''
 };
 },
 methods: {
 addExpense() {
 if (this.description.trim() === '' || this.amount === 0 || this.date === '') {
 alert('Please fill in all fields.');
 return;
 }

 const newExpense = {
 id: Date.now(), // Generate a unique ID
 description: this.description,
 amount: this.amount,
 date: this.date
 };
 this.$emit('add-expense', newExpense);
 this.description = '';
 this.amount = 0;
 this.date = '';
 }
 }
};

Here, we are also adding a simple validation to ensure that all fields are filled before submitting. The this.$emit('add-expense', newExpense) line emits a custom event named add-expense, sending the newExpense object as a payload to the parent component (App.vue).

2. ExpenseList.vue

Create a new file named ExpenseList.vue in the src/components directory. This component will display the list of expenses. Here’s the basic structure:

<template>
 <div class="expense-list">
 <h3>Expenses</h3>
 <ul>
 <li v-for="expense in expenses" :key="expense.id">
 <span>{{ expense.description }}</span>
 <span>${{ expense.amount }}</span>
 <span>{{ expense.date }}</span>
 <button @click="deleteExpense(expense.id)">Delete</button>
 </li>
 </ul>
 </div>
</template>

<script>
 export default {
 props: {
 expenses: {
 type: Array,
 required: true
 }
 },
 methods: {
 deleteExpense(id) {
 this.$emit('delete-expense', id);
 }
 }
 };
</script>

<style scoped>
 /* Add your styles here */
</style>

Let’s break this down:

  • <template>: Defines the component’s HTML.
  • <div class="expense-list">: Container for the expense list.
  • <ul>: Unordered list to display expenses.
  • <li v-for="expense in expenses" :key="expense.id">: Uses the v-for directive to iterate through the expenses array (passed as a prop). :key="expense.id" provides a unique key for each list item, which is important for Vue.js to efficiently update the DOM.
  • <span>{{ expense.description }}</span>, <span>${{ expense.amount }}</span>, <span>{{ expense.date }}</span>: Displays the expense details using the double curly braces for data binding.
  • <button @click="deleteExpense(expense.id)">Delete</button>: Adds a delete button for each expense. When clicked, it calls the deleteExpense method, passing the expense’s ID.
  • <script>: Contains the JavaScript code.
  • props: { expenses: { ... } }: Defines a prop named expenses. Props are used to pass data from parent components to child components. We specify that the expenses prop is an array and is required.
  • methods: { deleteExpense(id) { ... } }: Contains the deleteExpense method, which emits a delete-expense event to the parent component, passing the ID of the expense to be deleted.

3. ExpenseSummary.vue

Create a new file named ExpenseSummary.vue in the src/components directory. This component will display the total expenses. Here’s the basic structure:

<template>
 <div class="expense-summary">
 <h3>Total Expenses: ${{ totalExpenses }}</h3>
 </div>
</template>

<script>
 export default {
 props: {
 expenses: {
 type: Array,
 required: true
 }
 },
 computed: {
 totalExpenses() {
 return this.expenses.reduce((sum, expense) => sum + expense.amount, 0);
 }
 }
 };
</script>

<style scoped>
 /* Add your styles here */
</style>

Let’s break this down:

  • <template>: Defines the component’s HTML.
  • <div class="expense-summary">: Container for the expense summary.
  • <h3>Total Expenses: ${{ totalExpenses }}</h3>: Displays the total expenses using the double curly braces for data binding.
  • <script>: Contains the JavaScript code.
  • props: { expenses: { ... } }: Defines a prop named expenses.
  • computed: { totalExpenses() { ... } }: Defines a computed property named totalExpenses. Computed properties are derived from other data properties and are automatically updated when those dependencies change. In this case, totalExpenses calculates the sum of all expense amounts using the reduce method.

4. App.vue (Main Component)

Now, let’s modify the main component, App.vue, which is located in the src directory. This component will orchestrate the other components and manage the data. Replace the existing content of App.vue with the following:

<template>
 <div id="app">
 <h1>Expense Tracker</h1>
 <ExpenseForm @add-expense="addExpense" />
 <ExpenseSummary :expenses="expenses" />
 <ExpenseList :expenses="expenses" @delete-expense="deleteExpense" />
 </div>
</template>

<script>
 import ExpenseForm from './components/ExpenseForm.vue';
 import ExpenseList from './components/ExpenseList.vue';
 import ExpenseSummary from './components/ExpenseSummary.vue';

 export default {
 components: {
 ExpenseForm, 
 ExpenseList, 
 ExpenseSummary
 },
 data() {
 return {
 expenses: []
 };
 },
 mounted() {
 this.loadExpensesFromLocalStorage();
 },
 methods: {
 addExpense(newExpense) {
 this.expenses.push(newExpense);
 this.saveExpensesToLocalStorage();
 },
 deleteExpense(id) {
 this.expenses = this.expenses.filter(expense => expense.id !== id);
 this.saveExpensesToLocalStorage();
 },
 saveExpensesToLocalStorage() {
 localStorage.setItem('expenses', JSON.stringify(this.expenses));
 },
 loadExpensesFromLocalStorage() {
 const storedExpenses = localStorage.getItem('expenses');
 if (storedExpenses) {
 this.expenses = JSON.parse(storedExpenses);
 }
 }
 }
 };
</script>

<style>
 #app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
 }

 .expense-form, .expense-list, .expense-summary {
 margin-bottom: 20px;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 }
</style>

Let’s break this down:

  • <template>: Defines the component’s HTML.
  • <h1>Expense Tracker</h1>: A heading for the application.
  • <ExpenseForm @add-expense="addExpense" />: Renders the ExpenseForm component and listens for the add-expense event. When the event is emitted by the ExpenseForm, the addExpense method in App.vue is called, passing the new expense data.
  • <ExpenseSummary :expenses="expenses" />: Renders the ExpenseSummary component and passes the expenses array as a prop.
  • <ExpenseList :expenses="expenses" @delete-expense="deleteExpense" />: Renders the ExpenseList component and passes the expenses array as a prop. It also listens for the delete-expense event and calls the deleteExpense method in App.vue when the event is emitted by the ExpenseList.
  • <script>: Contains the JavaScript code.
  • import ExpenseForm from './components/ExpenseForm.vue';, import ExpenseList from './components/ExpenseList.vue';, import ExpenseSummary from './components/ExpenseSummary.vue';: Imports the component.
  • components: { ExpenseForm, ExpenseList, ExpenseSummary }: Registers the imported components so they can be used in the template.
  • data() { return { expenses: [] }; }: Initializes an empty array called expenses to store the expense data.
  • mounted() { this.loadExpensesFromLocalStorage(); }: This lifecycle hook is called after the component is mounted (i.e., added to the DOM). It loads the expenses from local storage when the app starts.
  • methods: { ... }: Defines the methods for the component.
  • addExpense(newExpense) { ... }: This method adds a new expense to the expenses array.
  • deleteExpense(id) { ... }: This method removes an expense from the expenses array based on its ID.
  • saveExpensesToLocalStorage() { ... }: This method saves the expenses array to local storage as a JSON string.
  • loadExpensesFromLocalStorage() { ... }: This method loads the expenses from local storage and parses the JSON string back into an array.

Styling the Components (Optional)

To make your expense tracker look more appealing, you can add CSS styles. Here’s a basic example to get you started. You can add more complex styles to personalize the look of your app. Add the following CSS code to the <style scoped> section of each component file (ExpenseForm.vue, ExpenseList.vue, and ExpenseSummary.vue), or add it to the <style> section of the main component, App.vue, to apply global styles:

/* Global Styles for App.vue (Example) */
#app {
 font-family: sans-serif;
 text-align: center;
}

/* Expense Form Styles */
.expense-form {
 margin-bottom: 20px;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
}

.form-group {
 margin-bottom: 10px;
}

label {
 display: block;
 margin-bottom: 5px;
 font-weight: bold;
}

input[type="text"], input[type="number"], input[type="date"] {
 width: 100%;
 padding: 8px;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;
 margin-bottom: 10px;
}

button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}

button:hover {
 background-color: #3e8e41;
}

/* Expense List Styles */
.expense-list {
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
}

.expense-list ul {
 list-style: none;
 padding: 0;
}

.expense-list li {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px;
 border-bottom: 1px solid #eee;
}

.expense-list li:last-child {
 border-bottom: none;
}

/* Expense Summary Styles */
.expense-summary {
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 font-weight: bold;
}

Remember to adjust the styles to your preferences. You can also explore CSS frameworks like Bootstrap, Tailwind CSS, or Vuetify to speed up the styling process.

Testing Your Expense Tracker

Now that you’ve built the basic components, test your expense tracker in your browser. Open your app at http://localhost:8080/. You should be able to:

  • Enter expense details in the form.
  • Add new expenses to the list.
  • See the total expenses update automatically.
  • Delete expenses from the list.
  • Refresh the page and see that your expenses are still there (thanks to local storage!).

If you encounter any issues, double-check your code against the examples provided, and use the browser’s developer tools (usually accessed by pressing F12) to inspect the console for any errors. Common errors include:

  • Typos: Ensure that your code is free of typos, especially in component names, data property names, and method names.
  • Incorrect imports: Verify that you’ve imported the components correctly in App.vue.
  • Data binding issues: Make sure you’re using v-model correctly to bind input fields to data properties.
  • Event handling issues: Double-check that you’re emitting and listening to events correctly between components.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building Vue.js applications and how to fix them:

  • Incorrectly using v-model: v-model is for two-way data binding. Make sure you’re using it on input fields and that the corresponding data property exists in the component’s data.
  • Forgetting to import components: You must import the components you want to use in a parent component. For example, in App.vue, you need to import ExpenseForm, ExpenseList, and ExpenseSummary before you can use them in the template.
  • Not using the key attribute in v-for loops: When rendering lists with v-for, always provide a unique key attribute for each item. This helps Vue.js efficiently update the DOM.
  • Incorrectly passing props: When passing data from a parent component to a child component using props, make sure you’ve defined the props in the child component and that you’re passing the data correctly in the parent component’s template.
  • Not handling events correctly: When emitting and listening to custom events, ensure that you’re using the correct event names and that the data is being passed and received properly.
  • Forgetting to save data to local storage: If you want your data to persist across page reloads, you must save it to local storage. Remember to save the data in the saveExpensesToLocalStorage method and load it in the mounted lifecycle hook.

Enhancements and Next Steps

Once you’ve built the basic expense tracker, you can enhance it with the following features:

  • Categories: Add a category field to your expenses and allow users to filter expenses by category.
  • Date Range Filtering: Implement a date range filter to view expenses within a specific period.
  • Charts and Graphs: Use a charting library like Chart.js or Vue-chartjs to visualize your expenses.
  • User Authentication: If you want to make your app accessible to multiple users, you can add user authentication and store the data in a database.
  • More Advanced UI: Enhance the user interface with more advanced features, such as editing expenses, adding recurring expenses, and setting budgets.
  • Deployment: Deploy your application to a web hosting platform like Netlify or Vercel.

Key Takeaways

This tutorial has guided you through building a simple, interactive expense tracker with Vue.js. You’ve learned about:

  • Component creation and organization.
  • Data binding and reactivity.
  • Event handling and communication between components.
  • Working with lists and rendering data.
  • Integrating with local storage.

By completing this project, you’ve gained a solid foundation in Vue.js development. Remember that practice is key. Try experimenting with different features, customizing the app to your needs, and exploring the vast resources available online to further your knowledge.

FAQ

Q: What is Vue.js?

A: Vue.js is a progressive JavaScript framework for building user interfaces. It’s known for its simplicity, flexibility, and ease of learning.

Q: Why should I use Vue.js for this project?

A: Vue.js is a great choice because it’s easy to learn, has a reactive system for dynamic updates, and uses a component-based architecture for organized code.

Q: How do I store data permanently?

A: In this project, we use local storage to save the expenses in the user’s browser, so they persist even when the page is refreshed.

Q: Can I add more features?

A: Absolutely! This project is a starting point. You can extend it with categories, date filters, charts, user authentication, and more.

Q: Where can I learn more about Vue.js?

A: The official Vue.js documentation is a great resource: https://vuejs.org/. You can also find many tutorials, courses, and community forums online.

Building this expense tracker has provided a hands-on experience in Vue.js, allowing you to see how different components interact, how data flows, and how to create a functional, interactive web application. This project not only equips you with practical skills but also encourages you to explore the world of web development. As you continue to build and experiment, you’ll discover the power and versatility of Vue.js, enabling you to create increasingly complex and impressive applications. Embrace the learning process, experiment with new features, and don’t be afraid to make mistakes – they are invaluable opportunities for growth. The journey of a thousand lines of code begins with a single component, and with each line, you’re not just building an application; you’re building your skills, your understanding, and your future in the world of web development.

More posts