promised-component

promised-component

Composable utility for Nuxt 4 to render a component as a modal/dialog and await the result as a Promise. Perfect for cases where you want to use a component (e.g., a form or confirmation dialog) and handle its result in an async/await style.

• ✨ Release Notes
• 🏀 Online playground

Features

• 🧩 Render any component as a modal/dialog and await the result
• � Works with any component that emits onSave and onClose
• 🪄 Type-safe: infers emitted payload types
• �️ No global state or plugin registration required
• 🥷 Zero dependencies, works out of the box in Nuxt 3/Vue 3

Installation

Add to your Nuxt 3 project:

npx nuxi module add promised-component

or

npm install promised-component

Then, add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["promised-component"],
});

Usage

Import and use the composable in your component:

import { Dialog } from "#components";
import { usePromisedComponent } from "promised-component";

const content = ref("");

const handleDemoClicked = async () => {
  const newContent = await usePromisedComponent(Dialog).show({
    title: "Demo Title!",
  });

  if (typeof newContent === "string") {
    content.value = newContent;
  }
};

Requirements for your component

• Must emit onSave (with data) and onClose (no payload) events.
• Props are passed as the argument to show().

Example component:

<template>
  <dialog open>
    <p>{{ title }}</p>
    <form
      method="dialog"
      @submit.prevent.stop="emit('save', content)"
    >
      <input v-model="content" />
      <hr />
      <div>
        <button
          type="button"
          @click="emit('close')"
        >
          Cancel
        </button>
        <button>OK</button>
      </div>
    </form>
  </dialog>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string;
}>();

const emit = defineEmits<{
  (event: "close"): void;
  (event: "save", content: string): void;
}>();

const content = ref("");
</script>

API

usePromisedComponent(component)

Returns an object with a show method:

• show(props): Promise<false | T> — Renders the component, resolves with the payload from onSave, or false if closed/cancelled.

Contribution

# Install dependencies
npm install

# Build the package

npm run build

# Release new version

npm run release