useLoginDialog()

Provides a globally shared visibility state for the login dialog. Any component can open the dialog; the login dialog UI component (e.g. <SwLoginDialog>) binds to this state via v-model="visible".

Basic Usage

Step 1: mount the login dialog UI once in a layout or root component, bound to visible:

<script setup lang="ts">
const { visible } = useLoginDialog()
</script>

<template>
  <SwLoginDialog v-model="visible" />
</template>

Step 2: in business components, check the login state before an interaction. Pairing with useLoginCheck's dialog mode is the most concise approach — it opens the login dialog automatically when the user is not logged in:

<script setup lang="ts">
const { open } = useLoginDialog()

async function handleComment() {
  // Not logged in: opens the login dialog and returns false; logged in: returns true
  if (!(await useLoginCheck({ mode: 'dialog', openDialog: open }))) return
  // Logged in — continue comment logic
}
</script>

<template>
  <SwButton @click="handleComment">Post Comment</SwButton>
</template>

To simply open the dialog manually without any login check, just call open().

Return Values

Difference from useLoginCheck

• useLoginCheck() — an async login assertion; await it to get a boolean of whether the user is logged in. When not logged in, it redirects to the login page (mode: 'page') or triggers a dialog (mode: 'dialog'). Use it for login checks before an interaction or submission.
• useLoginDialog().open() — only opens the login dialog itself; it does not perform any login check. Use it when you already know you want to show the dialog.

In practice the two are often combined: useLoginCheck({ mode: 'dialog', openDialog }) lets useLoginCheck evaluate the login state and call useLoginDialog's open to pop the dialog when the user is not logged in.

Caveats

• It only toggles dialog visibility — it performs no login check (Rule ULD-001) — the implementation is useState('loginDialogVisible') plus open / close: no isLoggedIn check, not async, returns no login outcome. Using it as a login guard has two consequences: ① already-logged-in users still get the dialog ② you may assume open() awaits success/failure, but it returns nothing.
• For "block only when logged out and wait for the result", use useLoginCheck() — if (!(await useLoginCheck())) return (Rule UL-001). This composable is for pure visibility control (custom trigger timing), or to be passed in as the openDialog argument of useLoginCheck({ mode: 'dialog', openDialog: open }).