Multiple targets

Each group needs exactly one <ModalTarget group="...">. Mounting multiple targets — one per group — lets each group render in a different DOM location, with its own overlay and behavior.

Why use multiple targets

Basic multi-target setup

<script setup lang="ts">
import { ModalOverlay, ModalTarget } from '@kolirt/vue-modal'
</script>

<template>
  <RouterView />

  <!-- Default modals -->
  <ModalTarget group="default">
    <ModalOverlay class="overlay overlay--default" />
  </ModalTarget>

  <!-- Confirm dialogs: darker overlay, Esc disabled -->
  <ModalTarget group="confirm" :disable-close-on-escape="true">
    <ModalOverlay class="overlay overlay--strict" />
  </ModalTarget>
</template>

The confirm target is mounted after default in the DOM, so it paints on top by default. Add explicit z-index if your layout demands it:

<ModalTarget group="default" style="z-index: 100">…</ModalTarget>
<ModalTarget group="confirm" style="z-index: 200">…</ModalTarget>

Different DOM positions

Targets don't have to live in App.vue. Mount a panel target inside a sidebar component:

<template>
  <aside class="sidebar">
    <nav>…</nav>

    <ModalTarget
      group="panel"
      :enable-interact-outside="true"
      :disable-lock-body-scroll="true"
    />
  </aside>
</template>

[data-modal-region] is position: fixed; inset: 0 by default. Override that to anchor the target to its parent:

.sidebar [data-modal-region] {
  position: absolute;
}

Esc and overlay-click use the global topmost

Even with multiple targets, the package keeps one global stack. Esc closes the globally topmost modal — not the topmost per-target. With a default modal underneath a confirm, pressing Esc closes the confirm first; once it's gone, the default modal handles Esc again.

You can disable Esc per group via createModal({ groups }) or per target via the prop:

createModal({
  groups: {
    confirm: { disableCloseOnEscape: true }
  }
})

Per-target overrides

<ModalTarget> props override the registered group config for that specific mount point — useful when you want one group to behave differently in one spot:

<!-- Use the registered confirm config -->
<ModalTarget group="confirm" />

<!-- Same group, but Esc re-enabled here -->
<ModalTarget group="confirm" :disable-close-on-escape="false" />