@lipn/confirm-dialog
v1.0.0
Published
Vuetify component that asks users to confirm before performing an action
Readme
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>Showcase
