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.

I seem to have a problem understanding the routing neccessary for q-route-tab. I would like each tab content to load another component via routing and append the url (“parent-url/tab1”, “parent-url/tab2”). Loading components works using child routes and router-view in q-layout, but only for the first tab selected. Once I have routed to let’s say parent-url/tab1, and select a different tab (tab2), the url gets appended on top of the tab1 child url, resulting in parent-url/tab1/tab2. This leads to a 404…

Any ideas what I am doing wrong?

Template of ParentComponent.vue:

 <template>
   <q-layout>
        ...
          <div slot="navigation">
          ...
            <q-tabs color="purple" inverted align="center">
               <q-route-tab
                 default="true"
                 label="Integralansicht"
                 to="tab1"
                 append
                 slot="title"
                 color="purple"
             />
          <q-route-tab
            label="Leseansicht"
            to="tab2"
            append
            slot="title"
            color="purple"
          />
          <q-route-tab
            label="Transkript"
            to="tab3"
            append
            slot="title"
            color="purple"
          />
    </q-tabs>
  </div>

  <router-view />

 </q-layout>
<template>

My route.js looks as follows:

    {
      path: 'parent-url',
      component: load('pages/editions/EditionView'),
      children: [
        {
          path: 'tab1',
          component: load('pages/editions/ViewmodeIntegral')
        },
        {
          path: 'tab2',
          component: load('pages/editions/ViewmodeReader')
        },
        {
          path: 'tab3',
          component: load('pages/editions/ViewmodeTranscript')
        },
        {
          path: 'tab4',
          component: load('pages/editions/ViewmodeFacsimile')
        }
      ]
    }

`

Thanks a lot for any ideas!

I seem to have a similar problem understanding the routing neccessary for q-route-tab. I would like each tab content to load another component via routing and append the url (“parent-url/tab1”, “parent-url/tab2”). Loading components works using child routes and router-view in q-layout, but only for the first tab selected. Once I have routed to let’s say parent-url/tab1, and select a different tab (tab2), the url gets appended on top of the tab1 child url, resulting in parent-url/tab1/tab2. This leads to a 404…

Any ideas what I am doing wrong?

Template of ParentComponent.vue:

 <template>
   <q-layout>
        ...
          <div slot="navigation">
          ...
            <q-tabs color="purple" inverted align="center">
               <q-route-tab
                 default="true"
                 label="Integralansicht"
                 to="tab1"
                 append
                 slot="title"
                 color="purple"
             />
          <q-route-tab
            label="Leseansicht"
            to="tab2"
            append
            slot="title"
            color="purple"
          />
          <q-route-tab
            label="Transkript"
            to="tab3"
            append
            slot="title"
            color="purple"
          />
    </q-tabs>
  </div>

  <router-view />

 </q-layout>
<template>

My route.js looks as follows:

    {
      path: 'parent-url',
      component: load('pages/editions/EditionView'),
      children: [
        {
          path: 'tab1',
          component: load('pages/editions/ViewmodeIntegral')
        },
        {
          path: 'tab2',
          component: load('pages/editions/ViewmodeReader')
        },
        {
          path: 'tab3',
          component: load('pages/editions/ViewmodeTranscript')
        },
        {
          path: 'tab4',
          component: load('pages/editions/ViewmodeFacsimile')
        }
      ]
    }

`

Thanks a lot for any ideas!

Thank you, this is great news! Looking forward to it

Okay, seems this question was posed here already: http://forum.quasar-framework.org/topic/174/load-data-from-server-into-data-table

There doesn’t seem to be a solution, although this was 9 months ago…

I’d also be very interested in a solution!

Hello,

I was wondering if someone was trying to achieve something similar:

We have a project where we’d like to use QDataTable to display search results that could cover up to 50.000 items. Hence we will not load the entire results data at once and use pagination. We would also like to use the integrated sort action for columns, but would like to do the server to do the sorting and return a fraction of the queried results to be displayed via QDataTable. Right now it seems though that QDataTable expects the whole data to work with it.

Is it possible to customize the sort buttons in QDataTable to call a method for instance? Or will the revamp of QDataTable in 0.15 allow for such a customization?

Thank you in advance!

I sent you a chat message in here with a WeTransfer link just now

Sure @rstoenescu thanks a lot, I could send you a ZIP with the repo if you provide me with an email address? Or what would you prefer?

I am using Node v6.9.4 and NPM 3.10.10.

Thanks a kit @rstoenescu for your help!

This is the whole error from my console after running “quasar build mat”:

`vendor.js:6 TypeError: Cannot read property 'split' of undefined
at q (vendor.js:6)
at new Ki (vendor.js:6)
at Nt (vendor.js:6)
at Mt (vendor.js:6)
at s.t._init (vendor.js:6)
at new s (vendor.js:6)
at Xt (vendor.js:6)
at init (vendor.js:6)
at c (vendor.js:6)
at l (vendor.js:6)
$ @ vendor.js:6`

Running “npm build mat” gets me the exact same error.

Cheers!

Hello forum,

I am setting up a quasar project and am getting the above error message (“TypeError: Cannot read property ‘split’ of undefined”) when running “quasar build mat” on one of my pages which contains a data table (with an Axios request). The rest of the build works as expected.

Anyone here who has had the same issue or could explain the error to me? Could not find any information on it. I am running Vue 2.3.4 btw, here are my dependencies:

  "dependencies": {
"axios": "^0.16.2",
"babel-runtime": "^6.25.0",
"quasar-extras": "0.x",
"quasar-framework": "^0.14.1",
"vue": "~2.3.4",
"vue-awesome-swiper": "^2.6.2",
"vue-i18n": "^7.2.0",
"vue-router": "^2.7.0"

Thank you for any advice on this!

Arjanski