A Progressive Web App in Vue Tutorial , Part 1 — The Vue App

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 vue-calculator-pwa
? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name) vue-calculator-pwa
? 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

For the Vue build configuration we can choose the smaller runtime option as we don’t need the compiler as the html we write inside our *.vue files is pre-compiled into JavaScript at build time.

We don’t add tests here for brevity reasons. If we would set up a project for for production definitely add them.

Next, run yarn to install all dependencies. To start the development mode just run yarn start.

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: