m0dch3n/vue-cli-plugin-cordova

Vue Cli 3 Cordova Plugin

vue-cli-plugin-cordova

Vue CLI 3.x plugin for Apache Cordova.

Integrate Cordova into Vue Cli App

How To

Create Vue App

$ npm install -g @vue/cli
$ vue create my-app
$ cd my-app
$ npm install -g cordova # If cordova is not already installed 

Add the plugin to your vue app.

$ vue add cordova

Usage

Prepare

$ npm run cordova-prepare # prepare for build (you can run this command, when you checkouted your project from GIT, it's like npm install)

Android

$ npm run cordova-serve-android # Development Android
$ npm run cordova-build-android # Build Android
$ npm run cordova-build-only-www-android # Build only files to src-cordova

IOS

$ npm run cordova-serve-ios # Development IOS
$ npm run cordova-build-ios # Build IOS
$ npm run cordova-build-only-www-ios # Build only files to src-cordova

OSX

$ npm run cordova-serve-osx # Development OSX
$ npm run cordova-build-osx # Build OSX
$ npm run cordova-build-only-www-osx # Build only files to src-cordova

Browser

$ npm run cordova-serve-browser # Development Browser
$ npm run cordova-build-browser # Build Browser
$ npm run cordova-build-only-www-browser # Build only files to src-cordova

Electron

$ npm run cordova-serve-electron # Development Electron
$ npm run cordova-build-electron # Build Electron
$ npm run cordova-build-only-www-electron # Build only files to src-cordova

IMPORTANT

• Path rewriting etc does not work under Cordova, that's why it's important to use router 'hash' mode, if you run or build for Cordova. history mode does not work! The plugin already tries to fix this automatically...

• Assets and Scripts in vue's public folder need to have a dynamic path, because depending on dev or production build, you have different bases. In dev it's normally '/' and in production it's 'file:///android_asset/www/'. In other words, if you have i.e. an image under 'public/images/me.jpg', the relative url would be img='images/me.jpg'

• You need some experience with Cordova, to solve many issues, like having the right Java JDK, Android SDK, XTools, Signing an App, Publishing an App etc. If you encounter issues related to Cordova etc, please don't post them this issue tracker.

• If you are upgrading from an older release, please add <hook type="after_prepare" src="../node_modules/vue-cli-plugin-cordova/serve-config-hook.js" /> to your config.xml

• The devserver will run under https from now on, so make sure your rest & api endpoints are available under https, and have a correct CORS setup

What is the plugin doing ?

During installation

During installation, the plugin is setting some important variables, modifying the router mode and executing some cordova commands.

• Setting baseUrl in vue.config.js to '' because in cordova production, files are served from file://android_asset/www/
• Setting cordovaPath in vue.config.js
• Checking if router is available and modify router mode to 'hash' if process.env.CORDOVA_PLATFORM is set
• Adding ignore paths for cordova in .gitignore
• Executing 'cordova create cordovaPath id appName' (cordovaPath, id and appName will be prompted)
• Adding cordova before_prepare hook in config.xml
• Executing 'cordova platform add platform' (platform will be prompted)

In development mode

In development mode (npm run cordova-serve-*), the plugin is starting the dev server, and creating an app with a webview, showing your dev server page.

It is doing this by:

• Adding cordova.js to your index.html
• Defining process.env.CORDOVA_PLATFORM to android, ios, osx, browser or electron
• Starting the Dev Server
• Executing 'cordova clean'
• Executing 'cordova run platform'
• Pointing the cordova config.xml to Dev Server in hook

In Production mode

In production mode (npm run cordova-build-*), the plugin is building the app, with all it's assets and files etc locally in the package. The webview is showing file:///android_asset/www/index.html

It is doing this by:

• Adding cordova.js to your index.html
• Defining process.env.CORDOVA_PLATFORM to android, ios, osx, browser or electron
• Building the app, output to /src-cordova/www
• Executing 'cordova clean'
• Executing 'cordova build platform --release'

Please note

• For a production build, you need to manually sign the app, in order to be able to install it on your device, or publish it in the app store.
• You need to handle cordova's "deviceready" etc in your app
• Cordova Plugins can be added under /src-cordova by executing 'cordova plugin add PLUGIN'
• If you want to debug your build app, using chrome devtools, build your app with 'cordova build platform --debug' and make sure /src-cordova/www has your latest build by running cordova-build-only-www-platform

