CODEWITHSUNDEEP
vue.jsprogressive-web-appsvuejs3workbox-webpack-plugin
volume one
volume one

Reputation: 7581

How to add PWA to Vue.js 3 app not created with Vue CLI?

I understand that the go-to plugin to enable PWA on Vue.js is @vue/cli-plugin-pwa, however this seems to be for projects that were created using vue-cli and its version of Webpack + Workbox.

I have a Vue.js 3 app that is being made without using vue-cli. That is, the project was created from scratch with Webpack 5 being installed separately.

Do I still use vue add pwa from vue-cli to enable PWA on this app, or do I have to add it manually step-by-step using a guide like this one?

Upvotes: 1

Views: 1473

Answers (1)

Obaydur Rahman
Obaydur Rahman

Reputation: 848

You can add PWA in any project with Workbox CLI tool.

Install Workbox CLI globally:

npm install workbox-cli --global

Setup the workbox in your distribution (dist) folder using the wizard.

workbox wizard

Add the service worker in your main entry point html file (index.html).


  <script defer="defer">
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js');
      });
    }
  </script>

Build the Vue project and then build the workbox pwa by running:

workbox generateSW workbox-config.js

And you are done!

Note: to automate the build process add the following script in your package.json file.

    "build:pwa": "vue-cli-service build && workbox generateSW workbox-config.js",

Now you can build the project with pwa using:

npm run build:pwa

Learn more about Workbox CLI.

Upvotes: 2

Related Questions