No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Uneasy
    U
    • Profile
    • Following 0
    • Followers 0
    • Topics 10
    • Posts 18
    • Best 2
    • Groups 0

    Uneasy

    @Uneasy

    4
    Reputation
    19
    Profile views
    18
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Uneasy Follow

    Best posts made by Uneasy

    • Latest Capacitor + AndroidX and cordova AdMob working with quasar.

      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.

      posted in Useful Tips (NEW)
      U
      Uneasy
    • RE: Latest Capacitor + AndroidX and cordova AdMob working with quasar.

      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 ?

      posted in Useful Tips (NEW)
      U
      Uneasy

    Latest posts made by Uneasy

    • publicPath for dev in V2

      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:

      posted in Framework
      U
      Uneasy
    • RE: Latest Capacitor + AndroidX and cordova AdMob working with quasar.

      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 ?

      posted in Useful Tips (NEW)
      U
      Uneasy
    • RE: Is there a dark mode version for $primary, $secondary, $accent in SCSS?

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

      posted in Help
      U
      Uneasy
    • Stop Electron-Builder from updating ?

      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
      
      posted in Framework
      U
      Uneasy
    • RE: AdMob stuck on testAd

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

      posted in Framework
      U
      Uneasy
    • Latest Capacitor + AndroidX and cordova AdMob working with quasar.

      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.

      posted in Useful Tips (NEW)
      U
      Uneasy
    • q Card and scroll area

      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

      posted in Framework
      U
      Uneasy
    • RE: Q-Select Autocomplete on object

      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
                })
            })
          }
      
      posted in Framework
      U
      Uneasy
    • Q-Select Autocomplete on object

      I am having difficulties to make autocomplete work on dynamic object.
      my Select looks like this :

      <q-select
                  label="Part Number"
                  stack-label
                  :value="items[data.key].partNo"
                  :options="partNo"
                  option-value="partNo"
                  option-label="partNo"
                  use-input
                  outlined
                  dense
                  options-dense
                  @filter="filterFn"
                />
      

      And I have an Array with objects that looks like:

      {
      partNo: '123456',
      orgName: 'xxxx',
      partDesc: 'xxx' 
      },
      {
      partNo: '143566',
      orgName: 'xxxx',
      partDesc: 'xxx' 
      }
      .
      .
      .
      

      obviously function from example wont work:

          filterFn(val, update, abort) {
            console.log(val)
            update(() => {
              const needle = val.toLowerCase()
                this.partNo = this.partNo.filter(
                  v => v.toLowerCase().indexOf(needle) > -1
                )
            })
          }
      

      anyone have some nice ideas for that problem ?

      posted in Framework
      U
      Uneasy
    • Capacitor and SplashScreen

      I am having difficulties to disable splash screen in capacitor.

      I added to App.Vue

      import { Plugins } from '@capacitor/core'
      const { SplashScreen } = Plugins
      SplashScreen.hide()
      

      that didn’t do a thing. I also tried to set in quasar config and/or capacitor.config.json but no joy.

      "plugins": {
          "SplashScreen": {
            "launchShowDuration": 0,
            "launchAutoHide": true,
            "backgroundColor": "#ffffffff",
            "androidSplashResourceName": "splash",
            "androidScaleType": "CENTER_CROP",
            "androidSpinnerStyle": "large",
            "iosSpinnerStyle": "small",
            "spinnerColor": "#999999",
            "showSpinner": true
          }
        }
      

      I have my own component with splash screen, is there any way to disable capacitor splash screen ?

      posted in Framework
      U
      Uneasy