Vue PWA Plugin - Manifest doesn't use my config attributes - vue.js

Question

It's very strange. I installed the VuePWA-Plugin and configured it in the package.json like this:
"pwa": {
"name": "Poolio",
"themeColor": "#205c94",
"msTileColor": "#205c94",
"display": "fullscreen",
"appleMobileWebAppCapable": "yes",
"appleMobileWebAppStatusBarStyle": "#205c94",
"pwa.iconPaths": {
"favicon32": "./img/icons/favicon-32x32.png",
"favicon16": "./img/icons/favicon-16x16.png",
"favicon96": "./img/icons/favicon-96x96.png",
"appleTouchIcon": "./img/icons/apple-icon-152x152.png",
"msTitleImage": "./img/icons/ms-icon-144x144.png"
}
},
But it doesn't use any of my settings in the manifest.json (beside of the name, but this must be used by another setting, cause it doesn't change, if I change it)
I asked myself where it takes the themeColor and so I searched in the hole app folder for the hexcode #4DBA87, which is written in the manifest. But didn't find anything...
Heres the manifest output:
{
"name": "Poolio",
"short_name": "Poolio",
"theme_color": "#4DBA87",
"icons": [
{ "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "./img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "./img/icons/android-chrome-maskable-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
{ "src": "./img/icons/android-chrome-maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
],
"start_url": ".",
"display": "standalone",
"background_color": "#000000"
}

Answer 1

You can put all your manifest options inside pwa.manifestOptions. It would be something like this inside your vue.config.js:
module.exports = {
pwa: {
manifestOptions: {
name: "App Name",
short_name: "Short Name",
start_url: "./",
display: "standalone",
theme_color: "#000000",
icons: [
{
src: "./favicon.svg",
sizes: "512x512",
type: "image/svg+xml",
purpose: "any maskable",
},
],
},
themeColor: "#4DBA87",
msTileColor: "#000000",
appleMobileWebAppCapable: "yes",
appleMobileWebAppStatusBarStyle: "black",
iconPaths: {
maskicon: null,
favicon32: "./favicon32.png",
favicon16: "./favicon16.png",
appleTouchIcon: null,
msTileImage: null,
},
// configure the workbox plugin
workboxPluginMode: "GenerateSW",
},
};
Check out LinusBorg answers to this issue.

Answer 2

#vue/cli-plugin-pwa plugin internally uses webpack's workbox plugin. The color #4DBA87 you are getting is the default color set by the plugin.
You can read more about this plugin configuration here, https://www.npmjs.com/package/#vue/cli-plugin-pwa
To configure it to your liking via package.json you have to put your configurations inside the vue property. eg:
"vue": {
"pwa": {
"name": "Poolio",
"themeColor": "#205c94",
"msTileColor": "#205c94",
"appleMobileWebAppCapable": "yes",
"appleMobileWebAppStatusBarStyle": "#205c94",
"iconPaths": {
"favicon32": "./img/icons/favicon-32x32.png",
"favicon16": "./img/icons/favicon-16x16.png",
"favicon96": "./img/icons/favicon-96x96.png",
"appleTouchIcon": "./img/icons/apple-icon-152x152.png",
"msTitleImage": "./img/icons/ms-icon-144x144.png"
},
"workboxPluginMode": "InjectManifest",
"workboxOptions": {
"swSrc": "src/service-worker.js",
},
}
}