DraftScripts Node.js Library e.g. (Vue, React, Angular, Vanilla JS, etc.)

A customizable Vue.js dialog component library with support for success, error, warning, and confirmation dialogs.

View Demo

Explore the documentation

Features

• Customizable dialog types: success, error, warning, and confirm.
• Supports both options API and composition API.
• Promise-based API for handling user responses.
• Customizable CSS class names for styling flexibility.
• Built with Vite for fast and modern development.

Installation

Install the plugin using npm:

npm install @draftscripts/vue

Or using yarn:

yarn add @draftscripts/vue

Usage

Register the Plugin

In your main application file (e.g., main.js or main.ts), register the plugin:

import { createApp } from 'vue';
import App from './App.vue';
import { DialogPlugin } from '@draftscripts/vue';

const app = createApp(App);

const options = {
    // Custom options here
};

app.use(DialogPlugin, options);

app.mount('#app');

Options API Example

To open a dialog using the Options API:

export default {
    methods: {
        showDialog() {
            this.$openDialog('Message', { type: 'success' });
        },
        showConfirmDialog() {
            this.$openDialog('Message', { type: 'confirm' })
                .then((action) => {
                    if (action) {
                        console.log('Confirmed');
                    }
                })
                .catch(() => {
                    console.log('Rejected');
                });
        }
    }
};

Composition API Example

To open a dialog using the Composition API:

import { inject } from 'vue';

export default {
    setup() {
        const openDialog = inject('openDialog');

        const showDialog = () => {
            openDialog('Message', { type: 'success' });
        };

        const showConfirmDialog = () => {
            openDialog('Message', { type: 'confirm' })
                .then((action) => {
                    if (action) {
                        console.log('Confirmed');
                    }
                })
                .catch(() => {
                    console.log('Rejected');
                });
        };

        return {
            showDialog,
            showConfirmDialog
        };
    }
};