Vue PWA – Getting started

Author: Jakub Strebeyko

Vue Progressive Web App Tutorial

Recently, Google, one of the biggest proponents of PWA, released Chrome 72 for Android, which supports the long-awaited TWA (Trusted Web Activity) API. It means that from now on, PWA can be distributed via the Google Play Store.

Thanks to Google’s strong advocacy of PWA, it is safe to say that PWA is the future of web applications. In this tutorial series, we are going to explain the core concepts involved in creating PWA Apps with Vue.

What do I need to know to start this course?

This tutorial requires basic knowledge of Vue. If you are new to Vue, please check out our tutorial.

It is short, simple and also free.

I have the basics, how shall I start the course?

Node Package Manager package should be installed on your machine. If you have worked with Vue and have basic knowledge regarding node, you can jump right into the course!

Do I need anything else?

You will need a text editor. I'd recommend Visual Studio Code. Additionally, as we will be using Firebase, we need a Google account.

What are we building?

In this tutorial, we will transform our Agenda App created from scratch in the basic tutorial into a full-fledged Progressive Web App. Lesson after lesson, we are going to add new functionalities - aiming to enhance user's experience progressively is, in fact, the essence of PWA. All the techniques learned here can be successfully applied to in your own projects. Mind that any web app or website can be converted into a PWA - doing so with existing Vue apps is a worthwhile challenge!

Add new event preview

You can download the starter files here!

What is there to be learnt?

    How to:
  1. deploy your project on Firebase
  2. make your app installable
  3. add offline mode support to your app
  4. work offline
  5. decrease load time
  6. add support for iOS devices
  7. audit your app performance & what is a Lighthouse

See what the application we will build together looks like! Live Example


Within this tutorial we are using Material Design for Bootstrap, you can download it for free from here.

Visit our official 5min-quickstart guide to go through the MDB Vue installation process.

If you notice an error, or something below is not clear to you - we invite you to visit our support forum.

Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author