Confirmation Dialog
Vuetify component that asks users to confirm before performing an action.
Dependencies
Install
yarn add @lipn/confirm-dialog
Use
- First of all, import the plugin.
import Vue from 'vue';
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import ConfirmDialog from '@lipn/confirm-dialog';
Vue.use(Vuetify);
Vue.use(ConfirmDialog);
new Vue({
el: '#app',
vuetify: new Vuetify(),
// Global access to the dialog via $root.$confirm
mounted() {
this.$root.$confirm = this.$refs.confirmDialog.open;
},
methods: {
async save() {
// wait for confirmation
const confirmation = await this.$root.$confirm(
'Save', // Title
'Are you sure?', // message
{ color: 'primary' } // color
);
if (!confirmation) return;
console.log('saving');
}
};- Insert component where you want to use it:
<html>
<body>
<div id="app">
<v-app>
<v-container>
<!-- Confirm dialog -->
<confirm-dialog ref="confirmDialog"></confirm-dialog>
<!-- rest of the code -->
</v-container>
</v-app>
</div>
</html>