title: Vuetify Navigation Drawer Drag To Resize
body: <p>So I have gotten it to where the the 'drag to resize' works - it just feels a little laggy... does anyone know why this may be, and how to fix it?</p>
  <p>I have tried forcing a refresh using <code>vm.$forceUpdate()</code> but that did not seem to do anything..</p>
  <p><a href="https://codepen.io/oze4/pen/mojrZM" rel="nofollow noreferrer">The CodePen can be found here.</a></p>
  <hr />
  <p><em><strong>EDIT:</strong></em> Added <s>demo code</s> working solution to this question/post. This way if something happens to the CodePen, we still have working demo code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data: () =&gt; {
      return {
        navigation: {
          shown: false,
          width: 200,
          borderSize: 3
        }
      };
    },
    computed: {
      direction() {
        return this.navigation.shown === false ? "Open" : "Closed";
      }
    },
    methods: {
      setBorderWidth() {
        let i = this.$refs.drawer.$el.querySelector(
          ".v-navigation-drawer__border"
        );
        i.style.width = this.navigation.borderSize + "px";
        i.style.cursor = "ew-resize";
        i.style.backgroundColor = "red";
      },
      setEvents() {
        const minSize = this.navigation.borderSize;
        const el = this.$refs.drawer.$el;
        const drawerBorder = el.querySelector(".v-navigation-drawer__border");
        const vm = this;
        const direction = el.classList.contains("v-navigation-drawer--right") ?
          "right" :
          "left";
  
        function resize(e) {
          document.body.style.cursor = "ew-resize";
          let f =
            direction === "right" ?
            document.body.scrollWidth - e.clientX :
            e.clientX;
          el.style.width = f + "px";
        }
  
        drawerBorder.addEventListener(
          "mousedown",
          (e) =&gt; {
            if (e.offsetX &lt; minSize) {
              el.style.transition = "initial";
              document.addEventListener("mousemove", resize, false);
            }
          },
          false
        );
  
        document.addEventListener(
          "mouseup",
          () =&gt; {
            el.style.transition = "";
            this.navigation.width = el.style.width;
            document.body.style.cursor = "";
            document.removeEventListener("mousemove", resize, false);
          },
          false
        );
      }
    },
    mounted() {
      this.setBorderWidth();
      this.setEvents();
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" /&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet" /&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;v-app&gt;
      &lt;v-navigation-drawer ref="drawer" app right hide-overlay :width="navigation.width" v-model="navigation.shown"&gt;
        &lt;v-toolbar color="primary"&gt;
          &lt;v-toolbar-title class="headline text-uppercase"&gt;
            &lt;span&gt;t a&lt;/span&gt;&lt;span class="font-weight-light"&gt; b s &lt;/span&gt;
          &lt;/v-toolbar-title&gt;
        &lt;/v-toolbar&gt;
        &lt;v-tabs&gt;
          &lt;v-tab v-for="n in 3" :key="n"&gt;
            Item {{ n }}
          &lt;/v-tab&gt;
          &lt;v-tab-item v-for="n in 3" :key="n"&gt;
            &lt;v-card flat&gt;
              &lt;v-card-text&gt;Content for tab {{ n }} would go here&lt;/v-card-text&gt;
            &lt;/v-card&gt;
          &lt;/v-tab-item&gt;
        &lt;/v-tabs&gt;
      &lt;/v-navigation-drawer&gt;
      &lt;v-container&gt;
        &lt;v-layout justify-center&gt;
          &lt;v-btn @click="navigation.shown = !navigation.shown"&gt;Toggle {{ direction }}&lt;/v-btn&gt;
        &lt;/v-layout&gt;
        &lt;v-layout justify-center&gt;
          &lt;p&gt;Once the navigation drawer is opened, drag it's border to resize (highlited in red)&lt;/p&gt;
        &lt;/v-layout&gt;
      &lt;/v-container&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>