Vue Template Promise

Overview:

The vue-template-promise package is a part of VueUse v10 and allows for the construction of custom Dialogs, Modals, Toasts, and more in Vue. It provides a programmatic approach to calling UI components as promises, using Vue templates for rendering. The package is lightweight, with a gzipped size of less than 400B.

Features:

• Programmatic: Call UI components as promises.
• Template: Use Vue templates for rendering, rather than a new DSL.
• TypeScript: Provides full type safety through generic types.
• Renderless: Gives full control over the UI.
• Lightweight: Has a small gzipped size of less than 400B.
• Transition: Supports Vue transition for animating the UI.

Installation:

To install the vue-template-promise package, follow these steps:

1. Install the package using npm:

npm install vue-template-promise

2. Import the package into your Vue application:

import { useTemplatePromise } from 'vue-template-promise';

3. Use the useTemplatePromise function to create a Vue component that can be used in your templates with \<script setup>.

4. In your template, use the v-slot directive to access the promise and resolve functions. The slot will not be rendered initially, similar to v-if="false", until the start method is called from the component.

5. Once resolve or reject is called in the template, the promise will be resolved or rejected, returning the value you passed in. Once resolved, the slot will be automatically removed.

6. You can pass arguments to the start method using the arguments parameter. In the template slot, you can access the arguments via the args property.

7. You can use Vue transitions to animate the slot.

For more information on Vue transitions, refer to the Vue Transition documentation.

Summary:

The vue-template-promise package is a lightweight solution for constructing custom UI components, such as Dialogs, Modals, and Toasts, in Vue. It provides a programmatic approach to calling UI components as promises and utilizes Vue templates for rendering. With its small size and TypeScript support, the package offers flexibility and control over the UI.