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

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.

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.

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...