How to add basic PWA capability to your NuxtJS app

Assuming you have an existing project built with NuxtJS, follow these steps to successfully add basic PWA capability to your app.

1. From the command line and within the root of your project, run the following npm i --save-dev @nuxtjs/pwa
2. The NuxtJS PWA states: If using ssr: false with production mode without nuxt generate, you have to use modules instead of buildModules. Since I am using SSR I added '@nuxtjs/pwa', to the buildModules inside nuxt.config.js
3. Add the following to nuxt.config.js to overwrite the manifest details for your app.

pwa: {
  manifest: {
    name: 'PWA name',
    short_name: 'Name',
    lang: 'en',
    display: 'standalone',
    theme_color: '#000000'
  }
}

4. Make sure you have an icon 512px x 512px named icon.png in the static folder so that when your app is deployed the necessary pwa icons can be generated. I use https://favicon.io/ to generate favicons/icons.
5. Once you have completed the following steps, push your changes to production.
6. To test that the PWA configuration has been successful you can either run the chrome tools lighthouse test or use this PWA tester tool. In both tests I got 100% score for PWA functionality.