extendWebpack (cfg) {
  const vueLoaderRule = cfg.module.rules
    .find(el => el.test.toString() == /\.vue$/.toString())

  const ruleFirstLoader = vueLoaderRule.use[0]
  const options = ruleFirstLoader.options

  // change options
  options.transpileOptions = {
    transforms: {
      dangerousTaggedTemplateString: true
    }
  }
}

@s-molinari, QInfiniteScroll just loading more data, this is not a virtual list.
Virtual list replace nodes that are out of viewport with white space like margin.
This solves a performance problem if the page has a large list. (500 000 simple nodes or more 500 components in v-for which render more than 0.5 ms per item)

I use vue-virtual-scroller to solve this problem.

https://github.com/Akryum/vue-virtual-scroller

Please add scrolling while holding the middle mouse button on desktop

In play app errors in console while i scrolling when left or right driver is open.
I hope this version is still maintained.

quasar 0.17.20
chrome 73.0.3683.103

https://quasar-framework.org/quasar-play/android/index.html#/showcase/layout-demo/play-with-layout
https://www.chromestatus.com/features/6662647093133312

Your state is similar to

const state = {
  state: {
    paidMonthlyExpenses: []
  }
}

You should set it like (two times “state”)

state.state.paidMonthlyExpenses = [...state.state.paidMonthlyExpenses, key]

@s-molinari In the getter, you can choose from where you need to get the value, and in the “input” handler, choose where you want to assign it.

QCard component has class q-card
use:

<style lang=“stylus”>
.q-card
  width 300px
</style>

or add own class

<q-card class="myOwnClass">...</q-card>

<style lang=“stylus”>
.myOwnClass
  width 300px
</style>

You can bind value and handle the input event
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Thank you for your efforts! You make my life much easier!

@genyded This works perfectly on Windows and does not work on Linux. Maybe there is a problem with path.resolve() ?! I need to write __dirname as the first argument in path.resolve?

extendWebpack(cfg) {
  cfg.resolve.alias['@'] = path.resolve('src')
}

On Windows it works as it should. When I build on Linux, I get errors. I checked the existence of all these files.

• Kernel Linux e667743f-b476-47ba-b6c5-dad8d021326e 4.14.63-coreos #1 SMP Wed Aug 15 22:26:16 UTC 2018 x86_64 GNU/Linux
• quasar-cli: 0.17.15
• node 10.9.0
• npm: 6.2.0

                                   css/14.33fd1545.css   2.11 KiB      14  
                                      js/14.5c0380b.js   14.6 KiB      14  
                                   css/15.ee1546e0.css   1.17 KiB      15  
                                      js/15.3cd799a.js   13.1 KiB      15  
                                   css/16.b90ad525.css   1.54 KiB      16  
                                      js/16.24673d9.js   35.6 KiB      16  
                                   css/17.49d682cd.css   1.39 KiB      17  
                                      js/17.cf9b6d2.js   22.1 KiB      17  
                                   css/18.b54056a7.css  317 bytes      18  
                                      js/18.631ef1f.js   11.1 KiB      18  
                                   css/19.4482a08b.css   1.64 KiB      19  
                                      js/19.ff26a8c.js   20.4 KiB      19  
                                   css/20.cb996e67.css  318 bytes      20  
                                      js/20.5d57708.js    2.7 KiB      20  
                                   css/21.2c4758f2.css   4.69 KiB   21, 6  
                                      js/21.f3ebc54.js    102 KiB   21, 6  
                                   css/22.447e1c20.css  461 bytes      22  
                                      js/22.a35f7bb.js   4.85 KiB      22  
                                   css/23.0566691e.css    0 bytes      23  
                                      js/23.bd21f85.js   2.29 KiB      23  
                                   css/24.24d7fb15.css  451 bytes      24  
                                      js/24.b0991cb.js   3.58 KiB      24  
                                   css/25.5a7798fe.css   1.04 KiB      25  
                                      js/25.b8d5ee3.js   15.4 KiB      25  
                                   css/26.9b566e3f.css   1.89 KiB      26  
                                      js/26.00f6b3c.js     28 KiB      26  
                                   css/27.3b7595db.css  525 bytes      27  
                                      js/27.e448f40.js     22 KiB      27  
                                   css/28.e9736306.css  796 bytes      28  
                                      js/28.9c774f8.js   19.6 KiB      28  
                                   css/29.81839ecb.css    0 bytes      29  
                                      js/29.3ef73ff.js   3.59 KiB      29  
                                   css/30.ce9ab364.css  953 bytes      30  
                                      js/30.57a8dcd.js   6.09 KiB      30  
                                   css/31.7df763b2.css   3.07 KiB      31  
                                      js/31.b58c911.js   12.7 KiB      31  
                                   css/32.4ebab3eb.css   43 bytes      32  
                                      js/32.8ef3725.js   1.31 KiB      32  
                                   css/33.9cdc0fbc.css   2.99 KiB      33  
                                      js/33.074258a.js   12.3 KiB      33  
                                   css/34.abd7271a.css  110 bytes      34  
                                      js/34.661f54c.js   1.43 KiB      34  
                                   css/35.e7dc9d5c.css    0 bytes      35  
                                      js/35.3b577aa.js  572 bytes      35  
                                   css/36.49814475.css    0 bytes      36  
                                      js/36.eadbdeb.js  571 bytes      36  
                                   css/37.f2656da2.css   1.07 KiB      37  
                                      js/37.fc68e60.js    4.3 KiB      37  
                                   css/38.cf225057.css   23 bytes      38  
                                      js/38.398fc24.js  626 bytes      38  
                                      js/39.7541e73.js   12.1 KiB      39  
                                  js/vendor.9e44e85.js   2.06 MiB      40  vendor
                                 js/runtime.fc84472.js    4.1 KiB      41  runtime
