Is there a way to do this nowadays with v.015.11 or newer?

Hey Quasar folks,

We are using the formidable QSelect component to create a facet search type of UI. Our issue only is performance: Whenever the entries inside the QSelect popover exceed >500 entries, there is a noticable lag until the popover appears (see this screencast video). The data is server-fetched on mount, not loaded on-fly.

This becomes critical with entries above >1000. Since there is no feedback for the user (loading spinner, anything) after the click on the select element, usability really suffers.

• Is there a way to a) enhance performance or b) include a loading state?
• If b), a loading spinner (or something similar) would be great inside an already open popover.

Does anyone have an idea on how to achieve this? It would be very much appreciated!

Thanks a lot,
Arjan

Solved. It was actually a typo in the animations setting, which apparently caused this error.

Re: Inconsistency in the 0.15.3 doc concerning Support IE

Came across this post as I am having a strange build error related to supportIE. I have created builds before in my project, now it seems that the supportIE value in quasar.conf.js cannot be found. The funny thing is that I never changed the setting (I don’t need IE support), so I am surprised why this is popping up suddenly.

My quasar.conf.js looks like this:

module.exports = function (ctx) {
  return {
    plugins: [
      'i18n'
    ],
    css: [
      'app.styl'
    ],
    extras: [
      // ctx.theme.mat ? 'roboto-font' : null,
      // 'material-icons'
      'ionicons'
      // 'mdi',
      // 'fontawesome'
    ],
    supportIE: false,
    vendor: {
      add: [],
      remove: []
    },
    build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      vueCompiler: true,
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      // useNotifier: false,
      extendWebpack (cfg) {
      }
    },

I tried both options mentioned by @Sweetyy above, no changes. I am using CLI version 0.15.11.

Anybody has an idea how to overcome this? Thank you!

Thanks a lot for this @PeterHewat ! I was having the exact same problem and solved it with your instructions.

Solved, actually don’t know what the problem was. I basically reinstalled all packages which solved the problem.

Hello everyone,

I know that this is probably due to my faulty setup, but since the error I am getting is related to the quasar-extras package, I thought I’d ask if anyone can help out.

After updating packages (which are all now up to date), my app does not compile with this error message:

ERROR in ./node_modules/css-loader?sourceMap!./node_modules/postcss-loader/lib?sourceM
ap!./node_modules/quasar-extras/ionicons/ionicons.css
Module build failed: Error: No PostCSS Config found in: /Users/.../Git Repositories/Haller/node_modules/quasar-extras/ionicons
    at /Users/.../Repositories/Haller/node_modules/postcss
-load-config/index.js:51:26
    at <anonymous>
 @ ./node_modules/quasar-extras/ionicons/ionicons.css 4:14-121 13:3-17:5 14:22-129

I am receiving multiple (supposedly similar) errors where no PostCSS config is found (also for the material fonts and some external plugins).

Does anyone know what to do in this case? I am a JS beginner, the app itself was running fine in dev mode for months.

This is my npm list output:

quasar-app@0.0.1 
├── @kazupon/vue-i18n-loader@0.2.1
├── autoprefixer@6.3.1
├── axios@0.17.1
├── babel-core@6.26.0
├── babel-eslint@8.2.1
├── babel-loader@7.1.2
├── babel-plugin-transform-runtime@6.23.0
├── babel-preset-es2015@6.24.1
├── babel-preset-stage-2@6.24.1
├── babel-runtime@6.26.0
├── colors@1.1.2
├── connect-history-api-fallback@1.5.0
├── css-loader@0.28.8
├── es6-promise@4.2.2
├── eslint@4.15.0
├── eslint-config-standard@11.0.0-beta.0
├── eslint-friendly-formatter@3.0.0
├── eslint-loader@1.9.0
├── eslint-plugin-html@4.0.1
├── eslint-plugin-import@2.8.0
├── eslint-plugin-node@5.2.1
├── eslint-plugin-promise@3.6.0
├── eslint-plugin-standard@3.0.1
├── eventsource-polyfill@0.9.6
├── express@4.16.2
├── extract-text-webpack-plugin@3.0.2
├── file-loader@1.1.6
├── friendly-errors-webpack-plugin@1.6.1
├── glob@7.1.2
├── html-webpack-plugin@2.30.1
├── http-proxy-middleware@0.17.4
├── json-loader@0.5.7
├── opn@5.2.0
├── optimize-css-assets-webpack-plugin@3.2.0
├── postcss-loader@2.0.10
├── progress-bar-webpack-plugin@1.10.0
├── purify-css@1.2.5
├── quasar-extras@0.0.8
├── quasar-framework@0.14.7
├── shelljs@0.8.0
├── stylus@0.54.5
├── stylus-loader@3.0.1
├── url-loader@0.6.2
├── vue@2.5.13
├── vue-awesome-swiper@3.1.0
├── vue-i18n@7.4.0
├── vue-i18n-loader@1.0.0
├── vue-loader@13.7.0
├── vue-router@3.0.1
├── vue-style-loader@3.0.3
├── vue-template-compiler@2.5.13
├── webpack@3.10.0
├── webpack-dev-middleware@2.0.4
├── webpack-hot-middleware@2.21.0
└── webpack-merge@4.1.1

If you need any more infos about my setup, please let me know.

Thank you very much!

@JDrechsler Did you end up finding a solution for your last question about passing the biller and index?

Having component files for header, footer etc. works for me when using them inside a div tag that has the respective slot name (slot="header).

Like so:
<q-toolbar slot="header" color="white" class="navbar"> <navbar-desktop></navbar-desktop> </q-toolbar>

Did you try it this way already?

I’d also like to know. Setting a property icon="" does not do the trick, and couldn’t find any easy way.