The Tax Calculator App
In this tutorial we will build an income tax calculator. Why?
Because calculating income tax (at least in Germany) is complicated and people would love an app that solves that problem for them. Besides that, it’s also a opportunity to explore the impact of the PWA features mentioned above.
We will use VueJS for this tutorial, as it comes with a great template which makes it easy to kick off a PWA project. Another reason is, that VueJS is really easy to learn. No prior experience in any other frontend framework required!
Enough theory for now, it’s time to get our hands dirty!
Let’s create the App’s Skeleton
We start-off with creating the basic setup and the file structure of our app. To speed things up, we will bootstrap the app with vue-cli. First, we need to install the vue CLI tool globally.
yarn global add vue-cli
Now we can instantiate the template by
vue init pwa vue-calculator-pwa
We will be prompted to pick a preset — I recommend the following configuration:
? Project name
? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name)
? Project description A simple tax calculator
? Author Fabian Hinsenkamp
? Vue build runtime
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
Vue build configuration we can choose the smaller
runtime option as we don’t need the compiler as the html we write inside our
We don’t add tests here for brevity reasons. If we would set up a project for for production definitely add them.
yarn to install all dependencies. To start the development mode just run
Don’t get confused by all the files in the project — For now we won’t touch most of them. If you want to learn more about the template’s structure check out the
documentation. I can only recommend it!
In the project we will find files with the
.vue extension. It indicates that this file is a single-file vue component. It is one of the Vue’s features. Each file consists of three types of blocks: