DEV Community

Cover image for VueJS PWA assets generator
Julien Calixte
Julien Calixte

Posted on • Updated on

VueJS PWA assets generator

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)

Collapse
 
rylanharper profile image
Rylan Harper

This is awesome!

Collapse
 
ebenoladutemu profile image
Ebenezer Oladutemu

Really helpful post! Thanks for this.

Collapse
 
adizbek1998 profile image
Adizbek Ergashev

Great work, very handy tool.

Collapse
 
as3k profile image
Zachary Guerrero

This has saved me so much time on multiple projects. THANK YOU!!