# Mastering Nuxt and Capacitor Integration: A Resource Toolkit

* Create *resources* folder in root directory.
    
* Add *icon.png* with size - 1024x1024 px Add *splash.png* with size - 2732x3732 px
    
* So we have placed icon and splash in resources folder, now we need these in all sizes compatible with our android and ios platforms.
    
* Lets add script to generate it and then *sync* it to platform.
    
* Add the following command to scripts in **package.json** file of nuxt app
    

> "resources": "cordova-res-generator -p android,ios && node resources/sync.js android"

As we see, we have used [**cordova-res-generator**](https://www.npmjs.com/package/cordova-res-generator#installation) so lets install this generator by

> yarn add --dev cordova-res-generator

We have successfully add res-generator now we are ready to go but we still have **node resources/sync.js android**

This will sync the resources to android platform using sync.js, so lets add sync.js in resources where we have added our icon and splash

> [Sync.js](https://github.com/anshcena/blog/blob/main/nuxt-capacitor/sync.js)

Copy the code from above mentioned [Sync.js](https://github.com/anshcena/blog/blob/main/nuxt-capacitor/sync.js) to generate sync.js inside resources.

so our resources will have these 3 :

![Structure resources](https://github.com/anshcena/blog/blob/main/nuxt-capacitor/img/sync%20file.jpg?raw=true align="left")

We are ready to generate and sync now

> yarn resources

🎉 Resources are generated and sync to platfrom - android 🎉

For **iOS** , we can make change in scripts of package.json as **node/sync.js ios**

*Make sure to put logo in splash screen in middle as well as small for better resource generated results and optimized images.*