@@ -42,15 +45,15 @@ In order for you to be able to develop on a device emulator or directly on a pho
1. Detects your machine's external IP address. If there are multiple such IPs detected, then it asks you to choose one. If you'll be using a mobile phone to develop then choose the IP address of your machine that's pingable from the phone/tablet.
2. It starts up a development server on your machine.
3. It temporarily changes the `
diff --git a/docs/src/pages/quasar-cli-vite/developing-cordova-apps/configuring-cordova.md b/docs/src/pages/quasar-cli-vite/developing-cordova-apps/configuring-cordova.md
index ff08aceeafb..37803c65195 100644
--- a/docs/src/pages/quasar-cli-vite/developing-cordova-apps/configuring-cordova.md
+++ b/docs/src/pages/quasar-cli-vite/developing-cordova-apps/configuring-cordova.md
@@ -5,7 +5,7 @@ related:
- /quasar-cli-vite/quasar-config-file
---
-We'll be using Quasar CLI (and Cordova CLI) to develop and build a Mobile App. The difference between building a SPA, PWA, SSR, SSG, Electron App or a Mobile App is simply determined by the "mode" parameter in "quasar dev" and "quasar build" commands.
+Quasar CLI selects the Cordova build target through the mode and target arguments passed to `quasar dev` and `quasar build`. Cordova CLI manages the native project under `/src-cordova`.
There are two configuration files of great importance to your mobile apps. We'll go over each one.
@@ -17,12 +17,12 @@ Some properties from this file will get overwritten as we'll see in next section
## quasar.config file
-Quasar CLI helps you in setting some properties of the mobile Apps automatically (from config.xml): the Cordova "id", app version, description and android-versionCode. This is for convenience so you'll be able to have a single point where, for example, you change the version of your app, not multiple files that you need to simultaneously touch which is error prone.
+Quasar CLI updates the app version, description, and optional Android version code in `config.xml` before Cordova runs. The widget `id` is set when the Cordova project is created and is not rewritten from the Quasar config.
For determining the values for each of the properties mentioned above, Quasar CLI:
1. Looks in the `/quasar.config` file for a "cordova" Object. Does it have "version", "description" and/or "androidVersionCode"? If yes, it will use them.
-2. If not, then it looks into your `/package.json` for "cordovaId", "version" and "description" fields.
+2. If not, it falls back to `/package.json > version` and `/package.json > description`.
```ts /quasar.config file > cordova
cordova: {
@@ -37,13 +37,13 @@ cordova: {
* will be executed after the UI has compiled.
*
* @param context.debug - True if in debug mode
- * @param context.target - The target platform (ios/android)
+ * @param context.target - The target platform
* @returns Array of strings (command parameters)
*
* @default: [ 'build', '--debug'/'--release', '--device', 'ios'/'android' ]
- * @example: ({ isDebug, target }) => [ 'build', `--${isDebug ? 'debug' : 'release'}`, '--device', 'target' ]
+ * @example: ({ debug, target }) => [ 'build', `--${debug ? 'debug' : 'release'}`, '--device', target ]
*/
- getCordovaBuildParams?: (context: { debug: boolean; target: 'ios' | 'android' }) => string[];
+ getCordovaBuildParams?: (context: { debug: boolean; target: string }) => string[];
/**
* Function to return the Cordova output folder after the "cordova build"
@@ -52,31 +52,31 @@ cordova: {
* to the /dist folder.
*
* @param context.debug - True if in debug mode
- * @param context.target - The target platform (ios/android)
+ * @param context.target - The target platform
* @returns string | string[] | undefined - (relative path(s) from /src-cordova)
*
* @default ios: platforms/ios/build/... and android: platforms/android/app/build/outputs
* @example:
- * ({ isDebug, target }) => {
+ * ({ debug, target }) => {
* return target === 'ios'
- * ? `platforms/ios/build/${isDebug ? 'Debug' : 'Release'}-iphoneos
+ * ? `platforms/ios/build/${debug ? 'Debug' : 'Release'}-iphoneos`
* : 'platforms/android/app/build/outputs'
* }
* @example: (when interested in only one platform, leaving the other to the default value)
- * ({ isDebug, target }) => {
+ * ({ debug, target }) => {
* if (target === 'ios') {
- * return `platforms/ios/build/${isDebug ? 'Debug' : 'Release'}-iphoneos`
+ * return `platforms/ios/build/${debug ? 'Debug' : 'Release'}-iphoneos`
* }
* }
* @example: ()
- * ({ isDebug, target }) => {
+ * ({ debug, target }) => {
* if (target === 'ios') {
* // try these two folders
* return [ 'platforms/ios/build/device', 'platforms/ios/build/emulator' ]
* }
* }
*/
- getCordovaBuildOutputFolder?: (context: { debug: boolean; target: 'ios' | 'android' }) => string | string[] | undefined;
+ getCordovaBuildOutputFolder?: (context: { debug: boolean; target: string }) => string | string[] | undefined;
}
```
diff --git a/docs/src/pages/quasar-cli-vite/developing-cordova-apps/cordova-plugins.md b/docs/src/pages/quasar-cli-vite/developing-cordova-apps/cordova-plugins.md
index 9951faab6cc..97f476c2ab6 100644
--- a/docs/src/pages/quasar-cli-vite/developing-cordova-apps/cordova-plugins.md
+++ b/docs/src/pages/quasar-cli-vite/developing-cordova-apps/cordova-plugins.md
@@ -5,7 +5,7 @@ desc: (@quasar/app-vite) How to use the Cordova plugins in a Quasar app.
You can hook into the native device APIs by using [Cordova Plugins](https://cordova.apache.org/docs/en/latest/#plugin-apis).
-## Cordova Plugins
+## Cordova plugins
A few examples of such plugins:
@@ -22,9 +22,9 @@ A few examples of such plugins:
- Vibration
- Statusbar
-## Deviceready Event
+## `deviceready` event
-You'll notice that some Cordova plugins are usable only after the `deviceready` event has been triggered. We don't need to worry about it too much. Quasar listens to this event and takes care of our root Vue component to be mounted **after** this event has been triggered. But if you need some plugin's own variable and that is initialized after `deviceready` you can follow the example of using the plugin device below
+Some Cordova plugins are usable only after `deviceready`. In Cordova mode, Quasar waits for this event before mounting the root Vue application, so component setup and lifecycle hooks can use initialized plugin APIs.
### Caveat
@@ -51,7 +51,7 @@ Let's take a vue file for example:
```
-The reason is simple. Quasar listens for the event then mounts the root Vue component. But before this, the Vue files are imported into the `/src/router/routes.js` file, so the code outside of the default export gets executed.
+Module-level code can still execute while Vue files are imported, before the application mounts. Avoid accessing Cordova plugin globals at module scope. If module-level initialization is unavoidable, listen for `deviceready` explicitly as shown above.
## Using a Cordova Plugin
@@ -71,9 +71,6 @@ cordova plugin add cordova-plugin-battery-status
Now let's put this plugin to some good use. In one of your Quasar project's pages/layouts/components Vue file, we write:
```html // some Vue file
-// remember this is simply an example // only look at how we use the API
-described in the plugin's page // the rest of things here are of no importance
-