Hello,

I have read the discussion about the differences between vue-cli3 and quasar-cli
I understand the benefits of quasar-cli.
But ihmo, i think there’s one thing really good in vue-cli: it’s possible to build web components with option “target --wc”

I think web components is the future for web development (shadow dom is really great for mixing components from various sources without problem with css scoping).

Is there a plan to improve Quasar with the ability to build web components ?

And many thanks for your work

check the answer of LinusBorg in this thread: https://forum.vuejs.org/t/re-ask-how-to-get-v-model-expression/16112
it’s not possible…

Pass the v-model name as parameter of your popup function

<q-input v-model="name1" :after="[{icon: 'search', handler () { popup('name1') }}]"></q-input>
<q-input v-model="name2" :after="[{icon: 'search', handler () { popup('name2') }}]"></q-input>

popup: function (name) {
   this.$q.notify(name)
}

yes it’s that
in dev:

• front-end dev with quasar tools
• your nodejs api in backend

in prod:

• serve build of your quasar app (it’s static files so nginx is a good solution)
• prod of your nodejs api (don’t forget to enable cors between your api and your front-end if it’s not the same domain)

Set the content-css of your modal with auto width an height:

<q-modal :content-css="{height: 'auto', width: 'auto'}">

You can see in this jsfiddle differents sizes of a modal depending of items in content

I made a mistake while writing my “template strings”

errorFieldName () {
  if (this.$v.form.name.required) return 'Field name is required'
  if (this.$v.form.name.minLength) return `Field name must have at least ${this.$v.form.name.$params.minLength.min} letters.`
  if (this.$v.form.name.maxLength) return `Field name cant have more than ${this.$v.form.name.$params.maxLength.max} letters.`
}

<div id="q-app">
  <div class="q-ma-md">
    <q-list link v-for="currentItem in items" :key="currentItem.id">
      <q-item tag="label" @click.native.prevent="showChild()" >
        <q-item-main >
          <div> more stuff </div>
        </q-item-main>
        <q-item-side right>
          <q-btn @click.capture.stop="moreButtonClick(currentItem)" icon="more vert"></q-btn>
        </q-item-side>
      </q-item>
    </q-list>
  </div>
</div>

In q-item native.prevent : preventDefault on the native Dom click event
in q-item-side capture.stop : capture the event click and stop propagation

<q-field :error="$v.form.name.$error" :error-label="errorFieldName">
  <q-input v-model="name" />
</q-field>

computed: {
  errorFieldName () {
    if (this.$v.form.name.required) return 'Field name is required'
    if (this.$v.form.name.minLength) return `Field name must have at least {{this.$v.form.name.$params.minLength.min}} letters.`
    if (this.$v.form.name.maxLength) return `Field name can't have more than {{this.$v.form.name.$params.maxLength.max}} letters.`
  }
}

You can refer to the documentation concerning Dialog: This means Dialogs should only be used for quick actions, like password verification, small App notifications or quick options. More in depth user flows should be reserved for ​Modals​.

So you are right. If your “floating” component is a little complex, it’s better to use Modal

you can have a prop in your modal for your custom label.
And change this prop value on <q-tabs> select event

See an example: https://jsfiddle.net/cLqkmcor/3/

Bind your label prop button to a computed properties.

In this computed properties return a value depending on your selected tab.

You can set prop error-label with your custom computed properties depending on the validation
<q-field error :error-label="mycomputederrormessage" />

use the event modifiers of vue (https://vuejs.org/v2/guide/events.html#Event-Modifiers)

you can add the stop modifier on q-btn. See in action: https://jsfiddle.net/f0cpycoL/1/

sorry another typo:

onCallBack (payLoad) {
  let fieldToUpdate = this
  for (let subfield of payload.fieldName.split('.')) {
    fieldToUpdate = this[subfield]
  }
  fieldToUpdate = payLoad.retValue
}

typo in my answer, it’s:
for (let subfield of payload.fieldName.split(’.’))

i think if fieldName is a nested structure, it’s a little bit complicated.

onCallBack (payLoad) {
  let fieldToUpdate = this
  for (let subfield in payload.fieldName.split('.')) {
    fieldToUpdate = this.subfield
  }
  this[fieldToUpdate] = payLoad.retValue
}

You can use the format option of the column definition. (cf http://quasar-framework.org/components/datatable.html#Display-a-nested-property-or-format-a-column)
Another way: use the cell scoped slot (cf http://quasar-framework.org/components/datatable.html#Custom-column-cell)

the class ‘fixed-bottom’ is the solution. See an example: https://jsfiddle.net/0q7jysr1/7/
Read about positioning classes here: http://quasar-framework.org/components/positioning.html

I read in the source code and I think now it’s not possible easily.
in the quasar-framework/src/css/core.variables.styl there’s a variable $headings with the style for each (display-4, display-3, …, caption)
But there’s no stylus variable for the size.

Maybe in the future we can have stylus variables like that : $display-1-size, etc…
@rstoenescu : What do you think about adding these stylus variables ?