Would be cool have this one ‘setup’ as well:
https://github.com/antvis/f2
see also:
https://medium.com/@SimaZwx/https-medium-com-simazwx-introducing-f2-c44fb4e74c2d

See this for a solution and whether that’s how it should be done…:
https://github.com/quasarframework/quasar/issues/2033

@Jaxon No, sorry. I got this answer recently, but it does not answer your issue: https://stackoverflow.com/questions/49616642/jest-unit-testing-config-with-quasar-framework-0-15

I gave up on Jest for now and work happily with cypress (use it for e2e, and some unit-testing when necessary…).

The docs seem to indicate that when you use custom size (or use one of the default sizes) for a button the icon size adjusts accordingly. See docs and this picture:

However when I use e.g. this button:
<q-btn
v-if="$route.name === ‘home’"
class="absolute-top-left"
flat
round
wait-for-ripple
dense
size="160px"
color="primary"
icon=“close”
@click.native=“goToSignIn”
/>
The button indeed grows but icon stays same size. Same for other size values. I thought it might relate to using mdi icons, but when I use the default material icons I get same behavior. What’s wrong/ what am I doing wrong?

Yeah, but ‘quasar’ alias is already preconfigured from node_modules/quasar-cli webpack-conf.js:

alias: {
quasar: appPaths.resolve.app(`node_modules/quasar-framework/dist/quasar.${cfg.ctx.themeName}.esm.js`),
src: appPaths.srcDir,
components: appPaths.resolve.src(`components`),
layouts: appPaths.resolve.src(`layouts`),
pages: appPaths.resolve.src(`pages`),
assets: appPaths.resolve.src(`assets`),
plugins: appPaths.resolve.src(`plugins`),
variables: appPaths.resolve.app(`.quasar/variables.styl`),

// CLI using these ones:
'quasar-app-styl': appPaths.resolve.app(`.quasar/app.styl`),
'quasar-app-variables': appPaths.resolve.src(`css/themes/variables.${cfg.ctx.themeName}.styl`),
'quasar-styl': appPaths.resolve.app(`node_modules/quasar-framework/dist/quasar.${cfg.ctx.themeName}.styl`)
}

and when I used that webpack setting it is not picked up by pycharm, see this issue. This issue is recorded here:
https://youtrack.jetbrains.com/issue/WEB-32143

@vinstah Ah, thanks. I get these error messages (and components are ‘registered’ I think…):
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: Unknown custom element: <q-page-sticky> - did you register the component correctly? For recursive components, make sure to provide the “name” option.

  (found in <Root>)
console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Unknown custom element: <q-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  
  (found in <Root>)
console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Unknown custom element: <q-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

The Pycharm IDE does not recognize the ‘quasar’ alias and thus gives a warning (‘quasar module not imported’). I tried to make the alias explicit in webpack by doing in quasar.conf.js:
cfg.resolve.alias = {
…cfg.resolve.alias,
‘quasar’: path.resolve(__dirname, ‘/node_modules/quasar-framework/dist/quasar.mat.esm.js’)
}

but i get:

 app:quasar-conf Reading quasar.conf.js +978ms
 app:dev Checking listening address availability (0.0.0.0:8080)... +3ms
 app:quasar-conf Generating Webpack config +5ms
 app:quasar-conf Extending Webpack config +13ms
 app:generator Generating Webpack entry point +2ms
 app:dev-server Booting up... +2ms

 ERROR  Failed to compile with 19 errors22:00:51

This dependency was not found:

* quasar in ./.quasar/quasar.js, ./src/api.js and 17 others

To install it, you can run: npm install --save quasar

Anyone knows how to get rid of the warning (not using eslint escape command all the time)…?

@vinstah Do jest snapshots work with your settings? I think vue-server-renderer needs to be installed for instance?

This issue somehow recently disappeared, so it is ok again! Strange!?

@rstoenescu said in [15.1] Lazy loading of components:
The docs indeed explain code splitting and lazy-loading but don’t mention how the components in quasar.conf.js fit into this picture.