Api

Plugin

createModal() — the Vue plugin factory for @kolirt/vue-modal.

Plugin

createModal(options?) → Plugin

Creates a Vue plugin that stores per-group behavior configuration and returns it to app.use().

Signature

function createModal(options?: CreateModalOptions): Plugin

interface CreateModalOptions {
  groups?: ModalGroupsConfig
}

Parameters

ParameterTypeRequiredDescription
optionsCreateModalOptionsnoPlugin configuration. Currently a single field — groups — that lets you set behavior defaults per registered group. See ModalGroupsConfig.

The returned plugin's install() method is intentionally empty — createModal does not register any global components. All components (<ModalTarget>, <ModalRoot>, etc.) must be imported and registered locally or globally yourself. The only side-effect of createModal is persisting the groups config so that <ModalTarget> instances can read it at mount time.

CreateModalOptions

interface CreateModalOptions {
  groups?: ModalGroupsConfig
}

type ModalGroupsConfig = {
  [K in ModalGroup]?: ModalBehaviorOptions
}
FieldTypeDescription
groupsModalGroupsConfigOptional map of group keys → behavior defaults. Keys are constrained to your ModalGroupRegistry.

See Types for the full ModalBehaviorOptions field list, and Groups for the group system overview.

Installation example

import { createApp } from 'vue'
import { createModal } from '@kolirt/vue-modal'
import App from './App.vue'

createApp(App)
  .use(
    createModal({
      groups: {
        default: {},
        confirm: {
          disableCloseOnEscape: true,
          disableCloseOnInteractOverlay: true
        },
        preview: {
          enableInteractOutside: true,
          disableLockBodyScroll: true
        }
      }
    })
  )
  .mount('#app')

Config precedence

Group config set here is the lowest priority layer. It is overridden by behavior props on each <ModalTarget> instance. See Behavior options for the full cascade.

Keys of groups are type-checked against ModalGroupRegistry. Passing an undeclared group key is a TypeScript error. Register groups first via declare module augmentation — see Installation.
Copyright © 2026