Vue SummonSummon components from anywhere

Imperatively render dialogs, toasts and modals in Vue 3 — no template clutter, results delivered as Promises.

Get Started

Live Examples

GitHub

⚡

Imperative API

Call summon(Component, props) from event handlers, stores, routers — even outside component setup.

🤝

Promise-based results

Every summons returns a Promise. await the user's choice instead of wiring v-model and callbacks.

🧩

Zero template clutter

No more hidden dialog blocks in every page. One renders everything for you.

🔄

Live prop updates

controller.update() patches props reactively — perfect for progress bars, wizards and forms.

🔑

Key-based dedupe

Pass a key to guarantee a single instance; re-summoning returns the existing controller.

🎞️

Transitions built-in

Instances are teleported to body and wrapped in Transition, removed safely after leave.

🏝️

Multi-manager isolation

createSummonManager() scopes instances per feature, per test, or per micro-frontend.

🦾

Fully typed

Props and results are inferred from your component via vue-component-type-helpers.

30 seconds to your first summon

vue

<script setup lang="ts">
import { useSummoned } from 'vue-summon'

const { resolve } = useSummoned<boolean>()
</script>

<template>
  <div class="overlay">
    <div class="dialog">
      <p>Delete this file?</p>
      <button @click="resolve(false)">Cancel</button>
      <button @click="resolve(true)">Delete</button>
    </div>
  </div>
</template>

import { summon } from 'vue-summon'
import ConfirmDialog from './ConfirmDialog.vue'

const confirmed = await summon(ConfirmDialog)
if (confirmed) {
  await deleteFile()
}

That is the whole mental model: summon a component, await its answer. No v-model:visible, no teleport targets to manage, no event plumbing through three layers of parents.