It turns out that adding cordova to an existing vue app is pretty easy. If only I’d known this before trying at least 10 different ways:
First, make sure your environment is setup
npm install -g cordova
npm install -g @vue/cli
Clone your existing repo and cd to its folder
git clone my-cool-app
cd ~/git/my-cool-app
You can now install your project dependencies and start Adding cordova to an existing vue app
npm install
vue add cordova
Next, follow the cordova wizard (it will show when you do vue add cordova):
> Name of folder where cordova should be installed – src-cordova
> Select Platforms: Android, iOS, Browser
To run your new cordova app:
npm run cordova-serve-browser
(urls must be ‘hash’ ones, eg /my-homepage becomes /#/my-homepage)
Next, you can do all the building and testing, using these commands
npm run cordova-serve-android # Development Android
npm run cordova-build-android # Build Android
npm run cordova-serve-ios # Development IOS
npm run cordova-build-ios # Build IOS
npm run cordova-serve-browser # Development Browser
npm run cordova-build-browser # Build Browser
npm run cordova-prepare # prepare for build
Install android system – Adding cordova to an existing vue app to build android apps
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
- First, Install jdk8 (create account at oracle, verify email, login and download)
- Second, Install gradle (brew install gradle – https://gradle.org/install/)
- Third, Install android studio (and pick an skd – https://developer.android.com/studio/install)
- Next, Install android SDK (api level 28). Create a new project (a blank one). Click on the sdk manager icon in the top right. (its not in tools > avd manager!)
- Finally, Install android avd (api level 28). Create a new project (a blank one). Click on the sdk manager icon in the top right. (its not in tools > avd manager!)
Once you have all this, you can emulate and build for the android platform
npm run cordova-build-android
Sign your apk file:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore ~/git/my-cool-app/src-cordova/keys/my-release-key.keystore app.apk alias_name
zipalign:
find ~/Library/Android/sdk/build-tools -name "zipalign" ~/Library/Android/sdk/build-tools/29.0.0/zipalign -v 4 Project1.apk Project1-aligned.apk
You can then use the apk for testing.
To upload into google play store, you need to send an aab. You’ll need to open your code in android studio to do that build:
open android studio (add new project from existing source – your_project/src-cordova/platforms/android)
build > generate signed bundle (dont think this actually signs it though)
** have to upload aab format
https://github.com/apache/cordova-android/issues/610
Install ios system – Adding cordova to an existing vue app to build ios apps
- Install xcode
- npm run cordova-build-ios
- https://www.softwire.com/blog/2016/10/12/submitting-cordova-app-apple-app-store/index.html
- https://developer.apple.com/support/app-store-connect/
Install electron system – build electron apps
- install xcode
- brew install rpm
- cd src-cordova
- cordova platform add electron
- https://www.electron.build/
Sources:
https://github.com/m0dch3n/vue-cli-plugin-cordova
https://www.learningsomethingnew.com/vue-js-vue-cli-3-vuetify-cordova-nano-sql-building-a-cross-platform-app-with-a-local-sql-database-that-can-load-data-from-a-static-csv-file
https://www.softwire.com/blog/2016/10/12/submitting-cordova-app-apple-app-store/index.html
https://developer.apple.com/support/app-store-connect/
https://www.electron.build/
https://github.com/apache/cordova-android/issues/610
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
Check out my other vuejs posts
Great tutorial!!!
I didn’t do quite 10 different ways but close! Thank you so much!
Finally a tutorial that work, and no BS, only what really matters.
Thank you!
glad you like it :)
After adding Vuetify the project render just a white window on android.
Please suggest.
Hi,
after I typed in “npm run cordova-serve-browser” there is an error. The
error means that there is no “vue-cli-service” found. What should I do?
I have installed all the packages which are mentioned.
Thanks for your help.
Hi,
what does this error mean?
Error: Cannot find module ‘vue-cli-plugin-cordova’
Require stack:
– C:UsersSilvieAppDataRoamingnpmnode_modules@vuecli-servicelibService.js
– C:UsersSilvieAppDataRoamingnpmnode_modules@vuecli-servicebinvue-cli-service.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
at Function.Module._load (internal/modules/cjs/loader.js:864:27)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at idToPlugin (C:UsersSilvieAppDataRoamingnpmnode_modules@vuecli-servicelibService.js:145:14)
at C:UsersSilvieAppDataRoamingnpmnode_modules@vuecli-servicelibService.js:184:20
at Array.map ()
at Service.resolvePlugins (C:UsersSilvieAppDataRoamingnpmnode_modules@vuecli-servicelibService.js:170:10)
at new Service (C:UsersSilvieAppDataRoamingnpmnode_modules@vuecli-servicelibService.js:32:25)
at Object. (C:UsersSilvieAppDataRoamingnpmnode_modules@vuecli-servicebinvue-cli-service.js:15:17) {
code: ‘MODULE_NOT_FOUND’,
requireStack: [
‘C:\Users\Silvie\AppData\Roaming\npm\node_modules\@vue\cli-service\lib\Service.js’,
‘C:\Users\Silvie\AppData\Roaming\npm\node_modules\@vue\cli-service\bin\vue-cli-service.js’
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! com.demo.app@1.0.0 cordova-serve-browser: `cross-env CORDOVA_PLATFORM=browser vue-cli-service cordova-serve-browser`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the com.demo.app@1.0.0 cordova-serve-browser script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersSilvieAppDataRoamingnpm-cache_logs2020-03-30T06_48_42_364Z-debug.log
Thank you for your help.
That was awesome thanks! Since my app is greater than 150mb i had to use file extensions, do you know how to access those files with vue/cordova?