How to Deploy Vue PWA on Heroku

To deploy a Vue Js Progressive Web Application (PWA) on Heroku is quite easy, but very different from how generic Vue Js applications are deployed on Heroku.
Here's what I gathered when I recently deployed one:

• First, have your PWA ready locally.
• Install the Static CLI Plugin using: heroku plugins:install heroku-cli-static
• Create an app on Heroku: heroku create Take note of the name assigned to your app.
• We need a buildpack to serve our static assets. To set it, run: heroku buildpacks:set https://github.com/hone/heroku-buildpack-static
• Define your static configuration file:

{
  "root": "dist",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

• Build your PWA locally using npm run build
• Deploy using heroku static:deploy
• Open deployed app using heroku open

PS: I was using this explanation here, but the last steps did not work for me, so I devised this to help me out, and all has been fine this far! However, if you followed it and were successful, please let me know where I might have gone wrong.