License

MIT

Credits

Credits go to

• @dekimasoon https://github.com/dekimasoon/vue-cli-plugin-cordova
• @quasarframework https://github.com/quasarframework/quasar-cli

Because my approach for this plugin, was inspired by theirs!

vue-cli-plugin-cordova's Issues

Enable https

When I set

devServer: {
    https: true   
}

in vue.config.js the url in config.xml does still get set to http

Error "Unable to modify router mode..."

When bootstrapping a new application I encountered the following error:

 ERROR  cordova  Cordova only supports router mode: 'hash'
 ERROR  cordova  Unable to modify router mode in src/router.js
 ERROR  cordova  Please modify manually router mode to "mode: process.env.CORDOVA_PLATFORM ? 'hash' : yourNormalRouterMode"

Steps to reproduce:

$ vue create cordova-test-app

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: Yarn

$ vue add @m0dch3n/cordova

[...]
 ERROR  cordova  Cordova only supports router mode: 'hash'
 ERROR  cordova  Unable to modify router mode in src/router.js
 ERROR  cordova  Please modify manually router mode to "mode: process.env.CORDOVA_PLATFORM ? 'hash' : yourNormalRouterMode"

Is this error intended? I think this should only happen when the mode is other that hash or if the router does not specify one, since the default is hash.

Cloning the project

Firstly, thank you for this fantastic package! This repo is worth it's share of gold. :)

This worked perfectly on a new installation, but what about if a project is cloned? It's missing all the node files, Cordova etc.

I figured the steps to get this up and running again would be to run:
1: checkout the project
2: add any global global packages like vuecli & Cordova and any required emulation software and such
3: run npm install in root and inside src-cordova
4: vue add cordova ?
5: run which ever npm script to get the app running

However, I'm getting a no platforms installed issue and when I try to run Cordova based commands such as "Cordova prepare", I get "Current working directory is not a Cordova-based project."

It might be a good to put install steps for existing projects on the read.me?

Build directly debug app from command line

It already is possible running cordova build platform --debug in src-cordova after npm run cordova-build-platform but it seems you have quite done it since I found this in index.js

// cordova build --release (if you want a build debug build, use cordovaBuild(platform, false)

But this would mean modifying the code back and forth

.env not loaded

Hello, is it normal that my".env" file at the root of my project is not loaded?

I would like these variables regardless of mode and platform.

Contents of the .env:

VUE_APP_API_ENDPOINT=http:/127.0.0.1:3333

process.env returns:

{
  NODE_ENV: "development",
  BASE_URL: "",
  CORDOVA_PLATFORM: "browser"
}

VueCLI version: ^3.0.4

Documentation: https://cli.vuejs.org/guide/mode-and-env.html

Thank you in advance for your help!

Add support for browser

Is there any way to run browser as platform?

Thanks

Info.plist file not found

Anyone else running into this issue when compiling for iOS:

Build settings from configuration file '/Users/me/code/myapp/src-cordova/platforms/ios/cordova/build-debug.xcconfig':
    CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = YES
    CODE_SIGN_ENTITLEMENTS = $(PROJECT_DIR)/$(PROJECT_NAME)/Entitlements-$(CONFIGURATION).plist
    CODE_SIGN_IDENTITY = iPhone Developer
    ENABLE_BITCODE = NO
    GCC_PREPROCESSOR_DEFINITIONS = DEBUG=1
    HEADER_SEARCH_PATHS = "$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" "$(BUILT_PRODUCTS_DIR)"
    OTHER_LDFLAGS = -ObjC
    SWIFT_OBJC_BRIDGING_HEADER = $(PROJECT_DIR)/$(PROJECT_NAME)/Bridging-Header.h

