incase you looking for v2 with vue3

const pickup = ref<QInput | null>(null);

<q-input
                          class="full-width"
                          required
                          ref="pickup"
                          type="text"
                          dense
                          label="Enter Pickup Location"
                          v-model="form.pickup"
                          
                        />

let input =  pickup.value.getNativeElement() as unknown as HTMLInputElement;
 return {
      pickup,
....
}

this may be late just incase use this https://github.com/diadal/firebase

where you able to fix this am fixing same issue

QUploader not working on capacitor android app any help how to fix this below issue

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: app.myapp, PID: 10587
    java.lang.RuntimeException: Failure delivering result ResultInfo{who=null, request=2099529143, result=0, data=null} to activity {app.myapp/app.myapp.MainActivity}: java.lang.IllegalStateException: showFileChooser result was already called
        at android.app.ActivityThread.deliverResults(ActivityThread.java:4360)
        at android.app.ActivityThread.handleSendResult(ActivityThread.java:4402)
        at android.app.servertransaction.ActivityResultItem.execute(ActivityResultItem.java:49)
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:108)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:68)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1808)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6669)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
     Caused by: java.lang.IllegalStateException: showFileChooser result was already called
        at xs.onReceiveValue(PG:4)
        at com.getcapacitor.BridgeWebChromeClient.lambda$showFilePicker$15(BridgeWebChromeClient.java:434)
        at com.getcapacitor.-$$Lambda$BridgeWebChromeClient$K2q_hX7VVU3kdrpTHIyaUpWfpEc.onActivityResult(Unknown Source:2)
        at com.getcapacitor.BridgeWebChromeClient.lambda$new$1$BridgeWebChromeClient(BridgeWebChromeClient.java:77)
        at com.getcapacitor.-$$Lambda$BridgeWebChromeClient$nK4HrLIPc8JbAwJyF2CGTpDio8A.onActivityResult(Unknown Source:4)
        at androidx.activity.result.ActivityResultRegistry.doDispatch(ActivityResultRegistry.java:362)
        at androidx.activity.result.ActivityResultRegistry.dispatchResult(ActivityResultRegistry.java:322)
        at androidx.activity.ComponentActivity.onActivityResult(ComponentActivity.java:634)
        at androidx.fragment.app.FragmentActivity.onActivityResult(FragmentActivity.java:164)
        at com.getcapacitor.BridgeActivity.onActivityResult(BridgeActivity.java:217)
        at android.app.Activity.dispatchActivityResult(Activity.java:7454)
        at android.app.ActivityThread.deliverResults(ActivityThread.java:4353)
        at android.app.ActivityThread.handleSendResult(ActivityThread.java:4402) 
        at android.app.servertransaction.ActivityResultItem.execute(ActivityResultItem.java:49) 
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:108) 
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:68) 
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1808) 
        at android.os.Handler.dispatchMessage(Handler.java:106) 
        at android.os.Looper.loop(Looper.java:193) 
        at android.app.ActivityThread.main(ActivityThread.java:6669) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) 
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858) 

I make a change in the index.js @ router folder to use only history

@g_hult where you able to fix this am facing this issue too

if faced the same issue about was able to fix this you can check in my comment https://forum.quasar-framework.org/topic/7798/how-to-use-save-event-in-q-popup-edit/4

this works for me @update:modelValue="e.accLabel = scope.value" @keyup.enter="scope.set"

<q-popup-edit
                  v-model="e.accLabel"
                  buttons
                  :validate="(val) => val.length > 0"
                  @save="useEditLabel(e)"
                >
                  <template v-slot="scope">
                    <q-input
                      v-model="scope.value"
                      dense
                      autofocus
                      counter
                      :rules="[
                        (val) =>
                          scope.validate(scope.value) || 'More than 5 chars required',
                      ]"
                      @update:modelValue="e.accLabel = scope.value"
                      @keyup.enter="scope.set"
                    >
                      <template v-slot:append>
                        <q-icon name="mdi-lead-pencil" color="primary" />
                      </template>
                    </q-input>
                  </template>
                </q-popup-edit>

