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.