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! 😃


Extra: it now works with svg files too!

This post is also available on DEV.