TLDR : npx vue-pwa-asset-generator -a {your_512x512_png_source or your_svg_source} -o {your_output_folder}. You're done!
Hi folks!
When I develop for side projects, most of the time I use the stack VueJS with the PWA plugin, CouchDb/PouchDb for my backend and publish my Progressive Web App on netlify. There is a simplicity in this stack I love.
But I've always been struggling with generating the assets to put in the manifest.json and I haven't found any help on the internet. So here we are, I created the generator myself!
It is named vue-pwa-asset-generator! With sharp it was really simple.
So, what does it do? It generates all the assets that exist by default in your public/img folder and the favicon.ico as well as the icons attribute in a manifest.json that you can merge with your actual manifest.json. All you need is one png image first and it does the rest!
Here an example of use, once installed : vue-asset-generate -a logo.png -o img
Hope it helps you too! ๐
Love.
Extra: it now works with svg files too!
https://www.npmjs.com/package/vue-pwa-asset-generator
https://github.com/jcalixte/vue-pwa-asset-generator
Top comments (4)
This is awesome!
Really helpful post! Thanks for this.
Great work, very handy tool.
This has saved me so much time on multiple projects. THANK YOU!!