How do I use slots with a Quasar Dialog Plugin custom component? - quasar-framework

Question

I want to make a custom component for the Quasar Dialog. And inside that component I want to use slots, but I'm not sure how to do that.
This is my CustomDialogComponent.vue where I have defined a cancelBtn slot and a confirmBtn slot:
<template>
<!-- notice dialogRef here -->
<q-dialog ref="dialogRef" #hide="onDialogHide">
<q-card class="q-dialog-plugin">
<q-card-section>
<strong>{{ title }}</strong>
</q-card-section>
<q-card-section>
<slot name="cancelBtn" #click="handleCancelClick"></slot>
<slot name="confirmBtn" #click="handleConfirmClick"></slot>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
import { useDialogPluginComponent } from 'quasar';
defineProps({
title: {
type: String,
required: false,
default: 'Alert',
},
});
defineEmits([
...useDialogPluginComponent.emits,
]);
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
useDialogPluginComponent();
const handleConfirmClick = () => {
console.log('Confirm Button Clicked');
onDialogOK();
};
const handleCancelClick = () => {
console.log('Cancel Button Clicked');
onDialogCancel();
};
</script>
And the Quasar docs show that I can invoke it via a $q.dialog({ ... }) Object. With props etc all set inside that object. So that would look something like this:
<template>
<div #click="showDialog">Show The Dialog</div>
</template>
<script setup lang="ts">
import { useQuasar } from 'quasar';
import CustomDialogComponent from 'src/components/CustomDialogComponent.vue'
const $q = useQuasar();
const showDialog = () => {
$q.dialog({
component: CustomDialogComponent,
// props forwarded to your custom component
componentProps: {
title: 'Alert title goes here',
},
})
};
</script>
But there are no properties inside the Dialog Object for me to pass in my slots. So where can I pass in the cancelBtn and confirmBtn slots I created in CustomDialogComponent.vue?

Answer 1

I asked directly and apparently there is no way to use slots at this time. They might add this functionality later.