<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

Quasar component styles are scoped.
So two ways:

• style globally .q-collapsible-toggle-icon
• use /deep/ in your component style:

<style scoped lang="stylus">
/deep/ .q-collapsible-toggle-icon
  color red
</style>

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/

@danielsalles
i think you must use q-layout-footer and q-layout-header and the view prop of q-layout like hHh lPr fFf

Like that:

<div id="q-app">
  <q-layout view="hHh lPr fFf">
    // position of header is fixed because of H in prop view
    <q-layout-header>Your header content</q-layout-header>
    <q-page-container>
      // the pages are injected here depending of your router config
      <router-view></router-view>
    </q-page-container>
    // position of footer is fixed because of F in prop view
    <q-layout-footer>
      <q-tabs>
        <q-route-tab slot="title" icon="person" label="A" to="/a"></q-route-tab>
        <q-route-tab slot="title" icon="person" label="B" to="/b"></q-route-tab>
        <q-route-tab slot="title" icon="person" label="C" to="/c"></q-route-tab>
      </q-tabs>
    </q-layout-footer>
  </q-layout>
</div>

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

You must read the documentation about flex (http://quasar-framework.org/components/flex-css.html). After you will build complex layout easily.
See an example:
https://jsfiddle.net/tL0qcfuL/

maybe you can try to use a vue directive for that (i found https://github.com/mirari/v-viewer)
Even if you use Quasar, you can use other vuejs libraries

in v0.15, there’s no “form prop” for the dialog component.
You must create your own form components and put them in your dialog.

jsfiddle example: https://jsfiddle.net/eyudzfk1/15/

@alinex
With simple quote for the url, I think it will be ok:

<style lang="stylus" scoped>
main
  background: url('~assets/background.jpg') no-repeat center center fixed
</style>

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/