@kolirt/vue-modalVue modal
Getting Started

Installation

Install the package and register your modal groups.

Installation

Install the package

npm install @kolirt/vue-modal reka-ui

reka-ui is a peer dependency.

Register groups and install the plugin

The package requires every modal to belong to a registered group. Without registered groups the package can't be used at all — there's no implicit 'default'.

If you use TypeScript, declare the registry via module augmentation so every group reference is checked at compile time. Skip the declare module block if you're not on TypeScript — the runtime side works the same way.

main.ts
import { createApp } from 'vue'
import { createModal, type DefineGroups } from '@kolirt/vue-modal'
import App from './App.vue'

// (TypeScript only) Type-check every `group` reference against this list.
declare module '@kolirt/vue-modal' {
  interface ModalGroupRegistry extends DefineGroups<['default']> {}
}

const app = createApp(App)

app.use(
  createModal({
    groups: {
      // per-group behavior options — see /guide/behavior-options for the full list
      default: {}
    }
  })
)

app.mount('#app')

DefineGroups<T> expands a tuple of group names into the registry shape. createModal({ groups }) keys are checked against the registry — passing an undeclared group is a TypeScript error.

Mount a <ModalTarget> for each group

<ModalTarget> is the host where modals of a given group are rendered. <ModalOverlay> renders a backdrop while any modal in that group is open — it's optional.

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

<template>
  <RouterView />

  <ModalTarget group="default">
    <ModalOverlay class="overlay" />
  </ModalTarget>
</template>

<style>
.overlay {
  background: rgba(0, 0, 0, 0.5);
}
.overlay[data-state='open'] {
  animation: overlay-fade-in 200ms ease-out;
}
.overlay[data-state='closed'] {
  animation: overlay-fade-out 200ms ease-in forwards;
}
@keyframes overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes overlay-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
</style>

Each group needs its own <ModalTarget> mount point; otherwise modals opened in that group have nowhere to render.

Introduction

What @kolirt/vue-modal is and the problems it solves.

First modal

Write a modal component, open it imperatively, handle the result.

Copyright © 2026