Getting started | Vuejs Dialog (Vue3) (original) (raw)

Vuejs-dialog is a vue plugin that's designed to serve as a replacement to the native confirm and alert that ships with the browser. The it is lightweight and comes with a simple api, yet very customizable and extendable.

Installation

Package manager

// import into the project's entry file
import { createApp } from 'vue';
import VuejsDialog from 'vuejs-dialog';
import AppComponent from './App.vue'

// include the default style
import 'vuejs-dialog/dist/vuejs-dialog.min.css';

// Create the app instance
const app = createApp(AppComponent)

// Install the plugin for the app instance.
app.use(VuejsDialog);

// Mount the application on the dom element with id="app"
app.mount('#app')

Script tag

View it on jsfiddle

<head>
    <!--// Include vuejs-->
    <link href="https://unpkg.com/vuejs-dialog@next/dist/vuejs-dialog.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3.5.4/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vuejs-dialog@next/dist/vuejs-dialog.umd.js"></script>
</head>
<body>
    <div id="app">
        <button @click="$dialog.alert(message)">
            {{ message }}
        </button>
    </div>
    <script>
        // Create Vue 3 app
        const app = window.Vue.createApp({
            data() {
                return {
                    message: 'Hello Vue 3!',
                };
            },
        });

        app.use(window.VuejsDialog.PromiseDialog, {
            animation: 'bounce'
        })

        // Mount the app to the DOM element
        app.mount('#app');
    </script>
</body>

Opening a dialog

Options API

<template>
    <button @click="openDialog">Open dialog</button>
</template>
<script>
export default {
    methods: {
        openDialog() {
            this.$dialog.alert('Hello world!')
        }
    }
}
</script>

Composition API

<template>
    <button @click="openDialog">Open dialog</button>
</template>
<script setup>
    import {inject} from "vue";
    const <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>d</mi><mi>i</mi><mi>a</mi><mi>l</mi><mi>o</mi><mi>g</mi><mo>=</mo><mi>i</mi><mi>n</mi><mi>j</mi><mi>e</mi><mi>c</mi><mi>t</mi><mo stretchy="false">(</mo><mi>S</mi><mi>y</mi><mi>m</mi><mi>b</mi><mi>o</mi><mi>l</mi><mi mathvariant="normal">.</mi><mi>f</mi><mi>o</mi><mi>r</mi><msup><mo stretchy="false">(</mo><mo mathvariant="normal" lspace="0em" rspace="0em">′</mo></msup></mrow><annotation encoding="application/x-tex">dialog = inject(Symbol.for(&#x27;</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord mathnormal">d</span><span class="mord mathnormal">ia</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal">o</span><span class="mord mathnormal" style="margin-right:0.03588em;">g</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:1.0019em;vertical-align:-0.25em;"></span><span class="mord mathnormal" style="margin-right:0.05724em;">inj</span><span class="mord mathnormal">ec</span><span class="mord mathnormal">t</span><span class="mopen">(</span><span class="mord mathnormal" style="margin-right:0.05764em;">S</span><span class="mord mathnormal" style="margin-right:0.03588em;">y</span><span class="mord mathnormal">mb</span><span class="mord mathnormal">o</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.10764em;">f</span><span class="mord mathnormal" style="margin-right:0.02778em;">or</span><span class="mopen"><span class="mopen">(</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.7519em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">′</span></span></span></span></span></span></span></span></span></span></span></span>dialog'))
    const openDialog = () => $dialog.alert('Hello world!')
</script>

Directives API

<template>
    <button v-confirm="'Hello world!'">Open dialog</button>
</template>

Typescript support

Typescript is supported out of the box using (SFC: be sure to add the lang="ts" to your script tag):

Info

You may want to look at the module resolution option (introduced in Typescript 5.0) if you are experiencing issues with typescript especially if your config is set to "bundler"