Mastering Nuxt and Capacitor Integration: A Resource Toolkit
Step-by-Step Nuxt and Capacitor Integration Resources
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
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.