Using Vue to Build an Interactive Financial Calculator - RealPlanCalc.com
Roughly a year ago I put together an interactive financial calculator using Vue, Plotly, and Bulma. The “The Real Plan Calculator” was built to visualize money and savings over time. The tool allows you to plan for different scenarios and change both present and future assumptions about your financial situation.
I started the calculator with a rough idea of what I wanted to create. I’ve never been into making budgets, but I’ve made quite a few projections. As a result, I had a number of different excel spreadsheets to lean on for inspiration. The general idea was to create forward looking scenarios that I could adjust to get an idea of how my financial future might look over the next couple of years.
Why
When I built the tool I specifically thinking about side hustles and how to estimate the amount of time you have before your savings run dry. The savings buffer I feel comfortable with is a minimum of 20 months and an ideal of 36 months. In other words, I’d want to have at least 20 months of savings to quit my job and pursue a side hustle. You might want more or less depending on your risk tolerance and comfort level.
How it’s built
I built the calculator using Vue 3 and Plotly.js for the charting. I used the Vue CLI and did my best to organize the components, but it was really a project to help me learn Vue. I use Render for hosting and it’s free because it’s a static site. Render connects to the GitHub repo and builds a new version of the site any time I push a change. Frankly, deploying the site was really pretty simple.
Note: This site is also hosted on Render and changes are auto-deployed with GitHub commits.
The logic to do the calculations is built into the various Vue components. I generally prefer to do calculations in Python, but the tool is interactive so it made sense to do them in JavaScript. User input is included in calculations and bound to the charts to make the tool interactive.
A note about Bulma
I’ve used Bulma on a number of different projects and like it. That being said, I’ve recently moved back to Bootstrap for most of my new projects. I’ve noticed that with Bootstrap I have a little less HTML and CSS to get the desired outcome and it’s easier to find solutions when I have problems. I’m not a full time web developer and prefer tools that have more users because that makes it easier to find solutions to problems (that inevitably occur).