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.

Sign up to receive updates for new articles.
And spam. Definitely lots of spam.

Entries

Any time you are writing a program more complex than a todo list, it pays to sit down and plan out the application before diving into the code.
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.
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
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
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
Step 6: Adding LocalStorage to our Vue.js Application This is part 6 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application […]
Step 7: Interlude & Refactor This is part 7 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data […]
Step 8: Budgeting This is part 8 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture Step […]
Step 9: Racing Through Budgets This is part 9 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data […]
Step 10: Styling & Navigation This is part 10 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data Architecture […]
Step 11: Finishing Budgets with Vue.js Dynamic Components This is part 11 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application […]
Step 12: Planning for Transactions This is part 12 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data […]
Step 13 – All Aboard the Transaction Train This is part 13 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application […]
Step 14 – User Testing This is part 14 of an 18 part series titled Vue.js Application Tutorial – Creating a Simple Budgeting App with Vue. It is highly recommended that you read the series in order, as each section builds on the last. Step 0: Intro Step 1: Planning Your Application Step 2: Data […]