CODEWITHSUNDEEP
javascriptvue.jsprogressive-web-appsvue-cli-3
alexandernst
alexandernst

Reputation: 15099

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

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?

Upvotes: 10

Views: 6447

Answers (3)

jawira
jawira

Reputation: 4628

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

Upvotes: 0

Akhil Thakur
Akhil Thakur

Reputation: 1

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.

Upvotes: 0

Jessica Burnett
Jessica Burnett

Reputation: 769

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.

Upvotes: 5

Related Questions