make dialogs async

app/components/UserMenu.vue

@@ -40,7 +40,6 @@
       ref="menu"
     >
       <template #item="{ item, props }">
-        <!--suppress HtmlUnknownTarget -->
         <NuxtLink
           v-if="item.route"
           v-slot="{ href, navigate }"
@@ -70,19 +69,21 @@
 </template>
 
 <script setup>
-// const SignInDialog = defineLazyHydrationComponent(
-//   "visible",
-//   () => import("~/components/SignInDialog.vue")
-// )
+import { hydrateOnVisible } from "vue"
 
-// const ChangePasswordDialog = defineLazyHydrationComponent(
-//   "visible",
-//   () => import("~/components/ChangePasswordDialog.vue")
-// )
+const SignInDialog = defineAsyncComponent({
+  loader: () => import("~/components/SignInDialog.vue"),
+  hydrate: hydrateOnVisible()
+})
+
+const ChangePasswordDialog = defineAsyncComponent({
+  loader: () => import("~/components/ChangePasswordDialog.vue"),
+  hydrate: hydrateOnVisible()
+})
 
 const { isSignedIn, signOut, user } = useAuthClient()
-// const dialog = useDialog()
-// const toast = useToast()
+const dynamicDialog = useDynamicDialog()
+const toast = useToast()
 
 const menu = useTemplateRef("menu")
 
@@ -92,7 +93,6 @@ const model = computed(() => {
     { label: "Sign Out", command: doSignOut }
   ]
 
-  // noinspection JSUnresolvedReference
   if (isSignedIn.value && user.value.role === "admin") {
     menu.unshift({
       label: "Dashboard",
@@ -107,12 +107,12 @@ async function doSignOut() {
   await signOut()
   closeMenu()
 
-  // toast.add({
-  //   severity: "success",
-  //   summary: "Signed Out.",
-  //   detail: "You've been signed out.",
-  //   life: 3000
-  // })
+  toast.add({
+    severity: "success",
+    summary: "Signed Out.",
+    detail: "You've been signed out.",
+    life: 3000
+  })
 }
 
 function toggleMenu(event) {
@@ -125,12 +125,14 @@ function closeMenu(_) {
 
 function showSignInDialog() {
   closeMenu()
-  // useOpenDialog(dialog, SignInDialog)
+  // noinspection JSUnresolvedReference
+  dynamicDialog.open(SignInDialog)
 }
 
 function showChangePasswordDialog() {
   closeMenu()
-  // useOpenDialog(dialog, ChangePasswordDialog)
+  // noinspection JSUnresolvedReference
+  dynamicDialog.open(ChangePasswordDialog)
 }
 </script>