Added minWidth and minHeigh, updated example

Modal/Modal.vue

@@ -10,7 +10,10 @@
              v-on:mousedown.stop
              ref="modal">
           <slot></slot>
-          <resizer v-if="resizable" @resize="resize"/>
+          <resizer v-if="resizable"
+                   :min-width="minWidth"
+                   :min-height="minHeight"
+                   @resize="resize"/>
         </div>
       </transition>
     </div>
@@ -118,8 +121,8 @@
     computed: {
       position() {
         return {
-          left: (this.window.width - this.modal.width) / 2,
-          top: (this.window.height - this.modal.height) / 2
+          left: Math.max((this.window.width - this.modal.width) / 2, 0),
+          top: Math.max((this.window.height - this.modal.height) / 2, 0)
         }
       },
       modalClass() {
@@ -140,13 +143,17 @@
         this.window.height = window.innerHeight;
 
         if (this.adaptive) {
-          this.modal.width = this.window.width > this.width
+          var width = this.window.width > this.width
             ? this.width
             : this.window.width
 
-          this.modal.height = this.window.height > this.height
+          /*this.modal.height*/
+          var height = this.window.height > this.height
             ? this.height
             : this.window.height;
+
+          this.modal.width = width;//Math.max(width, this.minWidth);
+          this.modal.height = height;//Math.max(height, this.minHeight);
         }
       },
       genEventObject(params) {
@@ -224,7 +231,7 @@
   }
 
   .nice-modal-fade-enter-active, .nice-modal-fade-leave-active {
-    transition: all 0.5s;
+    transition: all 0.4s;
   }
 
   .nice-modal-fade-enter, .nice-modal-fade-leave-active {

Modal/Resizer.vue

@@ -5,13 +5,18 @@
 <script>
 export default {
   name: 'Resizer',
+  props: {
+    minHeight: {
+      type: Number,
+      default: 0
+    },
+    minWidth: {
+      type: Number,
+      default: 0
+    }},
   data() {
     return {
       clicked: false,
-      min: {
-        height: 50,
-        width: 0
-      },
       size: {}
     }
   },
@@ -19,13 +24,11 @@ export default {
     this.$el.addEventListener('mousedown', this.start, false);
   },
   methods: {
-    start(event) {
+    start() {
       this.clicked = true;
 
       window.addEventListener('mousemove', this.mousemove, false);
       window.addEventListener('mouseup', this.stop, false);
-
-      event.stopPropagation();
     },
     stop() {
       this.clicked = false;
@@ -44,24 +47,19 @@ export default {
     resize(event) {
       var el = this.$el.parentElement;
 
-      if (event.clientX < window.innerWidth / 2) {
-        return;
-      }
-
       if (el) {
         var width = event.clientX - el.offsetLeft;
         var height = event.clientY - el.offsetTop;
 
-        if (height < this.min.height) {
-          height = this.min.height;
+        if (height < this.minHeight) {
+          height = this.minHeight;
         }
 
-        if (width < this.min.width) {
-          width = this.min.width;
+        if (width < this.minWidth) {
+          width = this.minWidth;
         }
 
         this.size = {width, height};
-
         el.style.width = width + 'px';
         el.style.height = height + 'px';