PWA with Vue JS + Onsen UI [Part 1]

Hi again, readers!

This time we will learn PWA using Vue JS. If you have not known what PWA is, you can read it here. You can find about Vue JS here and the complete documentation here. Beside that, we will use Onsen UI for our app. Onsen UI already has webpack bundle with Vue PWA, so we won’t even need to break a sweat.

$ vue init OnsenUI/vue-pwa-webpack [your-project-name]

You will be asked some question like below:

Then,

cd [your-project]
npm install
npm run dev

We can upload our project to a cloud service, so we can open and install it in our mobile phone. For this project, I use Heroku.

Before we upload our project to cloud service, we should do some set up:

Edit static/manifest.json

{
  "name": "onsen-vue-pwa",
  "short_name": "onsen-vue-pwa",
  "icons": [
    {
      "src": "/static/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "fullscreen",
  "orientation": "portrait",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

Make sure manifest.json already linked in index.html

<link rel="manifest" href="/static/manifest.json">

and viewport has already defined inside head tag in index.html

<meta name="viewport" content="width=device-width, initial-scale=1">

After all set up, you can upload project to Heroku so we can access your localhost:8080 from mobile. You can read the complete tutorial for uploading project to Heroku: here.

Then you can open your web app in your mobile browser, ex: https://onsen-vue-pwa.herokuapp.com/

Go to your browser menu > Add to Home Screen

Next, we will add login function in our app using auth0.

Login or signup to auth0 and follow the steps until you get your Client ID.

That’s will be our environment setup done. In the next article, we will learn how to integrate auth0 with our Vue app.

Thanks for reading! Have a good day ahead!

The beautiful thing about learning is nobody can take it away from you ~ B B King