fix bug that causes memory leak during SSR

demo/App.vue

@@ -11,6 +11,7 @@
 
 <script>
 import ExampleComponent from './components/ExampleComponent.vue'
+import ConfirmComponent from './components/ConfirmComponent.vue'
 
 export default {
   name: 'App',
@@ -30,12 +31,12 @@ export default {
         attributes: {
           id: 'bar',
         },
-        transition: 'fade',
+        // transition: 'fade',
       })
     },
     openConfirmModal() {
       this.$modal
-        .confirm('Do you like JavaScript?')
+        .confirm('Do you like JavaScript?', { component: ConfirmComponent })
         .then(val => {
           console.log(val)
         })
@@ -78,4 +79,4 @@ export default {
 button:focus {
   background: red;
 }
-</style>
+</style>

demo/index.js

@@ -1,12 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 import VueAccessibleModal from '../src'
-import ConfirmComponent from './components/ConfirmComponent.vue'
 
 Vue.config.productionTip = false
 
 Vue.use(VueAccessibleModal, {
-  confirmComponent: ConfirmComponent,
   transition: 'fade',
 })
 

src/components/VueAccessibleModal.vue

@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import Plugin from '../'
 import focusableElements from '../utils/focusable-elements'
+import { Show, Close } from '../events'
 
 export default {
   name: 'VueAccessibleModal',
@@ -50,8 +50,8 @@ export default {
   },
   computed: {
     transition() {
-      const { options } = this
-      return options.transition
+      const { options, $_accessibleModalOptions } = this
+      return options.transition || $_accessibleModalOptions.transition
     },
     className() {
       const { options, localClasses } = this
@@ -94,8 +94,8 @@ export default {
     },
   },
   created() {
-    Plugin.event.$on('show', this.show)
-    Plugin.event.$on('close', this.close)
+    this.$root.$on(Show, this.show)
+    this.$root.$on(Close, this.close)
   },
   methods: {
     show(component, options) {

src/events/index.js

@@ -0,0 +1,2 @@
+export const Show = 'vue-accessible-modal:show'
+export const Close = 'vue-accessible-modal:close'

src/index.js

@@ -1,52 +1,52 @@
-import VueAccessibleModal from './components/VueAccessibleModal.vue'
+import VueAccessibleModalComponent from './components/VueAccessibleModal.vue'
+import { Show, Close } from './events'
 
-const Plugin = {
-  install(Vue, options) {
-    if (this.installed) {
-      return
-    }
+class VueAccessibleModal {
+  constructor(vm) {
+    this._root = vm.$root
+  }
 
-    this.installed = true
-    this.event = new Vue()
-    this.confirmComponent = options.confirmComponent
-    this.transition = options.transition
+  show(modal, options = {}) {
+    this._root.$emit(Show, modal, options)
+  }
 
-    Vue.prototype.$modal = {
-      show(modal, options = {}) {
-        Plugin.event.$emit('show', modal, Plugin._getOptions(modal, options))
-      },
-      close() {
-        Plugin.event.$emit('close')
-      },
-      confirm(message, options = {}) {
-        // if component is not passed pass the default
-        if (!options.component) {
-          options.component = Plugin.confirmComponent
-        }
-
-        return new Promise((resolve, reject) => {
-          Plugin.event.$emit(
-            'show',
-            options.component,
-            Object.assign({}, Plugin._getOptions(options.component, options), {
-              props: { message, resolve, reject },
-            })
-          )
+  close() {
+    this._root.$emit(Close)
+  }
+
+  confirm(message, options = {}) {
+    return new Promise((resolve, reject) => {
+      this._root.$emit(
+        Show,
+        options.component,
+        Object.assign({}, options, {
+          props: { message, resolve, reject },
         })
+      )
+    })
+  }
+}
+
+/**
+ * Plugin install function.
+ * @param {Function} Vue - the Vue constructor.
+ */
+const Plugin = {
+  install(Vue, options) {
+    if (Vue.$_accessibleModalInstalled) return
+    Vue.$_accessibleModalInstalled = true
+
+    Vue.mixin({
+      beforeCreate() {
+        this.$modal = new VueAccessibleModal(this, options)
       },
-    }
-    Vue.component('VueAccessibleModal', VueAccessibleModal)
-  },
-  _getOptions(component = {}, options = {}) {
-    if (!options.transition) {
-      const hasModalTransition = component.modal && component.modal.transition
+    })
 
-      if (!hasModalTransition) {
-        options.transition = this.transition
-      }
-    }
+    Vue.component('VueAccessibleModal', VueAccessibleModalComponent)
 
-    return options
+    Vue.prototype.$_accessibleModalOptions = {
+      transition: null || options.transition,
+    }
   },
 }