Creating Dialog with script setup from Docs seems to always throw "dialogRef.value.show is not a function"

[ghiscoding]

I'm trying to migrate from Vue 2 to Vue 3 with Composition API and TypeScript with the script setup syntax and if I try the code that is shown in the docs from SFC with script setup (and Composition API) variant it throws the following error

use-dialog-plugin-component.js?v=a87112dc:18         
       Uncaught (in promise) TypeError: dialogRef.value.show is not a function
    at Proxy.show (use-dialog-plugin-component.js?v=a87112dc:18:38)
    at applyState (global-dialog.js?v=a87112dc:70:44)
    at show (global-dialog.js?v=a87112dc:147:7)

However if I then try the next example Composition API variant then the Dialog works correctly without any error.

Am I missing something? is the Docs missing something? ...or is that a bug? I'm not sure what else to try since I'm also new to Vue and Quasar altogether

[metalsadman]

This was fixed some time ago try to see if you are using the latest quasar version otherwise it's a possible regression and should open a bug ticket.

[ghiscoding]

Thanks for the reply, I am on latest versions of everything and it still happens so it must be a regression. My test is simple, and is what I wrote in previous post, it consist of copying the code from these 2 links

1. SFC with script setup (and Composition API) variant => throws the error dialogRef.value.show is not a function
2. Composition API variant => does not throw, all good and is showing correctly

I wasn't able to create a sandbox so I couldn't open an issue for it, but anyway it's really these 2 simple pieces of code from the docs that will show the error

[ghiscoding]

giving it another try 2 years later and the issue still exists, that is when creating a Shared Common Dialog Component. However since I really wanted to use the script setup approach, I decided to use defineExpose to expose the dialogRef and ok, close methods. So I still cannot use useDialogPluginComponent from Quasar in my upstream component because it still throws the same error shown above in script setup, but using defineExpose is enough to get me going. I still wish Quasar would fix this issue though

Here's a basic repro and how I use the defineExpose

<script setup lang="ts">
import { useDialogPluginComponent } from 'quasar';

interface Props {
  closable?: boolean;
  iconName?: string;
  iconColor?: string;
  iconSize?: 'xs' | 'sm' | 'md';
  headerTitle?: string;
  showHeader?: boolean;
}

const { dialogRef, onDialogCancel, onDialogHide, onDialogOK } = useDialogPluginComponent();

withDefaults(defineProps<Props>(), {
  closable: true,
  iconSize: 'sm',
  showHeader: true
});

const emit = defineEmits([
  ...useDialogPluginComponent.emits,
]);

function close() {
  onDialogCancel();
  emit('onClose');
}

function ok(payload?: any) {
  onDialogOK(payload);
  emit('onOk');
}

// expose the dialogRef & some functions for upstream usage
defineExpose({ close, dialogRef, ok });
</script>

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-wrapper">
      <slot name="header" v-if="showHeader">...</slot>

      <q-card class="q-dialog-plugin">
        <div class="dialog--body--wrapper">
          <slot></slot>
        </div>
        <slot name="footer">...</slot>
      </q-card>
    </q-card>
  </q-dialog>
</template>

then I use it like this

<template>
  <shared-common-dialog ref="dialogRef" header-title="Add Link" :show-header="true">
    <q-card class="q-dialog-plugin">
      <q-card-section>
        <q-input ref="labelRef" v-model="labelModel" label="Label" autofocus></q-input>
        <q-input v-model="urlModel" label="URL"></q-input>
      </q-card-section>
    </q-card>

    <!-- Custom footer -->
    <template v-slot:footer>
      <q-card-actions align="right" class="bg-light-grey">
        <q-btn outline label="Cancel" @click="onCancelClick" />
        <q-btn class="btn-standard" label="OK" @click="onOKClick" />
      </q-card-actions>
    </template>
  </shared-common-dialog>
</template>

The reason I created this Shared Common Dialog is because I don't want to repeat a lot of the same code when creating a Quasar Dialog, so this shared common dialog makes the code smaller when creating a ton of dialogs