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

Copy the code from above mentioned Sync.js to generate sync.js inside resources.

so our resources will have these 3 :

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.