yup, I realized that after.

I actually did figure it out, if anyone is interested. YOu need to add this to your config.xml file:

<config-file parent="/manifest/application" target="AndroidManifest.xml">
    <meta-data android:name="android.max_aspect" android:value="2.1" />
</config-file>

I’ve packaged my app using Cordova, and it mostly works great. However, since my device is a galaxy s8 it has an unusual aspect ratio (18.5:9), which means I’ve got black bars above and below my app. Is there a way to make the app scale to fill the screen? I know most Android apps are able to scale up to fill that extra screen height, but I’m not sure how to do it in Cordova. The other issue I’m having is that Cordova thinks my app is a game for some reason, as you can see it gives Samsung Game Tools in the bottom left and right corners. These only show up on games. Is there a setting somewhere to fix these issues?

I know this was a while ago, but in case anyone comes along, this is how I got the “subpage” sliding in from the right to work:

<template>
  <div>
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="child-slide"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      transitionName: ''
    }
  },
  beforeRouteUpdate (to, from, next) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'overlap-left' : 'overlap-right'
    next()
  }
}
</script>

<style>
.child-slide {
  width: 100%;
  position: absolute;
  transition: all 0.3s;
}
.overlap-left-enter, .overlap-left-enter-active {
  opacity: 0;
}
.overlap-left-enter-to {
  opacity: 1;
}
.overlap-left-leave-active {
  transform: translate(100%, 0);
}
.overlap-right-leave-active {
  z-index: -1;
  opacity: 1;
  transform: translate(-30px, 0);
}
.overlap-right-enter {
  transform: translate(100%, 0);
}
</style>

When you click outside of a popover to dismiss it, is there a way to prevent the click from firing other events? For example, if I click another form element, I don’t want that element to gain focus, I only want the popover to lose focus. This would also be really handy for q-select when using multiple, since clicking away is the only way to dismiss the dropdown.

I know I can listen for the @open event and add a disabled class to all other form elements, then remove it on @close. Just wondering if there is anything built in to the components themselves.

Anyone else unable to dismiss chips when used with q-dialog-select? I assume you should be able to click the ‘x’ on a chip and remove it from your selections. For me nothing happens. They don’t even seem to work for me in the quasar documentation shown here: http://quasar-framework.org/components/dialog-select.html

So I figured it out. Ad of course, the error was in the fetchData method, which I didn’t even post above for some reason.
The problem was that I was checking LocalStorage to see if data existed before performing the api call. For some reason, having this check in my fetchData method causes the navigation to hang for some reason. Deleting it gives proper behavior. Here’s what I had originally:

fetchdata (requestParams, lastCall) {
  if (LocalStorage.has(requestParams.TYPE)) {
    let localData = LocalStorage.get.item(requestParams.TYPE)
    this.$store.commit('SET_DATA', {type: requestParams.TYPE, data: localData})
    if (lastCall) {
      this.dataLoaded = true
      Loading.hide()
    }
  }
  else {
    var url = 'https://myapi.com/export'
    this.axios.get(url, {
      params: requestParams
    })
      .then((response) => {
        var responseData = JSON.parse(response.data)
        LocalStorage.set(requestParams.TYPE, responseData[requestParams.TYPE])
        this.$store.commit('SET_DATA', {type: requestParams.TYPE, data: responseData[requestParams.TYPE]})
        if (lastCall) {
          this.dataLoaded = true
          Loading.hide()
        }
      })
      .catch((error) => {
        if (error) {
          Toast.create("Can't fetch " + requestParams.TYPE + ' data')
        }
      })
  }
}

Deleting that if/else block and the localStorage check makes things work as expected. However, the problem is now that I have to make an api call every time I change tabs, rather than load local data. Any ideas on how I should check for local data?

I’ve set up my layout with tabs for navigating subroutes as per http://quasar-framework.org/components/tabs.html.

I have it set up like this:

<template>
<q-layout ref="layout" view="hHh Lpr lFf">

<router-view />

<q-tabs slot="footer" inverted class="bg-white">
  <q-route-tab default to="team" slot="title" name="tab-1" icon="list" label="My Team" />
  <q-route-tab to="league" slot="title" name="tab-2" icon="star" label="League" />
  <q-route-tab to="draft" slot="title" name="tab-3" icon="view_comfy" label="Draft"/>
  <q-route-tab to="players" slot="title" name="tab-4" icon="person" label="Players" />
</q-tabs>
</q-layout>
</template>

My issue is that I want to perform an api call to load data on each subroute. I have it set up as per here: https://router.vuejs.org/en/advanced/data-fetching.html. I want to fetch data after navigation. So the desired behavior is that when I click a tab, the tab (and route) becomes active, a loading spinner is shown until the data is loaded. I followed the recommendations on the vue router page, and my subroutes contain this (as well as a method that calls my api to fetch data):

created () {
  // fetch the data when the view is created and the data is
  // already being observed
  this.fetchData()
}

I also call the quasar “Loading” component in my fetchdata method. My problem is that it seems like the navigation doesn’t happen until after the data is loaded. When I click a tab, theres a pause for about 1-2 seconds, then the new tab becomes active. I never see the Loading spinner.

Is this an issue with quasar, or vue-router? Am I just doing something wrong somewhere?