Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue

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. What is lacking is a guide showing the complete development of a fully functioning Vue.js application. When you are a young programmer, or even when you are learning a new framework or skill, it's important to see how other people do things. How they organize their code. How they tie the different pieces of their application together. And how they manage the development process. That's what I hope to cover in this tutorial.

View a work in progress demo of the budgeting application

Who is this for?

This tutorial assumes you have basic familiarity with front end web development and Vue.js. If you made it through the Vue guide, and can create and run a new application using vue-cli then you should be ready.

Because this is not targeted at absolute beginners I move through the code fairly fast, and focus on concepts and structure more than line by line explanations of code.

How to use this tutorial

As I am writing this tutorial I am logging all of my commits to the public Budgeterium repo on GitHub. I've placed notes for each commit throughout the tutorial so that you can click through and view all of the changes made, or clone the repository from that spot. While writing this tutorial and application I have generally committed code when it makes sense for the tutorial. I tend to commit more frequently when actually writing production code, you might consider that too.

Any time during the code in the tutorial that you see a line containing only ... that means I excluded pre-existing code from that spot for the sake of the tutorial.

Step 2: Data Architecture

The biggest decision to make with our data structure is how the different objects relate to one another. Vue.js focuses on reactive data, but largely leaves modeling the data to the programmer.

Continue reading...

Step 3: Setup & Project Structure

For the sake of this tutorial, I'm going to assume you are at least marginally familiar with modern front end web development and Vue.js. If not, I recommend you go through the Vue.js intro tutorial. It is great and provides a good, quick overview of what Vue is all about. If NPM, Webpack, and ES6 a...

Continue reading...

Step 4: Create & View Accounts

Now that almost all of the project structure is in place it's time to build the first segment of our app, Accounts. (Finally!) The core of this module will be a simple data structure representing a bank or credit account the user holds. Each account will be attached to multiple transactions, and wil...

Continue reading...

Step 5: Edit & Delete Accounts

Now that we can add and view all the existing accounts, it might be tempting to switch over to transactions and let the user create and view those right away. That would certainly feed my need for instant gratification. There is more work to be done with accounts, and we don't want to abandon them u...

Continue reading...

Step 6: Adding LocalStorage to our Vue.js Application

I don't know about you, but I'm tired of retyping account names every time I load or change Budgeterbium. Let's fix that and add some permanency!

We don't want to use a server, so we are relying on storing data in the user's browser. Sure, it has some limitations, but it's easy and somewhat secure...

Continue reading...

Step 7: Interlude & Refactor

We've hit our first real milestone with our application. After a whole lot of blood, sweat, and imaginary tears we have mostly finished a mostly stable accounts module. There is no doubt in my mind that we will add or change it later, but for now it is fully functional. Time to go outside and ta...

Continue reading...

Step 8: Budgeting

Before we dive into our Budgets module let's recap both where we are in our code and how our application will function with regards to budgets.

The road so far

I like to look at things from a user's perspective. At this point they can

  • load the application and see the accounts page by default
  • ...

Continue reading...

Step 9: Racing Through Budgets

It's time for the rubber to hit the road. Much of the core of the budgeting module is intrinsically similar to what we already built over in accounts, so we're going to really race through some of the similar sections. That isn't an excuse to make mistakes, and I'll try not to gloss over new princip...

Continue reading...

Step 10: Styling & Navigation

Want to put some lipstick on this pig? Let's do it. Most of this update is CSS styling. Since that is outside the scope of this tutorial, I'm going to magically tackle it in one commit without boring you with the details here. Skim through the diff, though, because we do move around and change some...

Continue reading...

Step 12: Planning for Transactions

It took 11 articles to get here, but we are finally ready for our last module, transactions. Budgets and accounts are done - for now. While they were mostly independent of one another, transactions is the module that ties everything together. It is where the user will spend most of her time, recordi...

Continue reading...

Step 13 - All Aboard the Transaction Train

We are finally ready to start coding the last module of our application, Transactions.

The good news is that most of the code is nearly identical to code we have already written in Budgets and Accounts, so the first part of this tutorial should go fast. Repetition is good for learning.

The bad n...

Continue reading...

Step 14 - User Testing

Hey! it feels like our application is getting really close to a releasable state here. A very rough, untested beta release. But that's something. What we have is almost usable and possibly even useful. Pat yourself on the back. Or don't, because that's a really strange thing to do.

If a user visit...

Continue reading...