Disable PWA plugin in Vue CLI 3

Question

I'm having some issues with caching my files using the default service worker that comes with VueCLI 3. I would prefer to just use the default browser caching mechanism, but can't seem to disable the PWA plugin as its not in the vue.config.js file. Passing a blank object to the pwa option doesn't work either as the object is merged and not overwritten.

Justin Kahn · Accepted Answer · 2018-10-14T09:01:56.927

46

I resolved this by doing the following:

Removing the registerServiceWorker.js file
removing the import of registerServiceWorker.js from main.js.
removing the PWA plugin from the devDependencies in package.json.

edited Oct 14 '18 at 09:01

answered Oct 14 '18 at 08:35

Justin Kahn

1,311
2
11
16

2

I found that I also had to remove the `manifest.json` file, usually located in the /public directory. – Chase Nov 19 '18 at 19:19
Hello, after following this three step, the service worker cache just won't go away, any hint on how to blow that away on the client side? – Lulu Cheng Mar 04 '21 at 04:10

chickens · Answer 2 · 2020-06-24T21:31:24.517

14

Vue enabled a method to disable pwa for certain builds in version 4. Now you can add --skip-plugins pluginname during your build. This one worked for me just fine:

 npx vue-cli-service build --skip-plugins pwa,workbox

Ref: https://cli.vuejs.org/guide/cli-service.html#skipping-plugins

edited Jun 24 '20 at 21:31

answered Apr 07 '19 at 13:35

chickens

19,976
6
58
55

score 9 · Answer 3 · edited Oct 28 '19 at 15:52

There is an open but accepted proposal to add this to the core functionality: https://github.com/vuejs/vue-cli/issues/3830

EDIT:

Via command line: https://cli.vuejs.org/guide/cli-service.html#skipping-plugins

npx vue-cli-service build --skip-plugins pwa,workbox

Via vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.plugins.delete('pwa');
    config.plugins.delete('workbox');
  }
}

Disable PWA plugin in Vue CLI 3

3 Answers3

Linked