Quasar Framework

Uneasy

Maybe someone will find it useful:

Using Quasar /VueJs Framework and Ionic Capacitor.
For Quasar installation and adding Capacitor please refer to official docs:
https://quasar.dev/

Installation:
(Or More how to make quasar work with latest Capacitor and Latest Android Studio (AndroidX)

Once you have project ready( quasar create project-name)
And you have added capacitor mode to quasar( quasar mode add capacitor)
You might notice, when you try to run quasar dev -m capacitor -T android
In When you try to play app in Android studio you get an error:

    Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory)
    from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
	is also present at [androidx.core:core:1.2.0] AndroidManifest.xml:24:18-86 value=(androidx.core.app.CoreComponentFactory).
	Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:5:5-44:19 to override.

There is a ways to get rid of that, but my solution is to just use latest ionic capacitor.
To do it, navigate to src-capacitor in your project and open terminal there nad run:
npm install @capacitor/core@latest @capacitor/cli@latest @capacitor/android@latest
and:
npx cap sync
Now you have to delete src-capacitor/android directory (otherwise error will be still there)
and run again in your MAIN project directory (not src-capacitor):
quasar dev -m capacitor -T android
At this point you should have nicely running app in emulator.

Now let’s add cordova-plugin-admob-free plugin.
in your src-capacitor run:
npm install cordova-plugin-admob-free and npx cap sync
You should then see in the console something like:

  Found 3 Cordova plugins for android
    cordova-admob-sdk (0.24.1)
    cordova-plugin-admob-free (0.27.0)
    cordova-promise-polyfill (0.0.2)
√ update android in 3.21s

If you are missing those extra 2 plugins were installed automatically,
but if you can’t see them, just install them manually same way as above.

Run again quasar dev -m capacitor -T android from your main directory
You will see error in adnroid studio due to non androidx plugin used in admob plugin:
error: package android.support.annotation does not exist import android.support.annotation.NonNull;

In android studio navigate to build-gradle (Module: capacitor-cordova-android-plugins)
and in dependencies add implementation "androidx.annotation:annotation:1.1.0"
So it looks something like:

dependencies {
    implementation fileTree(dir: 'src/main/libs', include: ['*.jar'])
    implementation "org.apache.cordova:framework:$cordovaAndroidVersion"
    // SUB-PROJECT DEPENDENCIES START
    implementation "com.google.android.gms:play-services-base:11.0.4"
    implementation "com.google.android.gms:play-services-ads:11.0.4"
    // SUB-PROJECT DEPENDENCIES END
    implementation "androidx.annotation:annotation:1.1.0"
}

Now navigate to src-capacitor\android\capacitor-cordova-android-plugins\src\main\java\name\ratson\cordova\admob\AdMob.java
Which is where the error is (there is a link to that file in error if you don’t wannat search it)
and change: import android.support.annotation.NonNull; to import androidx.annotation.NonNull;
Now we have our app working again and with cordova admob plugin.

Configure AdMob App ID in Android studio:
Navigate to: src-capacitor\android\capacitor-cordova-android-plugins\src\main\AndroidManifest.xml
and in line <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="$ADMOB_APP_ID"/>
There is a place for you App ID, just replace $ADMOB_APP_ID with your app ID ca-app-pub-xxxxx~xxxx
(I believe that could be set up on plugin installation, but it’s good to know)
Also you might have some other error:

ava.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/gms/internal/zzur;

look into build.gradle (Module: src-capacitor-android-cordova-android-plugins) and change in dependancies play serivces build to “+” like this:

implementation "com.google.android.gms:play-services-base:+"
implementation "com.google.android.gms:play-services-ads:+"

At this point rest will be in your Quasar Component.
You can use something like:

document.addEventListener('deviceready', async () => {
      await window.AdMob.interstitial.prepare({
        id: 'ca-app-pub-xxxxx/xxxxx',  //<--- your ADs ID, has to match your add type
        isTesting: true,
        autoShow: false
      })
      document.addEventListener('admob.interstitial.events.LOAD', () => {
        console.log('Add Loaded')
        window.AdMob.interstitial.show()
      })
      document.addEventListener('admob.interstitial.events.LOAD_FAIL', err => {
        this.error = JSON.stringify(err)
      })
    })

documentation for admob cordova here: https://ratson.github.io/cordova-plugin-admob-free/
Please mind, that when creating AD ID in google admob, it has to be the same type (banner, video, interstitial) as the one you are going to use
otherwise it won’t work, and you will get LOAD_FAIL event triggered all the time.

Uneasy

I couldn’t find a way for that. I also couldn’t call quasar dev or anything related without refreshing gradle, however there is new capacitor implementation, which I didn’t try yet. new quasar app might work fine ?

Uneasy

Since in V2 publicPath for dev is taken from build, how to set it up for dev ?

devServer: {
    publicPath: '/'
  }

that does not work, no matter what it takes it from build:

Uneasy

I couldn’t find a way for that. I also couldn’t call quasar dev or anything related without refreshing gradle, however there is new capacitor implementation, which I didn’t try yet. new quasar app might work fine ?

Uneasy

Is there a better solution for that ? That for example doesn’t work with IE

Uneasy

I have an issue, trying to build project in electron. I google a bit, and seems like there is a issue with newer versions of electron-builder.
I did downgrade it, but everytime I run quasar build -m electron, it updates my electron-builder. How to stop that ?

 app:extension Running "@quasar/dotenv" Quasar App Extension... +0ms
 app:quasar-conf Reading quasar.conf.js +9ms
 app:quasar-conf Extension(@quasar/dotenv): Extending quasar.conf... +19ms
 app:electron-bundle Installing required Electron bundler (electron-builder)... +8ms
 app:spawn [sync] Running "npm install --save-dev electron-builder@^22.4.0" +1ms

