Skip to content

Simple Vue.js front end to work with the Splitwise API through a Pizzly instance for OAUTH2.

Notifications You must be signed in to change notification settings


Repository files navigation



My girlfriend and I use the Splitwise app to keep track of all our shared expenses. Since we pay with a shared account we don't actually use the "splitting" feature in splitwise and it takes a ton of clicks in the app to say you paid for equal shares of something. We also only use 4 main categories for our expenses.

I built this basic Vue.js app to simplify our expense tracking given the above.


It's a single form that sends a POST request to the Splitwise API. The front end takes care of the logic that we would have to do numerous clicks in the Splitwise app to accomplish since we pay with a shared card and don't actually need to split the expenses.

To communicate with the Splitwise API securely I used the available OAuth2 authentication. I used Pizzly to handle the complexity of OAuth2 so I didn't have to do it myself. I configured and hosted a Pizzly instance of my own on Heroku, after adding Splitwise as a supported integration in a PR.

This was my first foray into Vue.js, which helped me learn for my work on DigitalHumani's new dashboard. I used vue-material as my UI kit.

Env Vars

cp .example.env.development .env.development
cp .example.env.development .env.production


  • URL of my Pizzly instance on Heroku
cp .example.env .env




  • Customized setup for gh-pages to push to my rented web server


This command builds the Vue.js app for production and then uses the gh-pages library to push the /dist directory to the web server I use for my personal website and projects (for environmental purposes). This could easily be hosted on GitHub pages without additional configuration for the gh-pages plugin.

npm run deploy

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

To Do

  • Add formatting for different amounts (negative/etc)
  • Refactor into components?
  • Make pretty dial like DigitalHumani?


Simple Vue.js front end to work with the Splitwise API through a Pizzly instance for OAUTH2.