Quasar Dialog API App Routing not working properly. Getting "Uncaught TypeError: router.push is not a function" error

Question

I am currently working on a project using Vue 3, Quasar and Firebase. I have a Custom Dialog component that I'm using through Quasar's Dialog API:

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide" v-on:keyup.enter="onOKClick">
    <q-card class="q-dialog-plugin custom-dialog">
      <q-card-section class="text-center">
        <p class="text-white">{{ this.message }}</p>
      </q-card-section>
      <q-card-actions align="center">
        <q-btn
          class="q-mb-md"
          color="secondary"
          label="OK"
          @click="onOKClick"
        />
        <q-btn
          class="q-mb-md"
          color="negative"
          label="Cancelar"
          @click="onDialogCancel"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from "quasar";
import { useRouter } from "vue-router";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  message: {
    type: String,
    default: "",
  },
});

defineEmits([...useDialogPluginComponent.emits]);

const router = useRouter;

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

function onOKClick() {
  onDialogOK();

  router.push({
    name: "home",
  });
}
</script>

What I am trying to achieve is for the dialog to close and the user to be redirected to the Home page once he clicks OK. Console is throwing "Uncaught TypeError: router.push is not a function"

Anyone who knows their way around Quasar's Dialog API who could point me in the right direction would be much appreciated.

Answer 1

Try to execute useRouter function:

const router = useRouter();