/Users/me/code/myapp/src-cordova/platforms/ios/build/emulator/myapp.app/**Info.plist file not found.**
No target specified for emulator. Deploying to iPhone-X, 12.1 simulator

Then it gets suck on this forever.

customizing index.html

Firstly, nice project!

I see that index.html is added to .gitignore. Is it wrong to not ignore it, and edit it to add stuff? I think it's a support feature in Cordova, so just making sure the plugin is friendly with that, or if it might cause a problem?

Cordova Electron Platform

Would it be possible to add electron support

https://cordova.apache.org/docs/en/latest/guide/platforms/electron/index.html

I played around with adding it in a fork of my own and got it working for cordova-build-electron but cordova-serve-electron would not properly use the most up to date version of the app and would instead use the most recent version created with cordova-build-electron.

https://github.com/LLBlumire/vue-cli-plugin-cordova

Cant install the app-release-unsigned.apk

Created new and clean build.

donne 0 coding just the default cli template

1. 'npm run cordova-build-android' -> 'cli project folder'
2. cordova build android --release -> 'inside src-cordova folder'
3. after download apk in cellphone;
   gave permissions and it didnt install

In prod script: process.env.NODE_ENV === "production" returns false

cordova-serve-android is pointing to wrong ip

I have a few virtual network cards, and when serving from android, it's getting the wrong IP, probably from the function address.ip()

When running cordova-serve-android, I see this line: updating cordova config.xml content to http://192.168.56.1:8080 while my actual IP is 10.0.0.4.

This is the output of ipconfig:

Windows IP Configuration


Ethernet adapter VirtualBox Host-Only Network:

   Connection-specific DNS Suffix  . :
   Link-local IPv6 Address . . . . . : fe80::38bb:d8:1abc:b66f%12
   IPv4 Address. . . . . . . . . . . : 192.168.56.1
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . :

Wireless LAN adapter Local Area Connection* 3:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Wireless LAN adapter Local Area Connection* 1:

   Media State . . . . . . . . . . . : Media disconnected
   Connection-specific DNS Suffix  . :

Ethernet adapter VMware Network Adapter VMnet1:

   Connection-specific DNS Suffix  . :
   Link-local IPv6 Address . . . . . : fe80::2130:a805:1ef6:d328%2
   IPv4 Address. . . . . . . . . . . : 192.168.187.1
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . :

Ethernet adapter VMware Network Adapter VMnet8:

   Connection-specific DNS Suffix  . :
   Link-local IPv6 Address . . . . . : fe80::65ed:ae22:2042:7e31%21
   IPv4 Address. . . . . . . . . . . : 192.168.127.1
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . :

Wireless LAN adapter Wi-Fi:

   Connection-specific DNS Suffix  . : Home
   Link-local IPv6 Address . . . . . : fe80::946a:4696:6997:816f%8
   IPv4 Address. . . . . . . . . . . : 10.0.0.4
   Subnet Mask . . . . . . . . . . . : 255.255.255.0
   Default Gateway . . . . . . . . . : 10.0.0.138

I tried configuring "host" in vue.config.js file:

devServer: {
    host: '10.0.0.4'
  }

This fixes npm run serve but is ignored in cordova-serve-android.

I'm happy to PR if you think this is a bug.
Thanks.

Uncaught SyntaxError: Use of const in strict mode on Android <7.0

Steps to reproduce:

• Take a phone with Android <7.0
• npm run cordova-serve-android
• You will see blank screen with message "Uncaught SyntaxError: Use of const in strict mode" in debug console

Devserver and CORS

I am facing an issue when developing with the android dev server with npm start cordova-serve-android.
The problem is that I cannot access domains other than my devserver hostsystem.
When I want to access other domains which do not have access-controll-allow-origin: * enabled the requests ends with cors issues. When my App is build and running on device or simulator everything is working perfectly, because in that case the request is send from the file index.html and not the localhost devserver.

How can I solve this problem? I cannot enable cors on the requested server.

Does it works with Phonegap aswell?

Does this version works with Phonegap aswell please?

Thank you.

Accessing public images from CSS file in production cordova build.

I'm having trouble getting my image paths to work within my CSS files when building my cordova app for production. I have this image path, that compiles correctly through webpack, however because it has a slash at the beginning of the path, my cordova app cannot find the image correctly, as it can't have a trailing slash at the start of the path.

background-image: url('/img/backgrounds/spots/lime.jpg');

I have set publicPath within my vue.config.js: publicPath: ''

Once running on the phone it tries to reference this image:

background-image: url(/img/backgrounds/spots/navy.jpg)

However it requires it to be this filepath:

background-image: url(img/backgrounds/spots/navy.jpg)

How can I make sure that within my cordova production build I don't have the slash at the start of the path. I also cannot remove the slash out of the path within the CSS file, because then webpack will fail to compile all-together.

Hope that makes sense, thanks in advance.

Some way to change app name/title.

Hi. I have some question. Is any way to change generated app name? If I manually change in config.xml after build cli changes name to default.

Sometimes cordova-serve-android doesn't work.

I get this output in the console:

deviceready has not fired after 5 seconds.
Channel not fired: onPluginsReady
Channel not fired: onCordovaReady
Channel not fired: onDOMContentLoaded

As far as I understand something has gone wrong with the hot reload server configuration. I have tried adding and removing the platforms but that didn't work. Do you know of any way to fix this?

Need some clarifications

Hello,

First of all, congratulations for your work!

I tried your plugin. However, for this to work, I have to have my phone on the same wifi as my laptop.
($ npm run cordova-serve-android)

Otherwise a blank page will be displayed. Do you have any explanation for this please?

Moreover, can you detail the points below please?:

• What this means in practice: You need to handle cordova's "deviceready" etc in your app
• Is it possible to do live reloading directly on the phone?
• What is the best solution to develop and test without application directly on the phone in your opinion?

Thank you for your attention.

content src in the config.xml does not change

Hi.
When I first execute the command "npm run cordova-build-ios", the content src value in the cordova config.xml file looks like this:

<content src="index.html" />

But the second time i run the command "npm run cordova-serve-ios", it changes as follows.

<content src="http://192.168.219.109:8080" />
<allow-navigation href="http://192.168.219.109:8080" />

I think it's normal now.
However, I run the command "npm run cordova-build-ios" again after that, the above value will not be reset to the value shown below.

<content src="index.html" />

I think it should change to the original, but it does not.

Is it a bug?
Or did I misunderstand?
(please understand my poor english)

android production build doesn't contain public files

When running cordova-serve-android, I can access a static CSV file in the public folder, but when running cordova-build-android and deploying with cordova run android, the file doesn't exist or isn't accessible in the built app.

I made a repo to help reproduce: https://github.com/syonip/cordova-android-error

BTW cordova-serve-browser and cordova-build-browser both work fine.

command line build/serve ios/android

I'm able to run cordova-serve-browser. But cordova-serve-ios, cordova-serve-android, cordova-build-ios, and cordova-build-android all fail. See errors below. But the build does get far enough to generate the platform file so that I can open the xcworkspace file in Xcode and gradle project in Android Studio, and then manually build and run it.

Also I needed to install the following:

• brew install gradle
• npm install ios-deploy -g

The iOS error is:

 INFO  executing "cordova build ios --release" in folder /Users/jacob/workspace/fc-tc-vue/src-cordova
Building project: /Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/ios/fc.xcworkspace
	Configuration: Release
	Platform: device
User defaults from command line:
    IDEArchivePathOverride = /Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/ios/fc.xcarchive

Build settings from command line:
    CONFIGURATION_BUILD_DIR = /Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/ios/build/device
    SHARED_PRECOMPS_DIR = /Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/ios/build/sharedpch

Build settings from configuration file '/Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/ios/cordova/build-release.xcconfig':
    CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = YES
    CODE_SIGN_ENTITLEMENTS = $(PROJECT_DIR)/$(PROJECT_NAME)/Entitlements-$(CONFIGURATION).plist
    CODE_SIGN_IDENTITY = iPhone Distribution
    ENABLE_BITCODE = NO
    HEADER_SEARCH_PATHS = "$(TARGET_BUILD_DIR)/usr/local/lib/include" "$(OBJROOT)/UninstalledProducts/include" "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" "$(BUILT_PRODUCTS_DIR)"
    OTHER_LDFLAGS = -ObjC
    SWIFT_OBJC_BRIDGING_HEADER = $(PROJECT_DIR)/$(PROJECT_NAME)/Bridging-Header.h

error: archive not found at path '/Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/ios/fc.xcarchive'
** EXPORT FAILED **

CordovaError: Promise rejected with non-error: 'Error code 65 for command: xcodebuild with args: -exportArchive,-archivePath,fc.xcarchive,-exportOptionsPlist,/Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/ios/exportOptions.plist,-exportPath,/Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/ios/build/device'
    at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:30:15)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Then Android error is:

 INFO  executing "cordova clean" in folder /Users/jacob/workspace/fc-tc-vue/src-cordova
Android Studio project detected
ANDROID_HOME=/Users/jacob/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
Subproject Path: CordovaLib
Subproject Path: app
/Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/android/gradlew: Command failed with exit code EACCES
 INFO  executing "cordova build android --release" in folder /Users/jacob/workspace/fc-tc-vue/src-cordova
Android Studio project detected
ANDROID_HOME=/Users/jacob/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
studio
Subproject Path: CordovaLib
Subproject Path: app
/Users/jacob/workspace/fc-tc-vue/src-cordova/platforms/android/gradlew: Command failed with exit code EACCES

Any ideas?

shouldn't src-cordova/node_modules be added to .gitignore ?

That's a pretty big folder, ~18mb and almost 3000 files.. pretty big folder to be checked into a repo

And the root of src-cordova does contain a package.json

Is there a reason why this folder is not ignored, couldn't we just run yarn/npm to get those dependencies?

scripts in index.html, dont run if a route is refreshed and isnt the base

as image show scripts in index.html, dont work if refresh a route...

CORDOVA_PLATORM undefined

In vue.config.js CORDOVA_PLATFORM is undefined so I am unable to check when defining the baseUrl

baseUrl: (process.env.CORDOVA_PLATFORM && process.env.CORDOVA_PLATFORM !== 'browser') ? '' : '/',

Is there a better way other than defining on the package.json scripts as this is duplication of definition?
"cordova-build-android": "CORDOVA_PLATFORM=android vue-cli-service cordova-build-android",

cordova-serve-ios switches to safari on launch

Great plugin. Thanks for your work 😃

cordova-serve-ios opens on my iPhone (6), but as soon as the app opens, it switches over to safari and loads the ip to my local machine. Do you know why it doesn't stay within the app?

Thanks
N

Failed to add plugin - please help. Thanks!

vue add cordova

📦 Installing vue-cli-plugin-cordova...

• [email protected]
  removed 1 package, updated 2 packages and audited 32965 packages in 12.061s
  found 0 vulnerabilities

✔ Successfully installed plugin: vue-cli-plugin-cordova

ERROR SyntaxError: Unexpected string
..\node_modules\vue-cli-plugin-cordova\generator.js:29
'cordova-serve-osx': 'vue-cli-service cordova-serve-osx',
^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at exports.loadModule (..\AppData\Roaming\npm\node_modules@vue\cli\node_modules@vue\cli-shared-utils\lib\module.js:51:12)

In which way do we need to install your plugin?

Hello,

I have just found your plugin and can't wait to try it as I am experiencing this path issue.
What I would like to ask you is, do we install Cordova and then your plugin(which will include the Vue cli3 + vue ui) or do we first need to manually import vue into a new cordova app and then download your plugin?

Also the part I am not sure about is when you speak about the router and the hash. Do we need history mode or will your plugin fix the history mode hash issue(which means we can turn it on)?

Thank you so much for your efforts.

How can assets from cordova/www be referenced?

While testing the browser platform I could not figure out how can the assets included in src-cordova/www be referenced from the vue application.

cordova-serve-android is not working

I tried with a fresh install but the cordova webview is unable to access the dev server ip.

Turning the firewall off did not help. vue-cli-service cordova-serve-android --host 0.0.0.0 did not help neither.

Any idea?

should be the proper vue-cli-plugin-cordova.

Hi @m0dch3n. I tried your cordova plugin and it is awesome!

I should deprecated my plugin, and your plugin should be the plain vue-cli-plugin-cordova.
I think this is the best way for the Vue.js community.

If you are ok, I'll make you the owner of https://www.npmjs.com/package/vue-cli-plugin-cordova so you can publish your plugin there.

Please consider my proposal.

Cannot pass options to `cordova run ios`

Hello thank you for the project!

While developing an app targeting iOS I've incurrend in a limitation of this package.

Since npm run cordova-serve-ios doesn't provide args to the underling cordova run ios
it's not possible to run the app in a specific iOS emulator.
This could be easily achieved with (for example):

cordova run ios --target="iPhone-7, 12.0"

This limitation is similar to the one reported here #26 but in this case I can't work-around
the issue by using the build.json file (because this file is not read by the cordova run ios script).

Would be OK to inject here the args to cordova run ios ?

vue-cli-plugin-cordova/index.js

Lines 34 to 46 in 2e92f33

	const cordovaRun = platform => {
	// cordova run platform
	info(`executing "cordova run ${platform}" in folder ${srcCordovaPath}`)
	return spawn.sync('cordova', [
	'run',
	platform
	], {
	cwd: srcCordovaPath,
	env: process.env,
	stdio: 'inherit', // pipe to console
	encoding: 'utf-8'
	})
	}

Thank you

serve-ios and build-ios encountering build error

I am getting error code 65 with the following commands with the system being unable to locate the xcarchive.

npm run cordova-serve-ios # Development IOS
npm run cordova-build-ios # Build IOS

This is a known issue with cordova being incompatible with xcode's new build method and can be solved by build the cordova ios directly using: cordova run ios --buildFlag='UseModernBuildSystem=0' as a workaround.

A workaround to getting serve working on ios is to do the following:

1. In index.js change:

From:
const getPlatformPathWWW = platform => {
return api.resolve(${cordovaPath}/platforms/${platform}/platform_www)
}

To:
const getPlatformPathWWW = platform => {
return api.resolve(${cordovaPath}/www)
}

2. Run: npm run cordova-serve-android

3. From cordova project root run: cordova build ios --buildFlag='UseModernBuildSystem=0'

4. Open ios project in xcode and run from scode.

5. Hot-Reload should be working on both ios and android

Android application not running

When i deploy application, application installed successfully. But not running. I followed below way
vue cli version: 3.2

vue create test
cd test
vue add vuetify
vue add cordova
npm run cordova-serve-android

This is my repo for your reference
https://github.com/ksankumar/cordova-test

https://github.com/ksankumar/cordova-test/blob/master/Screenshot_20190102-083353_TestApp%5B1%5D.jpg

Cordova-serve-android not workin

Hi,
While i was building the app for android development environment the config file property in src-cordova changed to . The build was failing while i changed the config file to after this the android build doesnot fail and it is deployed to the android device but it does not contain the basic cordova device ready ui not the vuetify uI

can this work with fastlane and the fastlane cordova plugin?

I want to automate as much as possible the deployment process of my ios/android vue-cli apps and I think Fastlane is perfect for this. There's this cordova plugin here https://github.com/bamlab/fastlane-plugin-cordova that I'd like to use.

But reading the docs of Fastlane and of this plugin it looks like it's mostly meant to work with projects built with Android Studio / Xcode and I was wondering if you think or know if it's possible to use it with a regular vue-cli project in combination with your great plugin?

Right now I'm at the point where cordova-serve-android works but I get a white screen when trying to install the unsigned build produced by cordova-build-android

I believe that's because I need to sign it first, although I've read conflicting reports that I should be able to install it on my own device without signing it first (I'm only trying to install the built apk at this point, not yet ready to dabble with publishing it to an app store)

The signing process with Jarsigner and ZipAlight is quite confusing at this point so I thought I could make it a lot easier by letting Fastlane do the heavy lifting.. hence my question now

Hope you have some time to offer some guidance on this.. thanks much!

cordova_plugins.js is not found when serving browser

Please add a CHANGELOG file

Use command line arguments for scripts.

What?

I think it would be easier to specify npm run scripts with command line arguments rather, as it would allow greater diversity in scripts that are runnable.

Example:

As an example I will use a simple add method that take command line arguments in its script:

// add.js
// adds two integers received as command line arguments
function add(a, b) {
    return parseInt(a)+parseInt(b);
}
if(!process.argv[2] || !process.argv[3]) {
    console.log('Insufficient number of arguments! Give two numbers please!');
}
else {
    console.log('The sum of', process.argv[2], 'and', process.argv[3], 'is', add(process.argv[2], process.argv[3]));
}

The script becomes:

"js-add": "node add.js"

To run the script:

npm run js-add 2 3

Giving an output of:

The sum of 2 and 3 is 5

Relevance to vue-cli-plugin-cordova?

Using this method:

npm run cordova-serve-ios

can be replace with:

npm run cordova serve ios

This would be ideal in my situation, as I can't build my ios projects on the command line. So my typical build command would be cordova prepare ios and then I would run the app through xcode. But because your cli commands don't allow for cordova prepare ios I can't do this.

This way would also make adding commands like cordova prepare ios easier.

Please change README to install via "vue add cordova"

Otherwise it'll install the 0.0.4 version..

Admin rights for windows users

Getting following error:

ERROR No platforms installed in "path here\src-cordova"

Things that might be wrong:
folder is not created [ solved, run as administrator on windows]
platforms are not added cause working directory not recognized as cordova based project

implement a service worker?

Excellent complement thanks for sharing,
I am working on a web application that uses a service worker to cache the "run time" images in the local storage, and now I create the "mobile application", but when implementing the cordova add-on, the service worker It does not work because the images are always downloading again, it must be by the https, what could I do?
Greetings from Colombia, forgive my English.

How to add --buildFlag='-UseModernBuildSystem=0'

I find your plugin very helpful since it can realise hot reloading.
Nevertheless, it didn't work for ios devices since cordova is not compatible with the new building system.
Is it possible to add '-UseModernBuildSystem=0'

vue.config.js is completely overwritten instead of appended to

I'm just trying this plugin for the first time and I noticed that following the installation it made modifications to my router.js which is cool, the docs say it will make some modifications to my vue.config.js too but instead of modifying what was there it completely overwrote it. Some of the stuff that was in there is actually vital to my web app and so I'm wondering if this is an indication that these things are incompatible with Cordova.. or should I just restore them?

This is the contents of my vue.config.js before installing this plugin:

const webpack = require('webpack');
const path = require('path');

const plugins = [];

const myProviderPlugin = new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default'],
});

plugins.push(myProviderPlugin);

module.exports = {
  lintOnSave: true,
  configureWebpack: {
    resolve: {
      modules: [path.resolve(__dirname, 'src/spark'), 'node_modules'],
      alias: {
        vue$: 'vue/dist/vue.js',
      },
    },
    plugins,
  },
};

and after

module.exports = {
  baseUrl: '',
  pluginOptions: {
    cordovaPath: 'src-cordova',
  },
};

Do you see anything in the 'before' that is going to cause a problem with Cordova?

I mean to use this app as a PWA on the web, but also be able to build versions for IOS/Android with the aid of this plugin

Thanks for the clarification!

error when run cordova-serve-android (with vuetify plugin)

when I run cordova-serve-android . the application build successfully but it is just show blank page in the android device.

Can we pass args to cordova run/build commands?

We need to pass a buildFlag argument according to this Cordova ios issue: apache/cordova-ios#407

`cordova plugin remove [plugin]` doesn't always work

Recently, specifically, I've attempted using a few plugins that, after build, will not remove. The script will claim to remove them, then end with something like:

Uninstalling 1 dependent plugins.
Uninstalling cordova-plugin-compat from android
Android Studio project detected
Uninstalling phonegap-plugin-speech-recognition from android
Uninstalling 1 dependent plugins.
Uninstalling cordova-plugin-compat from browser
Uninstalling phonegap-plugin-speech-recognition from browser
js-module uninstall called : plugins/phonegap-plugin-speech-recognition/www/browser/SpeechRecognition.js
Uninstalling 1 dependent plugins.
Uninstalling cordova-plugin-compat from ios
ENOENT: no such file or directory, open '/Users/myuser/code/cordova_projects/myproject/src-cordova/platforms/ios/www/cordova_plugins.js'

This happens with various plugins. The only solution ends up being to cordova platform remove and re-add the platform. Please advise.

Properly importing Cordova Plugins

So I've noticed in your docs you mention how to install cordova plugins as usual. I noticed this adds the plugin to the node_modules folder within src-cordova. Could you let me know how to actually import this plugin properly in a .vue file. For example, when trying to:

import BackgroundGeolocation, { ... } from "cordova-background-geolocation-lt";

the plugin itself won't be found because it's not in the node_modules of the main Vue project.

"baseUrl" is not allowed to be empty

this plugin set baseUrl in vue.config.js to '', but on build vue-cli throws error :
"Invalid options in vue.config.js: child "baseUrl" fails because ["baseUrl" is not allowed to be empty]"

Use yarn instead of npm

Is there any particular reason to use npm instead of yarn? @vuejs AFAIK use yarn to manage their projects. I think there are a few benefits, just curious to know what are your thoughts.

(I could take care of migrating to yarn if you will)