Vue Cli 3 project won't generate manifest.json (PWA)

Question

I have a Vue Cli 3 project with @vue/cli-plugin-pwa plugin installed and configured (in vue.config.js), but when I run vue-cli-service build --modern no manifest.json is generated based on my config.

I'm expecting to see a manifest.json that would contain, at the very least, the paths of the icons I specified. Maybe also the settings that I put in the vue.config.js.

Am I doing something wrong or maybe my expectation of how the plugin should work doesn't match the actual behavior?

How am I supposed to make Vue generate my manifest.json?

Bengal

Did you choose _ PWA support_ option while initialing the app with vue create <app-name> ? – Crichton

@AdamOrlov I'm almost sure I did, but is there a way I can check? – Bengal

Well I'd say there should be an info in your package.json. Any way besides manifest.json also registerServiceWorker.js file should be created. Do you have it? – Crichton

Yes, I do have the registerServiceWorker.js. I also checked the Vue UI, and it states that PWA component is enabled, which means that the project supports PWA. So, why Vue isn't generating the manifest.json? – Bengal

The file should be located in public folder. Did you check there? – Crichton

Yes, but there is no such file in that folder (nor any other folder, believe me, I looked a thousand times). – Bengal

I see,... hmm 🤔 Can you update Vue CLI 3 to the newest version and create a new project on a side? Just to check if a new project will create manifest.json? – Crichton

I created a new project, selected manual config, then enabled PWA. I did saw a file called manifest.json in the public folder of the newly generated project. But then I edited the pwa section of the vue.config.js file and changed the name of the app, and ran yarn vue build. The result (in the dist folder) contained a manifest.json file, but it had the "old" project name instead of the one that I typed in the vue.config.js. Which means that the build process just blindly copies whatever there is in the public folder (including the manifest.json file) instead of generating it. – Bengal

🤔 Man I can't think of anything more. I would post an issue on [github PWA plugin:]("github.com/vuejs/vue-cli/issues") maybe there someone wille have better knowledge 🙁 – Crichton

found this: github.com/vuejs/vue-cli/issues/3383 - seems status of manifest.json is not clear! IMO it should be generated, but is not... – Dullish

Having the same issue. Generated a new project with latest CLI. No manifest.json. I do have the service worker so PWA was enabled. – Macknair

Answer 1

I had the same issue. I ran a production build: yarn build or npm build and found the manifest.json file in the dist folder.

Malleable

Same issue. So if we need to change manifest.json, we do directly in the dist folder? – Livraison

@Livraison My app is working being the manifest.json in the dist folder, so I guess that's the correct location now – Isidor

Answer 2

try Adding manifest.json manually under public file or you can also copy the manifest.json generated after npm build under the dist folder into the public file and then edit it according to your needs. Also check if your browser is detecting the manifest.json or not.

Hiltonhilum

if you go through the official doc you cannot access manifest.json in development mode. If you wish to change the configuration, it is handled via the PWA property in vue.config.js file. You can refer to cli.vuejs.org/core-plugins/pwa.html#configuration the doc – Hiltonhilum

Answer 3

manifest.json is generated each time you build your project, it shouldn't be modified directly or added in public dir.

Instead, in order to update manifest.json, you should modify vue.config.js and add pertinent data under pwa key.

// vue.config.js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pwa: {
    name: 'My nice pwa app',
    short_name: 'Nice',
    theme_color: "#4DBA87",
    icons: [
      {
        src: "./img/icons/android-chrome-192x192.png",
        sizes: "192x192",
        type: "image/png"
      }
      // etc ...
    ]
    // etc ...
  }
})

Source: https://cli.vuejs.org/core-plugins/pwa.html#configuration

Quaint