Sometimes, we want to close dialog when ESC key is pressed with Vuetify and Vue.js.

In this article, we’ll look at how to close dialog when ESC key is pressed with Vuetify and Vue.js.

How to close dialog when ESC key is pressed with Vuetify and Vue.js?

To close dialog when ESC key is pressed with Vuetify and Vue.js, we can add a keydown event listener to the dialog.

For instance, we write

<template>
  <div>
    <v-dialog v-model="dialog" @keydown.esc="dialog = false"></v-dialog>
  </div>
</template>

<script>
export default {
  //...
  data: () => ({
    dialog: false,
  }),
  //...
};
</script>

to listen for esc key presses with the @keydown.esc directive.

And if the event is triggered, we set dialog to false to close the dialog.

We set v-model to dialog so that the dialog is open only when dialog is true.

Conclusion

To close dialog when ESC key is pressed with Vuetify and Vue.js, we can add a keydown event listener to the dialog.