Entrypoint app = js/runtime.fc84472.js js/vendor.9e44e85.js css/app.0dada8c8.css js/app.efacbbf.js
WARNING in chunk 3 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--9-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--9-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--9-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsibleRow.vue?vue&type=style&index=0&lang=less&
 * css ./node_modules/css-loader??ref--9-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--9-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--9-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/editContact.vue?vue&type=style&index=0&id=a5231e72&lang=less&scoped=true&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ContactFaceAdd.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/contactFace/ContactFace.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/contactFace/Create.vue?vue&type=style&index=0&lang=stylus&
WARNING in chunk 3 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/contactFace/Create.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsible.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsibleBody.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsibleHead.vue?vue&type=style&index=0&lang=stylus&
WARNING in chunk 3 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsibleHead.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--9-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--9-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--9-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/editContact.vue?vue&type=style&index=0&id=a5231e72&lang=less&scoped=true&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ContactFaceAdd.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/contactFace/ContactFace.vue?vue&type=style&index=0&lang=stylus&
WARNING in chunk 3 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/contactFace/ContactFace.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsible.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsibleBody.vue?vue&type=style&index=0&lang=stylus&
WARNING in chunk 3 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsibleBody.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--9-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--9-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--9-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/editContact.vue?vue&type=style&index=0&id=a5231e72&lang=less&scoped=true&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ContactFaceAdd.vue?vue&type=style&index=0&lang=stylus&
WARNING in chunk 3 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ContactFaceAdd.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsible.vue?vue&type=style&index=0&lang=stylus&
WARNING in chunk 3 [mini-css-extract-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--6-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-2-2!./node_modules/stylus-loader??ref--6-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TableCollapsible/TableCollapsible.vue?vue&type=style&index=0&lang=stylus&
 * css ./node_modules/css-loader??ref--9-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--9-oneOf-2-2!./node_modules/less-loader/dist/cjs.js??ref--9-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/editContact.vue?vue&type=style&index=0&id=a5231e72&lang=less&scoped=true&
ERROR in ./src/router/routes.js
Module not found: Error: Can't resolve '@/pages/admin/Personal' in '/opt/atlassian/pipelines/agent/build/src/router'
 @ ./src/router/routes.js 35:13-45
 @ ./src/router/index.js
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js
ERROR in ./src/router/routes.js
Module not found: Error: Can't resolve '@/pages/docs/Invoice' in '/opt/atlassian/pipelines/agent/build/src/router'
 @ ./src/router/routes.js 144:13-43 172:13-43
 @ ./src/router/index.js
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js
ERROR in ./src/router/routes.js
Module not found: Error: Can't resolve '@/pages/reports/inventory' in '/opt/atlassian/pipelines/agent/build/src/router'
 @ ./src/router/routes.js 263:13-48
 @ ./src/router/index.js
 @ ./.quasar/app.js
 @ ./.quasar/client-entry.js
 @ multi ./.quasar/client-entry.js
 app:build [FAIL] Build failed with errors. Check log above. +0ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sales-client@1.0.0 pipelines:build: `quasar build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sales-client@1.0.0 pipelines:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-09-04T08_10_31_313Z-debug.log```

https://youtu.be/dNsqUgfVF7Q
Requests remain in the status of “Pending”.

@theara You can simply make the component a wrapper that will translate properties into the QField and events from it to the outside. I do not know how this will work with Vee Validate.

<q-field v-bind="$props"/>

When scrolling in the browser Chrome (Scrolling by holding the middle button of the mouse) until it ends, not one sent request will not receive a response. I monitored the state via Chrome DevTools. How do you deal with this?

@s-molinari 300 dates are enough.

@s-molinari
I think the best option is to do a function to check the availability of the date.
It will be called for each date shown on the screen.

checkDate(date) {
  return this.availableDates
    .includes(this.$moment(date).format('YYYY-MM-DD'))
}

<datepicker
  :check-date="checkDate"
  v-model="selectedDate"/>

@welitonjose, use proxy:

devServer: {
  port: 8080,
  open: true,
  proxy: {
    '/api': {
      target: 'http://api.site.com/',
      changeOrigin: true
    },
  }
},

https://webpack.js.org/configuration/dev-server/#devserver-proxy

or

'Access-Control-Allow-Origin': '*'