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/