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')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><template>
<button @click="openDialog">Open dialog</button>
</template>
<script>
export default {
methods: {
openDialog() {
this.$dialog.alert('Hello world!')
}
}
}
</script><template>
<button @click="openDialog">Open dialog</button>
</template>
<script setup>
import {inject} from "vue";
const $dialog = inject(Symbol.for('$dialog'))
const openDialog = () => $dialog.alert('Hello world!')
</script><template>
<button v-confirm="'Hello world!'">Open dialog</button>
</template>Typescript is supported out of the box using (SFC: be sure to add the lang="ts" to your script tag):
const $dialog = inject(injectionKey)this.$dialog.alert('Hello!')v-confirm="'Hello!'"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"
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4