Vue.js Tutorial: Creating a Simple Budgeting App

Complete Vue.js Application Tutorial

This series is designed to give a broader scope than most of the existing Vue.js learning material available while being practical and pragmatic. It will cover the complete development of a personal budgeting application with topics such as dealing with local storage using Vuex and Vue-Router project structure for a mid-size application development workflow (for a solo programmer) communicating between components and modules writing DRY, decoupled Vue.js code building an intelligent, flexible site navigation

This tutorial assumes you have basic familiarity with front end web development and Vue.js.

This are the steps followed to create the app:

• Step 1: Planning Your Application
• Step 2: Data Architecture
• Step 3: Setup & Project Structure
• Step 4: Create & View Accounts
• Step 5: Edit & Delete Accounts
• Step 6: Adding LocalStorage to our Vue.js Application

There are many Vue.js tutorials floating around. Unfortunately, most of the existing content falls into one or two categories. There is entry level content targeted at the absolute Vue.js beginner. And there are tutorials about how to perform independent, specific tasks with Vue.js.

You can find all the related commits regarding this tutorial on GitHub, by Matthias Hager.