Curious, what happens if you put a log statement right at the top of the search function (or trigger a debug point)? It never shows?

What version of Quasar are you using?

Any chance the template code is backwards? This is what I’ve been using (and it works - q-autocomplete then q-search):

  <q-autocomplete v-model="terms" @search="search" @selected="selected" :delay="0" :max-results="25">
    <q-search v-model="terms" placeholder="Search all codes" />
  </q-autocomplete>

Here is part three of the saga, to be tested on a real device. In my main.js I added the following:

// trigger initial setting of the API server ahead of device ready, this catches
// if we're deployed via Web
setApiServer(store, null)

document.addEventListener('deviceready', onDeviceReady, false)
function onDeviceReady () {
  setApiServer(store, device)
}

So far seems to be doing the trick.

Ok, so I might try a bit of a running monologue here to see if it helps anybody else!

I now understand that when using Cordova a global cordova is defined. I am also using a plugin for device information (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/) which registers another global device (which I had to add to the .eslintrc.js).

It is then a matter of doing a lot of checks to determine if the globals are defined before passing them to templates:

function getDevice () {
  if (typeof device !== 'undefined') {
    return device
  }
  return null
}

I guess this is where vue-cordova makes things pretty (everything is accessed via Vue.cordova.* which is pretty convenient). I’m not sure if it is a good or bad idea to use vue-cordova along with Quasar?

The last point I’m stuck on now is where is the first place I can put code that will run after Cordova has ondeviceready. I want to initialize the API server once, after the device plugin has become available, and doing so in a way that doesn’t blow things up when running web native.

Hey folks,

I’m trying to find the right way to check what type of device the Quasar code is running on in order to decide what API server to use.

I’m making use of vue-cordova in order to have access to Vue.cordova. I’d rather not if there is a native “Quasar” way to do this.

My general approach is:

1. Have function that determines the base URL
2. Store the result in a Vuex store
3. On all API calls, load the base URL from the store and then append the path

This is kinda working except I’m having a hard time properly accessing the Cordova outside of .vue files.

In my function determineApiServer() stored in utils.js I check for iOS simulator as follows:

Platform.is.cordova && Vue.cordova && Vue.cordova.device && Vue.cordova.device.isVirtual === true

However this causes a blank screen when running in an emulator (seems to blow-up before any console.log statements can be processed which makes debugging a little tricky.

Anybody doing something similar / have an idea how I can get away from using VueCordova and access cordova from Quasar?

Thanks @rstoenescu, I think this helps me get in a better direction. I guess it might not even be my problem in this case as I tried to transpile from ES6 to ES5 with babel directly and kept getting the same error.

For reference I did get around the problem by including the code directly in a lib folder in my project (after disabling eslint: /* eslint-disable */):

babel node_modules/tesseract.js/dist/tesseract.js --out-file src/lib/tesseract.js
babel node_modules/tesseract.js/dist/worker.js --out-file src/lib/worker.js

Which doesn’t even change the code area that is causing errors with UglifyJS:

# before transpile
im.onload = function (e) {
  return loadImage(im, cb);
};

# after transpile
im.onload = function (e) {
  return loadImage(im, cb);
};

Here was the original error for other’s reference (must be some other build step that makes the change that causes UglifyJS to tank):

# ERROR in js/9.46b186ac762152eeee38.js from UglifyJs
# Unexpected token: operator (>) [js/9.46b186ac762152eeee38.js:197,27]
im.onload = e => loadImage(im, cb);

Will keep investigating as I’d rather not need to include the source directly.

Hey,

Just checking if anybody has tried making use of Babili for minification? I have an app that is (trying to) using OCR via tesseract.js. Works ok except I think the tesseract.js code is ES6 and blows up the default Quasar Webpack UglifyJS step.

Babili seems to be a possible way to get around this except it is super slow and seems to produce output that doesn’t actually run (but no errors!).

Just checking if anybody else has experience with this / has had luck when importing modules that won’t process with UglifyJS.

Thanks!

Cool, thanks @eleina! I’ll investigate going down that path. I was also thinking of trying to just warn the user for starters (i.e. are you sure you want to refresh the page, you’ll lose any unsaved work). Main reason being the app I’m working on has data that is a little sensitive to persist.

Appreciate the suggestion, will let you know how it goes.

I think this is more a generic Vue / client-side problem but thought I’d see if anybody had handy tricks here considering Quasar.

Basically, how do you warn a user that they are doing a hard refresh which will blow away their Vuex / auth state?

I’ve seen some suggestions on using a beforeUnload handler attached to the main app. Anybody have experience, particularly something that would not mess up how the app behaves within Cordova under iOS/Android?

Thanks!

The winner for the moment (have not verified side effects …). I include the following in the view where the autocomplete is loaded:

<style>
.item {
  height: inherit;
  max-width: 95vw;
}

.q-popover .item:not(.two-lines):not(.three-lines):not(.multiple-lines)>.item-content>div:not(.stacked-label):not(.floating-label):not([class^=q-]) {
  white-space: normal;
}
</style>

Ugly due to the required specificity but it works.

I tried adding a max-width: 90vw on the item-content class, however that truncates the line (adds the ... at the end of the line). Applying the width to the list level just reduces the width of the overall list with the text still running off the screen.

Will keep poking around.