Hi all,
I have the same problem, here is a codepen: https://codepen.io/alexanderkoehn/pen/poEorwx
The curious thing is: When there is an additional normal input or a second q-input, everything works as expected.
Using only a <input /> works too.

Regards

Hi all,
I have the same problem, here is a codepen: https://codepen.io/alexanderkoehn/pen/poEorwx
The curious thing is: When there is an additional normal input or a second q-input, everything works as expected.
Using only a <input /> works too.

Regards

I have written a js script to try to load the webpack config into styleguidist. I know these are internal APIs, but maybe this can serve as a start to extend quasar:

const getConfig = require('vue-styleguidist/scripts/config');
const binutils = require('vue-styleguidist/scripts/binutils');
const StyleguidistError = require('react-styleguidist/scripts/utils/error');

QuasarConfig = require('quasar-cli/lib/quasar-config')

async function parseAddress({
  host,
  port
}) {
  if (this.chosenHost) {
    host = this.chosenHost
  } else {
    if (host && ['localhost', '127.0.0.1', '::1'].includes(host.toLowerCase())) {
      host = '0.0.0.0'
    }
  }

  this.running = true
  return {
    host,
    port
  }
}

async function init(config) {
  const quasarConfig = new QuasarConfig({
    dev: true,
    port: 8000,
    host: 'localhost',
    dev: true,
    onAddress: parseAddress
  })
  await quasarConfig.prepare()
  quasarConfig.compile()
  config.webpackConfig = quasarConfig.getWebpackConfig()
  binutils.commandServer(config, true);
}

let config;
try {
  config = getConfig({}, binutils.updateConfig);
} catch (err) {
  if (err instanceof StyleguidistError) {
    const link = consts.DOCS_CONFIG + (err.anchor ? `#${err.anchor.toLowerCase()}` : '');
    binutils.printErrorWithLink(
      err.message,
      `${err.extra}\n\nLearn how to configure your style guide:`,
      link
    );
    process.exit(1);
  } else {
    throw err;
  }
}

init(config);

With this styleguidist starts, but I get stylus resolve error in .quasar/variables.styl

Error: ...\.quasar\variables.styl:20:9
   16| // ........
   17| // </style>
   18|
   19| // First we load app's Stylus variables
   20| @import '~quasar-app-variables'
---------------^
   21|
   22| // Then we load Quasar Stylus variables.
   23| // Any variables defined in "app.variables.styl"

failed to locate @import file ~quasar-app-variables.styl
 @ ./src/components/Mood.vue?vue&type=style&index=0&id=7844d8b2&scoped=true&lang=stylus& (./node_modules/vue-style-loader??ref--7-oneOf-2-0!./node_modules/css-loader??ref--7-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-2-2!./node_modules/stylus-loader??ref--7-oneOf-2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Mood.vue?vue&type=style&index=0&id=7844d8b2&scoped=true&lang=stylus&) 4:14-403 14:3-18:5 15:22-411
 @ ./src/components/Mood.vue?vue&type=style&index=0&id=7844d8b2&scoped=true&lang=stylus&
 @ ./src/components/Mood.vue
 @ ./node_modules/vue-styleguidist/loaders/styleguide-loader.js!./node_modules/vue-styleguidist/lib/index.js
 @ ./node_modules/vue-styleguidist/lib/index.js
 @ multi ./node_modules/vue-styleguidist/lib/index ./node_modules/react-dev-utils/webpackHotDevClient.js

Any idea what is missing? Where is ‘quasar-app-variables’ defined?

Re: Location of generated webpack config

I want to use vue-styleguidist and reuse the quasar generated webpack config.js
Has anyone done this yet?

Maybe color branding helps: https://quasar-framework.org/components/color-utils.html ?

Can’t you just dump the complete request object for manual inspection?

Same here, I am missing e.g. all the free solid emoji icons

dist contains subfolders for each theme and spa or pwa modes like spa-mat. You have to symlink the one you are working with

Are you on windows? You have to know that cordova expects a www folder in the src-cordova directory. The quasar-cli creates a symlink, but this does not work on windows. You have to symlink the /my-quasar-project/dist/spa-mat folder to /my-quasar-project/src-cordova/www. Using a tool like Link Shell Extension http://schinagl.priv.at/nt/hardlinkshellext/linkshellextension.html makes this easy.

You could try using the spacing classes as described here:
https://quasar-framework.org/components/spacing.html
e.g.

<q-btn class="q-py-lg" icon="people" />

For cordova you have to build your app first using

quasar build -m cordova -T android

You can also use cordova in dev mode via (so you don’t have to cd into your src-cordova and call cordova cmds)

quasar dev -m cordova -T android

If your phone is connected, it will use it, otherwise will launch an emulator, so make sure you have downloaded one.
Also see: https://quasar-framework.org/guide/cordova-build-commands.html

cheers