I know this is old now, and Quasar has moved on quite a bit too, but @eduardodgarciac on the Discord channel pointed me in the right direction. Actually, trying to use QScrollArea inside a QDialog, and fill the space in the dialog with variable sized content, scrolling if necessary. The key is to use flex column, and set the QScrollArea to class="col". Final result can be seen here: https://codepen.io/dsl101/pen/jOOJNXK

Hope it helps someone!

Thanks - I tried a few things, and forked the existing template. Then I found the correct format for the init command:

quasar init @myrepo/quasar-template-default test

The @ is crucial - otherwise it tries to load a sub-version of the official template.

For info - I had to pin vue-template-compiler to 2.3.4 as well - without that, I got a version mismatch when running quasar dev.

Many thanks - I’ve posted a feature request: https://github.com/quasarframework/quasar/issues/557

Not exactly the same content as you, but I got extra stuff on cards to ‘float to the bottom’ using style="flex-grow: 1":

    <q-card-title style="flex-grow: 1" @click="handleSelect">
      {{item.text}}
      <span v-if="!pageSettings.anonymous" slot="subtitle">{{subText}}</span>
      <q-icon v-if="isMine(item) || isAdmin()" slot="right" name="more_vert" >
     .
     .     
     .
      </q-icon>

    </q-card-title>

    <comment
      :id="id"
      :active="activities.includes('comment')"
      :pageSettings="pageSettings"
      :activitySettings="activitySettings.comment"
    />

The output of the comment component is now anchored at the bottom of the card, however tall the card is.

I’m really struggling to get q-scroll-area to work reliably, and I’m sure I’m Doing It Wrong. The pattern I’ve been using is something like this:

<template>
  <q-scroll-area class="fill-window">
    <div>
      <!-- Stuff here -->
    </div>
  </q-scroll-area>
</template>

<style scoped lang="stylus">
  .fill-window
    height calc(100vh - 160px)
</style>

This works, but (a) I’m hand tuning that offset (160px) to cater for the vertical position this component is rendered within the main layout, and (b) when I add something ‘optional’ to the component like this:

<template>
  <q-scroll-area class="fill-window">
    <div v-if="showControls">
      <!-- Controls here -->
    </div>
    <div>
      <!-- Stuff here -->
    </div>
  </q-scroll-area>
</template>

The value of 160px now depends on whether the parent passed true or false to showControls.

So, is there a better way to say “give as much height as possible without triggering the browsers own scrollbar”?

OK - here’s my solution. I’m still not 100% sure why this works and making setOption() return a function doesn’t, but hey ho. I’m sure it’s tied up inside template compilation:

@input="val => { setOption(setting.key, val) }"

+1 for more details—one line in the docs isn’t enough to convince a client we’re all set…

OK, this is probably horribly hacky, and I’d love to find there’s a better way to integrate external editor ESLint and Quasar webpack, but I added this to the end of the extendWebpack() hook, and it was sufficient to get eslint-import-resolver-webpack working with both my custom and Quasar’s default aliases:

fs.writeFileSync('./webpack.config.js', `module.exports = {
  resolve: ${util.inspect(cfg.resolve, { showHidden: false, compact: false, depth: null })}
}`)

BTW, it occurred to me that my original post was missing some perhaps important details…

I don’t use ESLint as part of the Quasar build process, and this is not an error coming from running quasar dev or quasar build. I’m using SublimeText with SublimeLinter, which calls ESLint in the project. So I do have the .eslintrc.js file that Quasar created as a base, but don’t use it in build.

So, the problem is that I suspect the webpack configuration that Quasar generates during dev is not accessible to ESLint when run ‘outside’ that context, and that explains why it can’t resolve. The eslint-import-resolver-webpack plugin expects to be able to access a webpack.conf.js containing the webpack configuration, which I guess would give it those aliases. So, I’m assuming that unless I can persuade Quasar to write out the config (could I do this quasar.conf.js in the extendWebpack() hook?), it will be very hard to solve this one.

That’s the whole point though–I don’t want relative imports in case the importing file gets moved around. That’s why Quasar provides those aliases isn’t it?

