State helpers
State helpers
All four exports are reactive ComputedRef values (or functions returning one). They are read-only windows into the internal modal stack. Import them directly from @kolirt/vue-modal.
import { modals, isOpened, groupModals, isGroupOpen } from '@kolirt/vue-modal'
modals
const modals: ComputedRef<ModalItem[]>
All currently mounted modals across every group, in stack order (oldest → newest). Each entry has the public ModalItem shape — see Types.
<script setup lang="ts">
import { modals } from '@kolirt/vue-modal'
</script>
<template>
<!-- Debug overlay -->
<pre v-if="modals.length">{{ modals.map(m => `[${m.group}] ${m.id}`).join('\n') }}</pre>
</template>
isOpened
const isOpened: ComputedRef<boolean>
true when at least one modal is mounted in any group. Use to toggle global UI (backdrop blur, disable scrollbars via CSS, analytics events).
<script setup lang="ts">
import { isOpened } from '@kolirt/vue-modal'
</script>
<template>
<div :class="{ 'pointer-events-none': isOpened }">
<AppSidebar />
</div>
</template>
groupModals(group)
function groupModals(group: ModalGroup): ComputedRef<ModalItem[]>
Returns a ComputedRef that holds only the modals belonging to group. Each call creates a new computed — cache the result in a const rather than calling it in a template expression.
<script setup lang="ts">
import { groupModals } from '@kolirt/vue-modal'
const confirmModals = groupModals('confirm')
</script>
<template>
<span v-if="confirmModals.length" class="badge">
{{ confirmModals.length }} pending
</span>
</template>
Route-guard use case — close all modals in a group before navigating away:
import { groupModals, closeModalsByGroup } from '@kolirt/vue-modal'
import { watchEffect } from 'vue'
import router from './router'
router.beforeEach(async (to, from) => {
if (groupModals('confirm').value.length) {
await closeModalsByGroup('confirm', { ignoreGuard: true, instantExit: true })
}
})
isGroupOpen(group)
function isGroupOpen(group: ModalGroup): ComputedRef<boolean>
Returns a ComputedRef<boolean> that is true when at least one modal in group is mounted. Shorthand for groupModals(group).value.length > 0.
<script setup lang="ts">
import { isGroupOpen } from '@kolirt/vue-modal'
const previewOpen = isGroupOpen('preview')
</script>
<template>
<!-- Disable primary actions while a preview is shown -->
<button :disabled="previewOpen.value" @click="save">Save</button>
</template>