I’m developing an app, when the app navigates to a new route it instantly goes to that route and then the app begins loading images and page components. I am not using Lazy loading/code splitting (in routes.js). In Cordova app mode it just takes a few milliseconds to show the images or load the component but it would be nice If the page loaded before navigating to the page.
Generally is it possible to preload and prepare some components before showing them? For instance prepare a q-dialog before user clicks a button to open it, so that the animation is smooth and nice.
How can I do that?
Thanks in advance!

It is just a few months that I got to new Quasar and started using it, and I really like it.
I just find some class names a bit hard to remember because the convention is not consistent.

One example is absolute for position-absolute but if you want to set the position to relative the class name is relative-position. It would be much better if was consistent, I often have to lookup the docs to get it right.

Another example is justify-center knowing this class I expect the other one for centering along the cross axis to be align-center but it is items-center. It confuses me from time to time

@metalsadman Thanks for your suggestion. This is such a common thing that should have happened to many people thus far, I tend to believe it should not be an unresolved issue. Anyway I opened an issue on Quasar’s repo. https://github.com/quasarframework/quasar/issues/7413

Was this problem solved? It is now almost 3 years later and I have the same issue!

Thanks alot @Hawkeye64 I’ve just recently began using Quasar and had problems getting the file paths correctly. Looks like in v. 2 it is easier to deal with assets.
I upgraded and it solved my frustration.

I’m using a thirdparty components that uses some media files (images, audio files, etc.). I should specify what the base url is for those files. For example if i pass to the media prop like so: media="/statics the component will append file name to it to set it as the url of the image or whatever it is (i.e /statics/img.jpg).

I can’t get the files to load correctly. I think I should get the base url of the statics folder at run time and then pass it to the component. Am i right? How should I resolve this?

@jeffatpf Thanks, good point. It didn’t work though, i think this variable is for older versions of Quasar. I searched the docs variables section. it seems to be $input-autofill-color but it doesn’t work. Something might have been changed in newer versions of chrome or there is a bug in Quasar. Or maybe I’m doing something wrong.

@metalsadman Thanks for your input. I don’t want to disable autocomplete. It would be inconvenient for users to be unable to use their browser password managers.
It is actually getting rid of the problem instead of solving it.

Hi,
I’m building a form for login. The chrome autofill for email and password is ruining my UI and I googled a lot but to no avail. I took a look at github issues and saw that it was an issue in beta versions and must have been solved. But now I’m using chrome 83 and I have this issue.

Am I doing something wrong?

Here is the markup

<template>
  <q-form @submit.prevent="login" class="q-gutter-md">
    <q-input color="primary" v-model="email" label="Email" />
    <q-input v-model="password" label="Password" :type="hidePass ? 'password' : 'text'">
      <template v-slot:append>
        <q-icon
          :name="hidePass ? 'visibility_off' : 'visibility'"
          class="cursor-pointer"
          @click="hidePass = !hidePass"
        />
      </template>
    </q-input>
    <div class="text-center q-mt-lg">
      <q-btn type="submit" color="primary" class="full-width">Login</q-btn>
    </div>
    <div class="text-center">
      <q-btn text flat no-caps size="small" class="q-mt-sm">Forgot your password?</q-btn>
    </div>
  </q-form>
</template>

and this is the result