Relative imports are recognised correctly by ESLint, but then become fragile as code is reorganised…

I’m making use of the Quasar webpack aliases to do things like this:

import Thing from 'components/Thing'

but ESLint’s import plugin is complaining that it can’t resolve path to the module. I believe part of the answer is to use eslint-import-resolver-webpack, but I’ve tried naively adding it as a dev dependency, and putting this into .eslintrc.js:

  'settings': {
    'import/resolver': 'webpack'
  },

and no dice. Is there something else needed to allow it to resolve those aliases properly?

I was wanting to use @before-show to set the ‘initial’ value. Then when clicking ‘Set’, the new (cleared) value would be null and cause an @save event. But it seems the initial value is stored before @before-show is triggered?

In any case, setting the model via the Qbtn surrounding the popup works OK.

I edited the code above to be clearer, and also updated the code pen with 2 versions (one that works and one that doesn’t). The only difference is where editLabel is set initially. In the QBtn @click works, in the QPopupEdit @before-show doesn’t.

Note this is the original code which doesn’t work:

<q-btn flat round dense icon="edit">
  <q-popup-edit v-model="editLabel" buttons @before-show="editLabel = label" @save="saveLabel">
    <q-input v-model="editLabel" clearable></q-input>
  </q-popup-edit>
</q-btn>

whereas this version does work:

<q-btn flat round dense icon="edit" @click="editLabel = label">
  <q-popup-edit v-model="editLabel" buttons @save="saveLabel">
    <q-input v-model="editLabel" clearable></q-input>
  </q-popup-edit>
</q-btn>

The significant difference is where editLabel is initialised. In the @before-show event the model is set, but apparently it is not set before the QPopupEdit initialValue has been copied from the model. This causes __hasChanged () to later return false when the model is cleared back to null.

I’m struggling to get QPopupEdit to emit a @save when the QInput is clearable. Here’s an example: https://codepen.io/dsl101/pen/XWNRZYz?editors=1011

1. Click on one of the edit icons
2. The current value of editLabel changes and the popup opens
3. Click the ‘clear’ icon at the right of the QInput
4. Click the ‘Set’ button on the popup.

I would expect to see null printed in the console, but I don’t see anything. What am I doing wrong? Note you can get null into the console by changing the QInput value first (and clicking ‘Set’).

Yes, I’m using dynamic components in some places, but I’ve found they do need quite a bit of boilerplate to avoid premature loading, and then they need careful handling to get them to open with the data (e.g. I’m using them for seldom-used dialogs). I end up with lots of code like this:

    <component :is="editor"
      ref="edit"
      title="Edit Item"
      :item-text="item.text"
      @edit="handleEdit"
    />

    components: {
      EditFeedback: () => import('components/editors/EditorDialog')
    },
    methods: {
      handleOpenEditor (what) {
        this.item.text= what.text
        if (this.editor === null) {
          this.editor = 'EditFeedback'
        }
        setTimeout(() => { this.$nextTick(this.$refs.edit.show) }, 0)
      }
    }

Without using both setTimeout() and $nextTick(), I find that either this.$refs.edit is undefined, or the props haven’t rippled down into the component.

I’ve decided to refactor things into a parent component which only contains the multiple child components that used to contain menus, and instead have all the children emit an event which allows the parent to open an (already templated) menu based on the id of the child passed up in the event. I think this solves the problem without too much extra code like above.

I have a fairly complex component, with several menus that might be available to privileged users, and those menus may have many options. Currently all is working with <q-menu> components, but of course that means every menu is part of the template, whether or not it is visible. Many of the items on the menu are reactive to the components current state, and we’re seeing that once there are many tens or hundreds of components (each with several menus), performance starts to degrade—I assume because those menus are being reactively updated from item data.

Each component could share a single menu (one menu open at a time is fine), but then that menu would have to live in the parent, and so becomes decoupled from the component it’s tightly integrated with.

Is there some kind of analogy to the Dialog plugin where a menu could be created dynamically in code, only when the user clicks an <q-btn>?