Expense Tracker

An expense tracker app built with Vue 3 (composition API).

Functions

• Add and remove income/expenses
• Track balance
• Save data to local storage

My process

Built with

• Vue
• PrimeVue (toast component)

What I learned

• Understanding how to declare custom events using the defineEmits() macro.

<script setup>
const emit = defineEmits(['transactionDeleted']);

// Delete transaction
const deleteTransaction = (id) => {
	emit('transactionDeleted', id);
};
</script>

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Notes

Tutorial: Vue 3 & Composition API - Full Project