have fixed this thanks

have tried @save ="useEditLabel" @save ="useEditLabel()" @save="useEditLabel(null, null)" none of this work but other events were working like @show="useEditLabel()" @before-hide="useEditLabel()" working but @save and @cancel were not

  <div class="q-pa-md">
    <div class="cursor-pointer">
      {{ accLabel }} {{test}}
      <q-popup-edit v-model="label" buttons @save ="useEditLabel">
        <q-input v-model="accLabel" dense autofocus counter />
        <template v-slot:append>
          <q-icon name="mode_edit" color="primary" />
        </template>
      </q-popup-edit>
    </div>
  </div>

</div>

const { ref } = Vue;
const QPopupEdit = Quasar.QPopupEdit;
const app = Vue.createApp({
  components: {
    QPopupEdit
  },
  setup() {
    const test = ref("to change this");
    const accLabel = ref("Click Here");
    function useEditLabel(e='test1',x='test2') {
      console.log(e);
      test.value = e;
    }
    return {
      useEditLabel,
      test,
      accLabel
    };
  }
});

app.use(Quasar, {
  components: {
    QPopupEdit
  }
});
app.mount("#q-app");

for macOS users first brew install --cask wine-stable than try quasar build -m electron -T mas mas can be darwin, linux, mas, win32

also you can buy me a coffee @ Patreon

@metalsadman this now working with the latest q-uploader file not uploading to laravel backend

<q-uploader
        accept="image/*"
        :factory="usefactoryFn"
        label="Select Course Image to Upload"
        multiple
        batch
      />

@aXiDz this issue smallseotools.com metatags.io only flash the html not render the app.js you can try google webmater or yandex it will definitely show your metadata

@metalsadman said in Property '$q' does not exist on type:

context.root.$q

yah it works

this chrome extension help you debug this easily https://chrome.google.com/webstore/detail/mozbar/eakacpaijcpapndcfffdgphdiccmpknp
install is on your chrome refresh your project

do this

<!DOCTYPE html>
<html>
<head>
  <!-- <title><%= htmlWebpackPlugin.options.productName %></title> -->
  <meta charset="utf-8">
  <!-- <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>"> -->
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="viewport"
    content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
  <link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
  <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="statics/icons/favicon-96x96.png">
  <link rel="icon" type="image/ico" href="statics/icons/favicon.ico">
</head>
<body>
  <!-- DO NOT touch the following DIV -->
  <div id="q-app"></div>
</body>
</html>

then from your layout do something like this

  meta () {
    return {
      title: this.$route.name.charAt(0).toUpperCase() + this.$route.name.slice(1),
      titleTemplate: title => `${title} - MywebSiteName`,
      meta: {
        description: { name: 'description', content: this.$route.name + 'My description' },
        keywords: { name: 'keywords', content: `${this.$route.name + }` },
        equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' }
      },
      script: {
        ldJson: {
          type: 'application/ld+json',
          innerHTML: '{ "@context": "http://schema.org" }'
        }
      }
    }
  },

if you find this helpful you can buy me a coffee @ Patreon

clone this to your components https://github.com/diadal/qrmaker

import VueQr from 'components/qrmaker/vue-qr.vue'

 components: {
    VueQr
  },

<vue-qr
            :text="raddress"
            :logoSrc="`img/logo.svg`"
            :colorDark="color"
            :logoBackgroundColor="color"
            :autoColor="true"
            :logoMargin="5"
            :logoScale="0.23"

            ></vue-qr>

paste your index.template.html contents

how to access this.$q under setup()

<script lang="ts">
// import { LoadingBar } from 'quasar'
import { defineComponent, onMounted } from '@vue/composition-api'

export default defineComponent({
  name: 'AuthLayout',
  setup () {
      onMounted(() => {
        this.$q.loadingBar.stop()
        console.log('mounted!')

        })
    return { }
  }
})
</script>