Manifest.json not being generated in Vue Cli 3 project for PWA

I'm currently working on a Vue Cli 3 project, and I have the @vue/cli-plugin-pwa plugin properly installed and configured in my vue.config.js file. However, when I try to run vue-cli-service build --modern, I notice that my configuration is not reflected in the generated manifest.json.

I was expecting to see a manifest.json file with the specified icon paths and other settings from my vue.config.js. Am I missing something here? Is there a specific way to make Vue generate the manifest.json according to my configurations?

javascriptvue.jsprogressive-web-appsvue-cli-3

Answer №1

Encountering a similar problem, I decided to execute a production build using either yarn build or npm build. To my satisfaction, I located the elusive manifest.json file within the confines of the dist folder.

Answer №2

Consider incorporating the manifest.json file manually into the public directory, or alternatively, you can duplicate the manifest.json created during npm build and place it in the dist folder within the public directory. Remember to customize it as per your requirements. It is also important to verify if your browser is able to detect the manifest.json file.

Answer №3

In the process of building your project, a manifest.json file is automatically generated. It's important to note that this file should not be directly edited or placed in the public directory.

To make modifications to the manifest.json, the recommended approach is to update the vue.config.js file by including relevant data within the pwa key as shown below:

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

For more information, you can refer to the official documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to fill an array with objects that each contain an internal array using data retrieved from a REST API?

I've been searching for a solution online for about an hour now, but I haven't found the right answer yet. So, I decided to share the response I'm getting from the API with you: [ { "Name": "name1", "Title& ...

javascriptarraysforeachvuejs2

The Vue website on S3 is experiencing a 404 error, but it is still able to

I'm facing an issue with my Vue2 site where everything seems to be working fine for the users, but Google is flagging most of the pages as having 404 errors. Even though when accessing a direct URL like hptts://example.com/example, the page loads corr ...

vue.jsamazon-s3vue-router

Steps to show a particular row in a Vue.js API

I have a question about how to retrieve data from an API and display it in a textbox when the edit button on a specific row table is clicked. The data should include its own id along with other details. I apologize for sharing my code in this format, as I ...

javascriptvue.js

If you encounter a file type that requires special handling, make sure to have a suitable loader configured for it. In the case of VUEJS 2, no loaders

I am facing an issue while trying to import appsync settings for my project Here is the error message: error in ./node_modules/@aws-sdk/signature-v4/dist-es/getCanonicalHeaders.js Module parse failed: Unexpected token (10:30) You may need an appropriat ...

vue.jsvuejs2

Error: jQuery function xxxx is not defined

Upon initial launch of the mobile app homepage, an error is encountered. The error message "TypeError: Jqueryxxxxxx is not a function" is displayed, although the API callback results are shown as "jQuery111309512500500950475_1459208158307({"code":1," ...

javascriptphpjqueryphonegap-buildhybrid-mobile-app

Is it possible to include a class in a .json object for use with CSS?

I am working with a .json object that is displayed using Angular's ng-bind directive: <p ng-bind-html="paragraph" ng-repeat="paragraph in content.sections[0].pages[1].paragraphs"></p> Here is the structure of the .json data: { "header ...

javascriptcssjsonangularjs

Manipulate and synchronize state in Vue using vuex from a separate component

Imagine this scenario: I have two files - App.vue and Home.vue. In App.vue, there is a navigation drawer component, and in Home.vue, there is a toolbar component. The issue arises when I try to toggle the state of the navigation drawer (true or false) from ...

javascriptvue.jsvuejs2vue-componentvuex

What is the simplest method for moving cells between two tables using drag and drop?

Is there a way to select random cells from a table and move them to another table using drag and drop functionality? I'm looking for a library that can help achieve this with JavaScript and PHP. Additionally, I need to save the ID of the selected cel ...

javascriptphpjquery

Enhancing WooCommerce by including additional text following the price for specific shipping methods

I need assistance with including a short message like "(incl. VAT)", following the shipping-price display on the checkout page. The challenge lies in ensuring that this message only appears for a specific shipping method within Zone 1 (zone_id=1), but I&a ...

javascriptphpwordpresswoocommerce

Can an element on a webpage be dynamically assigned an ID using JavaScript or PHP?

Is it possible to dynamically set the ID of an element during runtime of a webpage? Let's consider this scenario - <body id="body1"> Now, I would like to dynamically set the ID of this "body" element using a variable value in PHP code. Is som ...

phpjavascripthtmlclassdynamic

An array of size 10x10 where each new array replaces the previous one

I'm currently working on a function that generates a 10 by 10 array filled with random D's and E's. Below is the code snippet: function generateTenByTenArray(){ var outerArray = []; var innerArray = []; for(var i = 0; i < 10 ...

javascriptarrays

Implementing functionality for changing methods based on Vue.js checkboxes

My web page features a dropdown menu that triggers a specific method to retrieve data based on the selected dropdown option. I am looking to implement a condition that dynamically changes the @change method depending on whether a checkbox is selected. The ...

vue.js

Unable to find module reference "three" at 137

Returning to an older project, I realized that nothing was loading. When I checked the console log, this is what I found: Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". In my ...

javascriptthree.jsskypack-cdn

Use JavaScript to input array elements into a selection of cells in Excel

At this moment, the loop I am executing successfully retrieves the necessary values. However, I am facing challenges when it comes to inserting these array values into a range of cells. I keep encountering the following error message: Error message: "The ...

javascriptarraysexcelforeach

How to retrieve the AngularJS Object in JavaScript to trigger the Bootstrap modal popup

To trigger the logout() function, it should only execute if the value of an AngularJS object within rootscope is true. How can I validate this using JavaScript to check the content of the rootscope object? <body ng-controller="myController"> & ...

javascriptangularjstwitter-bootstrapmodal-dialogrootscope

How to include a variable in a JSON array?

Currently working on a project in Python and I am looking for a way to make changes to this JSON file This is the original data: { "name": "UVIDOCK", "date": "03/14/2018", "cola": "18:18:00", "colb": "6.70000" } I need it to look like this: window.data ...

javascriptpythonarraysjson

Shuffling images in JavaScript using z-index for a dynamic deck effect

My current code stack images like a deck of cards with changing z-Index values to create an animation. However, I am looking to make the animation reverse as well and not just go forward in a linear manner. I'm seeking ideas on how to achieve this wit ...

javascriptimageloopsanimationz-index

if the arguments for a javascript function are not provided

Currently, I am in the process of learning JavaScript through a book called "Visual Quickstart Guide". However, I have encountered a challenge with understanding the logic behind a particular code snippet. In the function definition below, it appears that ...

javascriptajax

Determine whether the values in the array are arranged in ascending or descending order

I'm currently working on a code problem where I need to loop over the values of an array and determine whether they are in ascending order, descending order, or neither. The function I've written so far is not giving me the correct results, but I ...

javascriptarraysloopssortingfor-loop

Is it safe to depend on the attachment order when managing events?

From what I recall, in the pure W3C event model (using addEventListener), there is no guarantee that event handlers will be invoked in the order they have been attached. But what about jQuery's event model? Is it safe to assume the order of attaching ...

javascriptjqueryaddeventlistener