vue-dialog-mixin

Vue mixin for dialog components to enable dialog closing on browser's back button clicked

Install

$ npm install vue-dialog-mixin

Requires

Vuex store to store the dialogs state.

Usage

I use vuetify ui framework as an example below:

<template>
  <v-row justify="center">
    <v-btn @click.stop="dialog = true">
      Open Dialog
    </v-btn>

    <v-dialog v-model="dialog">
      <v-card>
        <v-card-title class="headline">Example</v-card-title>
        <v-card-text>
          Click browser's back button to close me.
        </v-card-text>
        <v-card-actions>
          <v-btn @click="closeDialog">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>
<script>
import dialogMixin from "vue-dialog-mixin"

export default {
  mixins: [dialogMixin]
}
</script>

Step 1

Import vue-dialog-mixin in the script section

Step 2

Define vue-dialog-mixin variable in the mixins hook

Step 3

Must use dialog for the dialog v-model directive

Methods

showDialog()

You can use showDialog() method to show the dialog instead of using dialog = true

closeDialog()

It's the same to closing the dialog, you can use closeDialog() instead of dialog = false to close the dialog