diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..33075ad
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "semi": false
+}
diff --git a/build/webpack.srr-no-css.config.js b/build/webpack.srr-no-css.config.js
new file mode 100644
index 0000000..f3d516b
--- /dev/null
+++ b/build/webpack.srr-no-css.config.js
@@ -0,0 +1,24 @@
+const path = require('path')
+const webpack = require('webpack')
+const merge = require('webpack-merge')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+const base = require('./webpack.srr.config')
+
+module.exports = merge(base, {
+  plugins: [new ExtractTextPlugin('styles.css')],
+  output: {
+    filename: 'ssr.pure.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader'
+        })
+      }
+    ]
+  }
+})
diff --git a/build/webpack.server.config.js b/build/webpack.ssr.config.js
similarity index 100%
rename from build/webpack.server.config.js
rename to build/webpack.ssr.config.js
diff --git a/package.json b/package.json
index 11a198b..9c2b84f 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,11 @@
   },
   "scripts": {
     "build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
-    "build:server": "webpack --config ./build/webpack.server.config.js --progress --hide-modules",
+    "build:srr": "webpack --config ./build/webpack.srr.config.js --progress --hide-modules",
+    "build:srr-no-css": "webpack --config ./build/webpack.srr-no-css.config.js --progress --hide-modules",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
     "unit": "./node_modules/karma/bin/karma start test/unit/karma.conf.js",
-    "build": "npm run lint && npm run unit && npm run build:client && npm run build:server"
+    "build": "npm run lint && npm run unit && npm run build:client && npm run build:srr"
   },
   "license": "MIT",
   "devDependencies": {
diff --git a/src/Modal.vue b/src/Modal.vue
index 6115c6c..60b937c 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -28,673 +28,679 @@
   </transition>
 </template>
 <script>
-  import Modal       from './index'
-  import Resizer     from './Resizer.vue'
-  import { inRange } from './util'
-  import parseNumber from './parser'
+import Modal from "./index";
+import Resizer from "./Resizer.vue";
+import { inRange } from "./util";
+import parseNumber from "./parser";
 
-  export default {
-    name: 'VueJsModal',
-    props: {
-      name: {
-        required: true,
-        type: String
-      },
-      delay: {
-        type: Number,
-        default: 0
-      },
-      resizable: {
-        type: Boolean,
-        default: false
-      },
-      adaptive: {
-        type: Boolean,
-        default: false
-      },
-      draggable: {
-        type: [Boolean, String],
-        default: false
-      },
-      scrollable: {
-        type: Boolean,
-        default: false
-      },
-      reset: {
-        type: Boolean,
-        default: false
-      },
-      transition: {
-        type: String
-      },
-      clickToClose: {
-        type: Boolean,
-        default: true
-      },
-      classes: {
-        type: [String, Array],
-        default: 'v--modal'
-      },
-      minWidth: {
-        type: Number,
-        default: 0,
-        validator (value) {
-          return value >= 0
-        }
-      },
-      minHeight: {
-        type: Number,
-        default: 0,
-        validator (value) {
-          return value >= 0
-        }
-      },
-      width: {
-        type: [Number, String],
-        default: 600,
-        validator (value) {
-          if (typeof value === 'string') {
-            let width = parseNumber(value)
-            return (width.type === '%' || width.type === 'px') &&
-              width.value > 0
-          }
-
-          return value >= 0
-        }
-      },
-      height: {
-        type: [Number, String],
-        default: 300,
-        validator (value) {
-          if (typeof value === 'string') {
-            if (value === 'auto') {
-              return true
-            }
-
-            let height = parseNumber(value)
-            return (height.type === '%' || height.type === 'px') &&
-              height.value > 0
-          }
-
-          return value >= 0
-        }
-      },
-      pivotX: {
-        type: Number,
-        default: 0.5,
-        validator (value) {
-          return value >= 0 && value <= 1
-        }
-      },
-      pivotY: {
-        type: Number,
-        default: 0.5,
-        validator (value) {
-          return value >= 0 && value <= 1
-        }
+export default {
+  name: "VueJsModal",
+  props: {
+    name: {
+      required: true,
+      type: String
+    },
+    delay: {
+      type: Number,
+      default: 0
+    },
+    resizable: {
+      type: Boolean,
+      default: false
+    },
+    adaptive: {
+      type: Boolean,
+      default: false
+    },
+    draggable: {
+      type: [Boolean, String],
+      default: false
+    },
+    scrollable: {
+      type: Boolean,
+      default: false
+    },
+    reset: {
+      type: Boolean,
+      default: false
+    },
+    transition: {
+      type: String
+    },
+    clickToClose: {
+      type: Boolean,
+      default: true
+    },
+    classes: {
+      type: [String, Array],
+      default: "v--modal"
+    },
+    minWidth: {
+      type: Number,
+      default: 0,
+      validator(value) {
+        return value >= 0;
       }
     },
-    components: {
-      Resizer
-    },
-    data () {
-      return {
-        visible: false,
-
-        visibility: {
-          modal: false,
-          overlay: false
-        },
-
-        shift: {
-          left: 0,
-          top: 0
-        },
-
-        modal: {
-          width: 0,
-          widthType: 'px',
-          height: 0,
-          heightType: 'px',
-          renderedHeight: 0
-        },
-
-        window: {
-          width: 0,
-          height: 0
-        },
-
-        mutationObserver: null
+    minHeight: {
+      type: Number,
+      default: 0,
+      validator(value) {
+        return value >= 0;
       }
     },
-    watch: {
-      /**
+    width: {
+      type: [Number, String],
+      default: 600,
+      validator(value) {
+        if (typeof value === "string") {
+          let width = parseNumber(value);
+          return (width.type === "%" || width.type === "px") && width.value > 0;
+        }
+
+        return value >= 0;
+      }
+    },
+    height: {
+      type: [Number, String],
+      default: 300,
+      validator(value) {
+        if (typeof value === "string") {
+          if (value === "auto") {
+            return true;
+          }
+
+          let height = parseNumber(value);
+          return (
+            (height.type === "%" || height.type === "px") && height.value > 0
+          );
+        }
+
+        return value >= 0;
+      }
+    },
+    pivotX: {
+      type: Number,
+      default: 0.5,
+      validator(value) {
+        return value >= 0 && value <= 1;
+      }
+    },
+    pivotY: {
+      type: Number,
+      default: 0.5,
+      validator(value) {
+        return value >= 0 && value <= 1;
+      }
+    }
+  },
+  components: {
+    Resizer
+  },
+  data() {
+    return {
+      visible: false,
+
+      visibility: {
+        modal: false,
+        overlay: false
+      },
+
+      shift: {
+        left: 0,
+        top: 0
+      },
+
+      modal: {
+        width: 0,
+        widthType: "px",
+        height: 0,
+        heightType: "px",
+        renderedHeight: 0
+      },
+
+      window: {
+        width: 0,
+        height: 0
+      },
+
+      mutationObserver: null
+    };
+  },
+  watch: {
+    /**
        * Sets the visibility of overlay and modal.
        * Events 'opened' and 'closed' is called here
        * inside `setTimeout` and `$nextTick`, after the DOM changes.
        * This fixes `$refs.modal` `undefined` bug (fixes #15)
        */
-      visible (value) {
-        if (value) {
-          this.visibility.overlay = true
+    visible(value) {
+      if (value) {
+        this.visibility.overlay = true;
 
-          setTimeout(() => {
-            this.visibility.modal = true
-            this.$nextTick(() => {
-              this.addDraggableListeners()
-              this.callAfterEvent(true)
-            })
-          }, this.delay)
-        } else {
-          this.visibility.modal = false
+        setTimeout(() => {
+          this.visibility.modal = true;
+          this.$nextTick(() => {
+            this.addDraggableListeners();
+            this.callAfterEvent(true);
+          });
+        }, this.delay);
+      } else {
+        this.visibility.modal = false;
 
-          setTimeout(() => {
-            this.visibility.overlay = false
-            this.$nextTick(() => {
-              this.removeDraggableListeners()
-              this.callAfterEvent(false)
-            })
-          }, this.delay)
-        }
+        setTimeout(() => {
+          this.visibility.overlay = false;
+          this.$nextTick(() => {
+            this.removeDraggableListeners();
+            this.callAfterEvent(false);
+          });
+        }, this.delay);
       }
-    },
-    created () {
-      this.setInitialSize()
-    },
-    /**
+    }
+  },
+  created() {
+    this.setInitialSize();
+  },
+  /**
      * Sets global listeners
      */
-    beforeMount () {
-      Modal.event.$on('toggle', (name, state, params) => {
-        if (name === this.name) {
-          if (typeof state === 'undefined') {
-            state = !this.visible
-          }
-
-          this.toggle(state, params)
+  beforeMount() {
+    Modal.event.$on("toggle", (name, state, params) => {
+      if (name === this.name) {
+        if (typeof state === "undefined") {
+          state = !this.visible;
         }
-      })
 
-      window.addEventListener('resize', this.onWindowResize)
-      this.onWindowResize()
-      /**
+        this.toggle(state, params);
+      }
+    });
+
+    window.addEventListener("resize", this.onWindowResize);
+    this.onWindowResize();
+    /**
        * Making sure that autoHeight is enabled when using "scrollable"
        */
-      if (this.scrollable && !this.isAutoHeight) {
-        console.warn(`Modal "${this.name}" has scrollable flag set to true ` +
-          `but height is not "auto" (${this.height})`)
-      }
-      /**
+    if (this.scrollable && !this.isAutoHeight) {
+      console.warn(
+        `Modal "${this.name}" has scrollable flag set to true ` +
+          `but height is not "auto" (${this.height})`
+      );
+    }
+    /**
        * Only observe when using height: 'auto'
        * The callback will be called when modal DOM changes,
        * this is for updating the `top` attribute for height 'auto' modals.
        */
-      if (this.isAutoHeight) {
-        /**
+    if (this.isAutoHeight) {
+      /**
          * MutationObserver feature detection:
          * Detects if MutationObserver is available, return false if not.
          * No polyfill is provided here, so height 'auto' recalculation will
          * simply stay at its initial height (won't crash).
          * (Provide polyfill to support IE < 11)
          */
-        const MutationObserver = (function () {
-          const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
+      const MutationObserver = (function() {
+        const prefixes = ["", "WebKit", "Moz", "O", "Ms"];
 
-          for (let i = 0; i < prefixes.length; i++) {
-            let name = prefixes[i] + 'MutationObserver'
+        for (let i = 0; i < prefixes.length; i++) {
+          let name = prefixes[i] + "MutationObserver";
 
-            if (name in window) {
-              return window[name]
-            }
+          if (name in window) {
+            return window[name];
           }
-          return false
-        }())
-
-        if (MutationObserver) {
-          this.mutationObserver = new MutationObserver(mutations => {
-            this.updateRenderedHeight()
-          })
         }
-      }
+        return false;
+      })();
 
-      if (this.clickToClose) {
-        window.addEventListener('keyup', this.onEscapeKeyUp)
+      if (MutationObserver) {
+        this.mutationObserver = new MutationObserver(mutations => {
+          this.updateRenderedHeight();
+        });
       }
-    },
-    /**
+    }
+
+    if (this.clickToClose) {
+      window.addEventListener("keyup", this.onEscapeKeyUp);
+    }
+  },
+  /**
      * Removes "resize" window listener
      */
-    beforeDestroy () {
-      window.removeEventListener('resize', this.onWindowResize)
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onWindowResize);
 
-      if (this.clickToClose) {
-        window.removeEventListener('keyup', this.onEscapeKeyUp)
-      }
-    },
-    computed: {
-      /**
+    if (this.clickToClose) {
+      window.removeEventListener("keyup", this.onEscapeKeyUp);
+    }
+  },
+  computed: {
+    /**
        * Returns true if height is set to "auto"
        */
-      isAutoHeight () {
-        return this.modal.heightType === 'auto'
-      },
-      /**
+    isAutoHeight() {
+      return this.modal.heightType === "auto";
+    },
+    /**
        * Calculates and returns modal position based on the
        * pivots, window size and modal size
        */
-      position () {
-        const { window, shift, pivotX, pivotY,
-          trueModalWidth, trueModalHeight } = this
+    position() {
+      const {
+        window,
+        shift,
+        pivotX,
+        pivotY,
+        trueModalWidth,
+        trueModalHeight
+      } = this;
 
-        const maxLeft = window.width - trueModalWidth
-        const maxTop = window.height - trueModalHeight
+      const maxLeft = window.width - trueModalWidth;
+      const maxTop = window.height - trueModalHeight;
 
-        const left = shift.left + pivotX * maxLeft
-        const top = shift.top + pivotY * maxTop
+      const left = shift.left + pivotX * maxLeft;
+      const top = shift.top + pivotY * maxTop;
 
-        return {
-          left: inRange(0, maxLeft, left),
-          top: inRange(0, maxTop, top)
-        }
-      },
-      /**
+      return {
+        left: inRange(0, maxLeft, left),
+        top: inRange(0, maxTop, top)
+      };
+    },
+    /**
        * Returns pixel width (if set with %) and makes sure that modal size
        * fits the window
        */
-      trueModalWidth () {
-        const { window, modal, adaptive, minWidth } = this
+    trueModalWidth() {
+      const { window, modal, adaptive, minWidth } = this;
 
-        const value = modal.widthType === '%'
+      const value =
+        modal.widthType === "%"
           ? window.width / 100 * modal.width
-          : modal.width
+          : modal.width;
 
-        return adaptive
-          ? inRange(minWidth, window.width, value)
-          : value
-      },
-      /**
+      return adaptive ? inRange(minWidth, window.width, value) : value;
+    },
+    /**
        * Returns pixel height (if set with %) and makes sure that modal size
        * fits the window.
        *
        * Returns modal.renderedHeight if height set as "auto"
        */
-      trueModalHeight () {
-        const { window, modal, isAutoHeight, adaptive } = this
+    trueModalHeight() {
+      const { window, modal, isAutoHeight, adaptive } = this;
 
-        const value = (modal.heightType === '%')
+      const value =
+        modal.heightType === "%"
           ? window.height / 100 * modal.height
-          : modal.height
+          : modal.height;
 
-        if (isAutoHeight) {
-          // use renderedHeight when height 'auto'
-          return this.modal.renderedHeight
-        }
+      if (isAutoHeight) {
+        // use renderedHeight when height 'auto'
+        return this.modal.renderedHeight;
+      }
 
-        return adaptive
-          ? inRange(this.minHeight, this.window.height, value)
-          : value
-      },
-      /**
+      return adaptive
+        ? inRange(this.minHeight, this.window.height, value)
+        : value;
+    },
+    /**
        * Returns class list for screen overlay (modal background)
        */
-      overlayClass () {
-        return {
-          'v--modal-overlay': true,
-          'scrollable': this.scrollable && this.isAutoHeight
-        }
-      },
-      /**
+    overlayClass() {
+      return {
+        "v--modal-overlay": true,
+        scrollable: this.scrollable && this.isAutoHeight
+      };
+    },
+    /**
        * Returns class list for modal itself
        */
-      modalClass () {
-        return ['v--modal-box', this.classes]
-      },
-      /**
+    modalClass() {
+      return ["v--modal-box", this.classes];
+    },
+    /**
        * CSS styles for position and size of the modal
        */
-      modalStyle () {
-        return {
-          top: this.position.top + 'px',
-          left: this.position.left + 'px',
-          width: this.trueModalWidth + 'px',
-          height: this.isAutoHeight
-            ? 'auto'
-            : (this.trueModalHeight + 'px')
-        }
-      }
-    },
-    methods: {
-      /**
+    modalStyle() {
+      return {
+        top: this.position.top + "px",
+        left: this.position.left + "px",
+        width: this.trueModalWidth + "px",
+        height: this.isAutoHeight ? "auto" : this.trueModalHeight + "px"
+      };
+    }
+  },
+  methods: {
+    /**
        * Initializes modal's size & position,
        * if "reset" flag is set to true - this function will be called
        * every time "beforeOpen" is triggered
        */
-      setInitialSize () {
-        let { modal } = this
-        let width = parseNumber(this.width)
-        let height = parseNumber(this.height)
+    setInitialSize() {
+      let { modal } = this;
+      let width = parseNumber(this.width);
+      let height = parseNumber(this.height);
 
-        modal.width = width.value
-        modal.widthType = width.type
-        modal.height = height.value
-        modal.heightType = height.type
-      },
+      modal.width = width.value;
+      modal.widthType = width.type;
+      modal.height = height.value;
+      modal.heightType = height.type;
+    },
 
-      onEscapeKeyUp (event) {
-        if (event.which === 27 && this.visible) {
-          this.$modal.hide(this.name)
-        }
-      },
+    onEscapeKeyUp(event) {
+      if (event.which === 27 && this.visible) {
+        this.$modal.hide(this.name);
+      }
+    },
 
-      onWindowResize () {
-        this.window.width = window.innerWidth
-        this.window.height = window.innerHeight
-      },
+    onWindowResize() {
+      this.window.width = window.innerWidth;
+      this.window.height = window.innerHeight;
+    },
 
-      /**
+    /**
        * Generates event object
        */
-      genEventObject (params) {
-        var eventData = {
-          name: this.name,
-          timestamp: Date.now(),
-          canceled: false,
-          ref: this.$refs.modal
-        }
+    genEventObject(params) {
+      var eventData = {
+        name: this.name,
+        timestamp: Date.now(),
+        canceled: false,
+        ref: this.$refs.modal
+      };
 
-        return Object.assign(eventData, params || {})
-      },
-      /**
+      return Object.assign(eventData, params || {});
+    },
+    /**
        * Event handler which is triggered on modal resize
        */
-      onModalResize (event) {
-        this.modal.widthType = 'px'
-        this.modal.width = event.size.width
+    onModalResize(event) {
+      this.modal.widthType = "px";
+      this.modal.width = event.size.width;
 
-        this.modal.heightType = 'px'
-        this.modal.height = event.size.height
+      this.modal.heightType = "px";
+      this.modal.height = event.size.height;
 
-        const { size } = this.modal
-        const resizeEvent = this.genEventObject({ size })
+      const { size } = this.modal;
+      const resizeEvent = this.genEventObject({ size });
 
-        this.$emit('resize', resizeEvent)
-      },
-      /**
+      this.$emit("resize", resizeEvent);
+    },
+    /**
        * Event handler which is triggered on $modal.show and $modal.hight
        * BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
        * but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
        */
-      toggle (state, params) {
-        const { reset, scrollable, visible } = this
+    toggle(state, params) {
+      const { reset, scrollable, visible } = this;
 
-        const beforeEventName = visible
-          ? 'before-close'
-          : 'before-open'
+      const beforeEventName = visible ? "before-close" : "before-open";
 
-        if (beforeEventName === 'before-open') {
-          /**
+      if (beforeEventName === "before-open") {
+        /**
            * Need to unfocus previously focused element, otherwise
            * all keypress events (ESC press, for example) will trigger on that element.
            */
-          if (document.activeElement) {
-            document.activeElement.blur()
-          }
-
-          if (reset) {
-            this.setInitialSize()
-
-            this.shift.left = 0
-            this.shift.top = 0
-          }
-
-          if (scrollable) {
-            document.body.classList.add('v--modal-block-scroll')
-          }
-        } else {
-          if (scrollable) {
-            document.body.classList.remove('v--modal-block-scroll')
-          }
+        if (document.activeElement) {
+          document.activeElement.blur();
         }
 
-        let stopEventExecution = false
+        if (reset) {
+          this.setInitialSize();
 
-        const stop = () => {
-          stopEventExecution = true
+          this.shift.left = 0;
+          this.shift.top = 0;
         }
 
-        const beforeEvent = this.genEventObject({ stop, state, params })
-
-        this.$emit(beforeEventName, beforeEvent)
-
-        if (!stopEventExecution) {
-          this.visible = state
-          // after events are called in `watch.visible`
+        if (scrollable) {
+          document.body.classList.add("v--modal-block-scroll");
         }
-      },
-
-      getDraggableElement () {
-        var selector = typeof this.draggable !== 'string'
-          ? '.v--modal-box'
-          : this.draggable
-
-        if (selector) {
-          var handler = this.$refs.overlay.querySelector(selector)
-          if (handler) {
-            return handler
-          }
+      } else {
+        if (scrollable) {
+          document.body.classList.remove("v--modal-block-scroll");
         }
-      },
-      /**
+      }
+
+      let stopEventExecution = false;
+
+      const stop = () => {
+        stopEventExecution = true;
+      };
+
+      const beforeEvent = this.genEventObject({ stop, state, params });
+
+      this.$emit(beforeEventName, beforeEvent);
+
+      if (!stopEventExecution) {
+        this.visible = state;
+        // after events are called in `watch.visible`
+      }
+    },
+
+    getDraggableElement() {
+      var selector =
+        typeof this.draggable !== "string" ? ".v--modal-box" : this.draggable;
+
+      if (selector) {
+        var handler = this.$refs.overlay.querySelector(selector);
+        if (handler) {
+          return handler;
+        }
+      }
+    },
+    /**
        * Event handler that is triggered when background overlay is clicked
        */
-      onBackgroundClick () {
-        if (this.clickToClose) {
-          this.toggle(false)
-        }
-      },
+    onBackgroundClick() {
+      if (this.clickToClose) {
+        this.toggle(false);
+      }
+    },
 
-      addDraggableListeners () {
-        if (!this.draggable) {
-          return
-        }
+    addDraggableListeners() {
+      if (!this.draggable) {
+        return;
+      }
 
-        let dragger = this.getDraggableElement()
+      let dragger = this.getDraggableElement();
 
-        if (dragger) {
-          let startX = 0
-          let startY = 0
-          let cachedShiftX = 0
-          let cachedShiftY = 0
+      if (dragger) {
+        let startX = 0;
+        let startY = 0;
+        let cachedShiftX = 0;
+        let cachedShiftY = 0;
 
-          let getPosition = (event) => {
-            return event.touches && event.touches.length > 0
-              ? event.touches[0]
-              : event
+        let getPosition = event => {
+          return event.touches && event.touches.length > 0
+            ? event.touches[0]
+            : event;
+        };
+
+        let mousedown = event => {
+          let target = event.target;
+
+          if (target && target.nodeName === "INPUT") {
+            return;
           }
 
-          let mousedown = (event) => {
-            let target = event.target
+          let { clientX, clientY } = getPosition(event);
 
-            if (target && target.nodeName === 'INPUT') {
-              return
-            }
+          document.addEventListener("mousemove", mousemove);
+          document.addEventListener("mouseup", mouseup);
 
-            let { clientX, clientY } = getPosition(event)
+          document.addEventListener("touchmove", mousemove);
+          document.addEventListener("touchend", mouseup);
 
-            document.addEventListener('mousemove', mousemove)
-            document.addEventListener('mouseup', mouseup)
-
-            document.addEventListener('touchmove', mousemove)
-            document.addEventListener('touchend', mouseup)
-
-            startX = clientX
-            startY = clientY
-            cachedShiftX = this.shift.left
-            cachedShiftY = this.shift.top
+          startX = clientX;
+          startY = clientY;
+          cachedShiftX = this.shift.left;
+          cachedShiftY = this.shift.top;
 
           //  event.preventDefault()
-          }
+        };
 
-          let mousemove = (event) => {
-            let { clientX, clientY } = getPosition(event)
+        let mousemove = event => {
+          let { clientX, clientY } = getPosition(event);
 
-            this.shift.left = cachedShiftX + clientX - startX
-            this.shift.top = cachedShiftY + clientY - startY
-            event.preventDefault()
-          }
+          this.shift.left = cachedShiftX + clientX - startX;
+          this.shift.top = cachedShiftY + clientY - startY;
+          event.preventDefault();
+        };
 
-          let mouseup = (event) => {
-            document.removeEventListener('mousemove', mousemove)
-            document.removeEventListener('mouseup', mouseup)
+        let mouseup = event => {
+          document.removeEventListener("mousemove", mousemove);
+          document.removeEventListener("mouseup", mouseup);
 
-            document.removeEventListener('touchmove', mousemove)
-            document.removeEventListener('touchend', mouseup)
+          document.removeEventListener("touchmove", mousemove);
+          document.removeEventListener("touchend", mouseup);
 
-            event.preventDefault()
-          }
+          event.preventDefault();
+        };
 
-          dragger.addEventListener('mousedown', mousedown)
-          dragger.addEventListener('touchstart', mousedown)
-        }
-      },
+        dragger.addEventListener("mousedown", mousedown);
+        dragger.addEventListener("touchstart", mousedown);
+      }
+    },
 
-      removeDraggableListeners () {
+    removeDraggableListeners() {
       //  console.log('removing draggable handlers')
-      },
+    },
 
-      /**
+    /**
        * 'opened' and 'closed' events are `$emit`ed here.
        * This is called in watch.visible.
        * Because modal DOM updates are async,
        * wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
        * (fixes #15)
        */
-      callAfterEvent (state) {
-        if (state) {
-          this.connectObserver()
-        } else {
-          this.disconnectObserver()
-        }
+    callAfterEvent(state) {
+      if (state) {
+        this.connectObserver();
+      } else {
+        this.disconnectObserver();
+      }
 
-        const eventName = state ? 'opened' : 'closed'
-        const event = this.genEventObject({ state })
+      const eventName = state ? "opened" : "closed";
+      const event = this.genEventObject({ state });
 
-        this.$emit(eventName, event)
-      },
+      this.$emit(eventName, event);
+    },
 
-      /**
+    /**
        * Update $data.modal.renderedHeight using getBoundingClientRect.
        * This method is called when:
        * 1. modal opened
        * 2. MutationObserver's observe callback
        */
-      updateRenderedHeight () {
-        if (this.$refs.modal) {
-          this.modal.renderedHeight = this.$refs.modal
-            .getBoundingClientRect().height
-        }
-      },
+    updateRenderedHeight() {
+      if (this.$refs.modal) {
+        this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height;
+      }
+    },
 
-      /**
+    /**
        * Start observing modal's DOM, if childList or subtree changes,
        * the callback (registered in beforeMount) will be called.
        */
-      connectObserver () {
-        if (this.mutationObserver) {
-          this.mutationObserver.observe(this.$refs.modal, {
-            childList: true,
-            attributes: true,
-            subtree: true
-          })
-        }
-      },
+    connectObserver() {
+      if (this.mutationObserver) {
+        this.mutationObserver.observe(this.$refs.modal, {
+          childList: true,
+          attributes: true,
+          subtree: true
+        });
+      }
+    },
 
-      /**
+    /**
        * Disconnects MutationObserver
        */
-      disconnectObserver () {
-        if (this.mutationObserver) {
-          this.mutationObserver.disconnect()
-        }
+    disconnectObserver() {
+      if (this.mutationObserver) {
+        this.mutationObserver.disconnect();
       }
     }
   }
+};
 </script>
 <style>
-  .v--modal-block-scroll {
-    overflow: hidden;
-    position: fixed;
-    width: 100vw;
-  }
+.v--modal-block-scroll {
+  overflow: hidden;
+  position: fixed;
+  width: 100vw;
+}
 
-  .v--modal-overlay {
-    position: fixed;
-    box-sizing: border-box;
-    left: 0;
-    top: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.2);
-    z-index: 999;
-    opacity: 1;
-  }
+.v--modal-overlay {
+  position: fixed;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 999;
+  opacity: 1;
+}
 
-  .v--modal-overlay.scrollable {
-    height: 100%;
-    min-height: 100vh;
-    overflow-y: auto;
-    padding-bottom: 10px;
-    -webkit-overflow-scrolling: touch;
-  }
+.v--modal-overlay.scrollable {
+  height: 100%;
+  min-height: 100vh;
+  overflow-y: auto;
+  padding-bottom: 10px;
+  -webkit-overflow-scrolling: touch;
+}
 
-  .v--modal-overlay .v--modal-box {
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
+.v--modal-overlay .v--modal-box {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
 
-  .v--modal-overlay.scrollable .v--modal-box {
-    margin-bottom: 2px;
-    /* transition: top 0.2s ease; */
-  }
+.v--modal-overlay.scrollable .v--modal-box {
+  margin-bottom: 2px;
+  /* transition: top 0.2s ease; */
+}
 
-  .v--modal {
-    background-color: white;
-    text-align: left;
-    border-radius: 3px;
-    box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);
-    padding: 0;
-  }
+.v--modal {
+  background-color: white;
+  text-align: left;
+  border-radius: 3px;
+  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);
+  padding: 0;
+}
 
-  .v--modal.v--modal-fullscreen {
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    left: 0;
-    top: 0;
-  }
+.v--modal.v--modal-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  left: 0;
+  top: 0;
+}
 
-  .v--modal-top-right {
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
+.v--modal-top-right {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
 
-  .overlay-fade-enter-active, .overlay-fade-leave-active {
-    transition: all 0.2s;
-  }
+.overlay-fade-enter-active,
+.overlay-fade-leave-active {
+  transition: all 0.2s;
+}
 
-  .overlay-fade-enter, .overlay-fade-leave-active {
-    opacity: 0;
-  }
+.overlay-fade-enter,
+.overlay-fade-leave-active {
+  opacity: 0;
+}
 
-  .nice-modal-fade-enter-active, .nice-modal-fade-leave-active {
-    transition: all 0.4s;
-  }
+.nice-modal-fade-enter-active,
+.nice-modal-fade-leave-active {
+  transition: all 0.4s;
+}
 
-  .nice-modal-fade-enter, .nice-modal-fade-leave-active {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
+.nice-modal-fade-enter,
+.nice-modal-fade-leave-active {
+  opacity: 0;
+  transform: translateY(-20px);
+}
 </style>