Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 746
alexandernst Avatar asked Nov 25 '18 01:11

alexandernst


People also ask

Does Vue support PWA?

Making your Vue app a PWA​ The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Vue CLI has some utilities for adding this for you. For existing projects, you can run the vue add command to install the PWA plugin for Vue.

How do I register a service worker at Vue?

Default Service Worker Let's start with adding the Vue/PWA plugin to our Vue app (to generate a new app with the Vue CLI, read the docs over here). This will give you an extra file in the /src directory: registerServiceWorker. js . This file is then imported in main.

How to install and invoke PWA Vue CLI plugin?

To install and invoke PWA Vue CLI plugin execute this command: Build your app again in production mode and deploy it locally. Now we can ask Mr. Taster about the PWA factor.

Does Vue CLI 3 require a manifest file?

Especially since the default usecase of Vue CLI 3 is to use the generated index.html, which doesn't require a manifest for anything. Sorry, something went wrong. Thanks. I didn't know that it would be that easy.

Why doesn't the plugin generate a manifest file?

If the path is an URL, the plugin won't generate a manifest.json in the dist directory during the build. The object will be used to generate the manifest.json If the following attributes are not defined in the object, the options of pwa or default options will be used instead.

What is the difference between generatesw and injectmanifest?

'GenerateSW' (default), will lead to a new service worker file being created each time you rebuild your web app. 'InjectManifest' allows you to start with an existing service worker file, and creates a copy of that file with a "precache manifest" injected into it.


1 Answers

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.

like image 118
Jessica Burnett Avatar answered Oct 19 '22 11:10

Jessica Burnett