Turns out there is an easier way to achieve this:

https://stackoverflow.com/questions/50800945/vue-wrap-another-component-passing-props-and-events/50801786#50801786

First of all, I definitely do not consider myself to be an expert and there are tutorials which describe this process in more detail (for example: https://medium.com/quasar-framework/component-building-with-quasar-fc101b6730ae). However, sometimes you simply want to know how to do something without knowing all the ins and outs.

Anyway, I noticed that since Quasar v1 beta was released, a lot of questions or remarks come down to “this was much easier in v0.17”. I also experienced this myself and as annoying as it is that you can’t simply do something, it is the only way to create a proper and maintainable framework. Let’s hope that in the future Quasar will get improved to a point where you can perform everything without programming anything, but until that time arrives we will have to add the functionality ourselves.

So, the great thing about Quasar v1 is that they seemed to have considered every scenario when developing the base components, so by extending the base you can add your own functionality.

For example, there is an Input and a Date component, and as explained in the documentation you can combine the two to get a date input (https://v1.quasar-framework.org/vue-components/date#Example--With-QInput). Now, I wanted to hide the popup on selection of a date: https://codepen.io/stefanvh/pen/XGJVMv

This works fine as of itself, but imagine you would need 10 date inputs. That requires 90 lines of code, and in the case you would want to change something in the future, changing the same thing 10 times. So, what do we do? We create a reusable component:

quasar new component QDateInput
If we would copy the code from the codepen into QDateInput.vue, we can import QDateInput.vue as a component in any page in Quasar:

import qDateInput from 'components/QDateInput.vue'

export default {
  name: 'PageDates',
  components: {
    qDateInput
  }
}

In the template we can then use it with <q-date-input>:

<template>
    <q-date-input />
</template>

However, QInput and QDate have a lot of properties which are and cannot be used in this way. To be able to set the underlying properties of QDate and QInput we will have to add the properties to our QDateInput component:

<template>
  <q-input
    :value="formattedDate"
    v-bind="{ error, errorMessage, label, stackLabel, hint, hideHint, color, dark, filled, outlined, borderless, standout, bottomSlots, rounded, square, dense, readOnly }"
  >
  <template v-slot:append>
    <q-icon name="event" class="cursor-pointer">
      <q-popup-proxy ref="proxy">
        <q-date
          v-model="localValue"
          v-bind="{ landscape, color, textColor, dark, readonly, disable, firstDayOfWeek, todayBtn, minimal, options, events, eventColor }"
          @input="$refs.proxy.hide()"
        />
      </q-popup-proxy>
    </q-icon>
` </template>
</q-input>
</template>

<script>
import { date as dateUtil } from 'quasar'

export default {
  name: 'QDateInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    error: Boolean,
    errorMessage: String,
    label: String,
    stackLabel: String,
    hint: String,
    hideHint: Boolean,
    filled: Boolean,
    outlined: Boolean,
    borderless: Boolean,
    standout: Boolean,
    bottomSlots: Boolean,
    rounded: Boolean,
    square: Boolean,
    readOnly: Boolean,
    dense: Boolean,
    landscape: Boolean,
    color: String,
    textColor: String,
    dark: Boolean,
    readonly: Boolean,
    disable: Boolean,
    firstDayOfWeek: [String, Number],
    todayBtn: Boolean,
    minimal: Boolean,
    options: [Array, Function],
    events: [Array, Function],
    eventColor: [String, Function]
  },
  computed: {
    localValue: {
      get () { return this.value },
      set (localValue) { this.$emit('input', localValue) }
    },
    formattedDate () {
      return dateUtil.formatDate(this.value, 'DD/MM/YYYY')
    }
  }
}
</script>

By defining the value prop, you are able to use v-model on the component. This will give a two-way binding with the data you use as v-model. Note that in order to set the date, the data is also coupled with v-model inside the component. Directly using value as v-model for QDate will result in a “Avoid mutating a prop directly” error, so instead we will have to use a local computed value which takes the value of value and emits an input event on change.
Now we can use the component as followss:

<q-date-input
  filled
  hint="Hint"
  bottom-slots
  first-day-of-week="1"
  :events="['2018/11/05', '2018/11/06', '2018/11/09', '2018/11/23']"
  ...
 />

So you can use any of the props of either QInput and QDate and it will change them inside the component accordingly, and we added our own custom functionality. Hiding the popup on select is a really simple example, but it proves the point.

“Wait, will I have to do this everytime I need a function that isn’t covered by Quasar out of the box?”
Well, yes, or you let someone else do it. And that is what I think the app extensions will be for.

I found a solution in https://github.com/LinusBorg/portal-vue.

yarn add portal-vue
quasar new boot PortalVue

boot/PortalVue.js:

import PortalVue from 'portal-vue'

export default async ({ Vue }) => {
  Vue.use(PortalVue)
}

In MyLayout.vue:

<q-menu>
  <q-list style="min-width: 100px">
    <portal-target name="menu" />
  </q-list>
</q-menu>

In any component:

<portal to="menu">
  <q-item
    v-close-menu
    clickable
  >
    <q-item-section>
      <div class="text-h6 text-truncate">
        Title
      </div>
      <div class="text-subtitle2">
        Subtitle
      </div>
    </q-item-section>
  </q-item>
</portal>

I did some searching but can’t really find the solution which I am looking for (might not even be possible maybe):
https://forum.quasar-framework.org/topic/171/could-you-change-the-layout-header-slot-from-a-child-component
https://forum.quasar-framework.org/topic/2017/dynamic-left-drawer-to-pages

I’d want to have a button in the toolbar in the main layout which dynamically changes content according to the page which is shown and triggers actions on the shown page. From the topics above I understand that I should define the menu for the whole app and show the right actions by using v-if. However, how does the layout interact with the component in that case?

An example of the layout would be:

  <q-layout view="lHh Lpr lFf">
    <q-header
      elevated
      class="glossy"
    >
      <q-toolbar>
        <q-btn
          flat
          round
          dense
          icon="menu"
        >
          <q-menu>
            <q-list style="min-width: 100px">
		<!-- Dynamic content -->  
            </q-list>
          </q-menu>
        </q-btn>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>

You can´t expect to upgrade to v1 and have the CLI tell you what to change.

Copied from Discord:
If you a want a “preview” for Upgrade notes (remember, these are the notes), you can look here: https://gist.github.com/hawkeye64/da4b4d662ab1484bd0b532ffd871679e

This will tell you what has changed, but you will still have to manually check and edit the code yourself. I believe the best way at this moment is to start a new project and copy/rewrite your project from scratch (as there still might be bugs in the beta so you will have to check if you made a mistake or if it is a bug that has to be fixed).

It’s your lucky day :
https://github.com/stefanvanherwijnen/quasar-auth-starter/tree/quasar1.0

I just updated it to v1.0 and as far as I tested everything works. Please check it out and I am open to any feedback

https://github.com/stefanvanherwijnen/quasar-auth-starter

@pavarine said in Quasar v1.0 beta has arrived:

Has anyone already mentioned that u guys are VERY awesome? Thank you Razvan and colaborators!

I’ll have to agree. Quasar 0.x already was the most developer-friendly framework imo, but with v1.0 you guys kicked it to another level. Really impressive.

Quasar also provides a localstorage API:
https://quasar-framework.org/components/web-storage.html

Hmm, weird. I first noticed it on a Windows 10 laptop with a low resolution. Then I could reproduce it on a Linux machine in the responsive design mode of Firefox.
I’ll try to figure out what the problem is, but there does not seem to be an obvious solution.

I am using Firefox. In Chrome it seems to work fine indeed. I forgot to check the behavior in different browsers than Firefox…

So it is a bug, but is it a bug with Quasar or Firefox?

The limiting width of a QCard seems to be default behaviour. The only way to get it to stretch across the whole width of the screen is by applying col-12, by default it seems to match col-4.