Uneasy

Hi, did you figure that out ? I am having same problem. Not sure if it has to be published in play store for ads ?

Uneasy

Maybe someone will find it useful:

Using Quasar /VueJs Framework and Ionic Capacitor.
For Quasar installation and adding Capacitor please refer to official docs:
https://quasar.dev/

Installation:
(Or More how to make quasar work with latest Capacitor and Latest Android Studio (AndroidX)

Once you have project ready( quasar create project-name)
And you have added capacitor mode to quasar( quasar mode add capacitor)
You might notice, when you try to run quasar dev -m capacitor -T android
In When you try to play app in Android studio you get an error:

    Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory)
    from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91
	is also present at [androidx.core:core:1.2.0] AndroidManifest.xml:24:18-86 value=(androidx.core.app.CoreComponentFactory).
	Suggestion: add 'tools:replace="android:appComponentFactory"' to <application> element at AndroidManifest.xml:5:5-44:19 to override.

There is a ways to get rid of that, but my solution is to just use latest ionic capacitor.
To do it, navigate to src-capacitor in your project and open terminal there nad run:
npm install @capacitor/core@latest @capacitor/cli@latest @capacitor/android@latest
and:
npx cap sync
Now you have to delete src-capacitor/android directory (otherwise error will be still there)
and run again in your MAIN project directory (not src-capacitor):
quasar dev -m capacitor -T android
At this point you should have nicely running app in emulator.

Now let’s add cordova-plugin-admob-free plugin.
in your src-capacitor run:
npm install cordova-plugin-admob-free and npx cap sync
You should then see in the console something like:

  Found 3 Cordova plugins for android
    cordova-admob-sdk (0.24.1)
    cordova-plugin-admob-free (0.27.0)
    cordova-promise-polyfill (0.0.2)
√ update android in 3.21s

If you are missing those extra 2 plugins were installed automatically,
but if you can’t see them, just install them manually same way as above.

Run again quasar dev -m capacitor -T android from your main directory
You will see error in adnroid studio due to non androidx plugin used in admob plugin:
error: package android.support.annotation does not exist import android.support.annotation.NonNull;

In android studio navigate to build-gradle (Module: capacitor-cordova-android-plugins)
and in dependencies add implementation "androidx.annotation:annotation:1.1.0"
So it looks something like:

dependencies {
    implementation fileTree(dir: 'src/main/libs', include: ['*.jar'])
    implementation "org.apache.cordova:framework:$cordovaAndroidVersion"
    // SUB-PROJECT DEPENDENCIES START
    implementation "com.google.android.gms:play-services-base:11.0.4"
    implementation "com.google.android.gms:play-services-ads:11.0.4"
    // SUB-PROJECT DEPENDENCIES END
    implementation "androidx.annotation:annotation:1.1.0"
}

Now navigate to src-capacitor\android\capacitor-cordova-android-plugins\src\main\java\name\ratson\cordova\admob\AdMob.java
Which is where the error is (there is a link to that file in error if you don’t wannat search it)
and change: import android.support.annotation.NonNull; to import androidx.annotation.NonNull;
Now we have our app working again and with cordova admob plugin.

Configure AdMob App ID in Android studio:
Navigate to: src-capacitor\android\capacitor-cordova-android-plugins\src\main\AndroidManifest.xml
and in line <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="$ADMOB_APP_ID"/>
There is a place for you App ID, just replace $ADMOB_APP_ID with your app ID ca-app-pub-xxxxx~xxxx
(I believe that could be set up on plugin installation, but it’s good to know)
Also you might have some other error:

ava.lang.NoClassDefFoundError: Failed resolution of: Lcom/google/android/gms/internal/zzur;

look into build.gradle (Module: src-capacitor-android-cordova-android-plugins) and change in dependancies play serivces build to “+” like this:

implementation "com.google.android.gms:play-services-base:+"
implementation "com.google.android.gms:play-services-ads:+"

At this point rest will be in your Quasar Component.
You can use something like:

document.addEventListener('deviceready', async () => {
      await window.AdMob.interstitial.prepare({
        id: 'ca-app-pub-xxxxx/xxxxx',  //<--- your ADs ID, has to match your add type
        isTesting: true,
        autoShow: false
      })
      document.addEventListener('admob.interstitial.events.LOAD', () => {
        console.log('Add Loaded')
        window.AdMob.interstitial.show()
      })
      document.addEventListener('admob.interstitial.events.LOAD_FAIL', err => {
        this.error = JSON.stringify(err)
      })
    })

documentation for admob cordova here: https://ratson.github.io/cordova-plugin-admob-free/
Please mind, that when creating AD ID in google admob, it has to be the same type (banner, video, interstitial) as the one you are going to use
otherwise it won’t work, and you will get LOAD_FAIL event triggered all the time.

Uneasy

Is there any way to make card-section with scroll-area but not fixed height but like 100% ?
I can;t make it work unfortunately. if it’s something other than ‘px’ it shrinks to 0
I want scroll area to be dynamically max height of the card if that makes sense

Uneasy

I did actually figured it out using lodash.
I had to create separate data called options or something and assign that to select options
here is my filtering function

filterFn(val, update, abort) {
      console.log(val)
      update(() => {
        const needle = val.toLowerCase()
          this.partsOptions = _.filter(this.partNo,function(o){
            return o.partNo.val.toLowerCase().indexOf(needle)>-1
          })
      })
    }

Uneasy

@Uneasy

Best posts made by Uneasy

Latest posts made by Uneasy