diff --git a/docs/src/App.vue b/docs/src/App.vue
index 4d360b0..4e3a9c8 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <md-sidenav class="main-sidebar md-left md-fixed" ref="main-sidebar">
+    <md-sidenav class="main-sidebar md-left md-fixed" md-swipeable ref="main-sidebar">
       <md-toolbar class="vue-material-logo" md-theme="white">
         <router-link exact to="/">
           <img :src="logo" alt="Vue">
diff --git a/docs/src/components/ExampleBox.vue b/docs/src/components/ExampleBox.vue
index c7d4389..6803005 100644
--- a/docs/src/components/ExampleBox.vue
+++ b/docs/src/components/ExampleBox.vue
@@ -17,7 +17,7 @@
         </md-tabs>
       </md-card-area>
 
-      <!-- <button type="button" class="md-codepen" @click="editOnCodepen">
+      <!-- <button type="button" class="md-codepen" @click.native="editOnCodepen">
         <img src="assets/codepen.png" alt="Edit on Codepen">
         <md-tooltip md-direction="left">Edit on codepen</md-tooltip>
       </button> -->
diff --git a/docs/src/components/PageContent.vue b/docs/src/components/PageContent.vue
index f579b80..d2948ce 100644
--- a/docs/src/components/PageContent.vue
+++ b/docs/src/components/PageContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-content">
     <md-whiteframe md-tag="md-toolbar" md-elevation="1" class="main-header">
-      <md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
+      <md-button class="md-icon-button nav-trigger" @click.native="toggleSidenav">
         <md-icon>menu</md-icon>
       </md-button>
 
diff --git a/docs/src/pages/components/Dialog.vue b/docs/src/pages/components/Dialog.vue
index 8d3ec5a..b418c40 100644
--- a/docs/src/pages/components/Dialog.vue
+++ b/docs/src/pages/components/Dialog.vue
@@ -286,8 +286,8 @@
               <md-dialog-content>Nemo, nobis necessitatibus ut illo, ducimus ex.</md-dialog-content>
 
               <md-dialog-actions>
-                <md-button class="md-primary" @click="closeDialog('dialog1')">Cancel</md-button>
-                <md-button class="md-primary" @click="closeDialog('dialog1')">Ok</md-button>
+                <md-button class="md-primary" @click.native="closeDialog('dialog1')">Cancel</md-button>
+                <md-button class="md-primary" @click.native="closeDialog('dialog1')">Ok</md-button>
               </md-dialog-actions>
             </md-dialog>
 
@@ -304,13 +304,13 @@
               </md-dialog-content>
 
               <md-dialog-actions>
-                <md-button class="md-primary" @click="closeDialog('dialog2')">Cancel</md-button>
-                <md-button class="md-primary" @click="closeDialog('dialog2')">Create</md-button>
+                <md-button class="md-primary" @click.native="closeDialog('dialog2')">Cancel</md-button>
+                <md-button class="md-primary" @click.native="closeDialog('dialog2')">Create</md-button>
               </md-dialog-actions>
             </md-dialog>
 
-            <md-button class="md-primary md-raised" id="custom" @click="openDialog('dialog1')">Custom</md-button>
-            <md-button class="md-fab md-fab-bottom-right" id="fab" @click="openDialog('dialog2')">
+            <md-button class="md-primary md-raised" id="custom" @click.native="openDialog('dialog1')">Custom</md-button>
+            <md-button class="md-fab md-fab-bottom-right" id="fab" @click.native="openDialog('dialog2')">
               <md-icon>add</md-icon>
             </md-button>
           </div>
@@ -323,8 +323,8 @@
                 &lt;md-dialog-content&gt;Nemo, nobis necessitatibus ut illo, ducimus ex.&lt;/md-dialog-content&gt;
 
                 &lt;md-dialog-actions&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Ok&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog1&apos;)&quot;&gt;Ok&lt;/md-button&gt;
                 &lt;/md-dialog-actions&gt;
               &lt;/md-dialog&gt;
 
@@ -341,13 +341,13 @@
                 &lt;/md-dialog-content&gt;
 
                 &lt;md-dialog-actions&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
-                  &lt;md-button class=&quot;md-primary&quot; @click=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Create&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Cancel&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-primary&quot; @click.native=&quot;closeDialog(&apos;dialog2&apos;)&quot;&gt;Create&lt;/md-button&gt;
                 &lt;/md-dialog-actions&gt;
               &lt;/md-dialog&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; id=&quot;custom&quot; @click=&quot;openDialog(&apos;dialog1&apos;)&quot;&gt;Custom&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot; id=&quot;fab&quot; @click=&quot;openDialog(&apos;dialog2&apos;)&quot;&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; id=&quot;custom&quot; @click.native=&quot;openDialog(&apos;dialog1&apos;)&quot;&gt;Custom&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot; id=&quot;fab&quot; @click.native=&quot;openDialog(&apos;dialog2&apos;)&quot;&gt;
                 &lt;md-icon&gt;add&lt;/md-icon&gt;
               &lt;/md-button&gt;
             </code-block>
@@ -391,8 +391,8 @@
               ref="dialog4">
             </md-dialog-alert>
 
-            <md-button class="md-primary md-raised" @click="openDialog('dialog3')">Alert</md-button>
-            <md-button class="md-primary md-raised" @click="openDialog('dialog4')">Alert with HTML</md-button>
+            <md-button class="md-primary md-raised" @click.native="openDialog('dialog3')">Alert</md-button>
+            <md-button class="md-primary md-raised" @click.native="openDialog('dialog4')">Alert with HTML</md-button>
           </div>
 
           <div slot="code">
@@ -413,8 +413,8 @@
                 ref=&quot;dialog4&quot;&gt;
               &lt;/md-dialog-alert&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog3&apos;)&quot;&gt;Alert&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog4&apos;)&quot;&gt;Alert with HTML&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog3&apos;)&quot;&gt;Alert&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog4&apos;)&quot;&gt;Alert with HTML&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
@@ -460,7 +460,7 @@
               ref="dialog5">
             </md-dialog-confirm>
 
-            <md-button class="md-primary md-raised" @click="openDialog('dialog5')">Confirm</md-button>
+            <md-button class="md-primary md-raised" @click.native="openDialog('dialog5')">Confirm</md-button>
           </div>
 
           <div slot="code">
@@ -475,7 +475,7 @@
                 ref=&quot;dialog5&quot;&gt;
               &lt;/md-dialog-confirm&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog5&apos;)&quot;&gt;Confirm&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog5&apos;)&quot;&gt;Confirm&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
@@ -523,7 +523,7 @@
               ref="dialog6">
             </md-dialog-prompt>
 
-            <md-button class="md-primary md-raised" @click="openDialog('dialog6')">Prompt</md-button>
+            <md-button class="md-primary md-raised" @click.native="openDialog('dialog6')">Prompt</md-button>
           </div>
 
           <div slot="code">
@@ -537,7 +537,7 @@
                 ref=&quot;dialog6&quot;&gt;
               &lt;/md-dialog-prompt&gt;
 
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;openDialog(&apos;dialog6&apos;)&quot;&gt;Prompt&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;openDialog(&apos;dialog6&apos;)&quot;&gt;Prompt&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
diff --git a/docs/src/pages/components/ImageLoader.vue b/docs/src/pages/components/ImageLoader.vue
index 870f522..c56d480 100644
--- a/docs/src/pages/components/ImageLoader.vue
+++ b/docs/src/pages/components/ImageLoader.vue
@@ -30,8 +30,8 @@
       <div slot="example">
         <example-box card-title="Default">
           <div slot="demo">
-            <md-button class="md-primary md-raised" @click="loadImage">Load Image</md-button>
-            <md-button class="md-primary md-raised" @click="clearImage">Clear Image</md-button>
+            <md-button class="md-primary md-raised" @click.native="loadImage">Load Image</md-button>
+            <md-button class="md-primary md-raised" @click.native="clearImage">Clear Image</md-button>
 
             <div>
               <md-image :md-src="src"></md-image>
@@ -40,8 +40,8 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;loadImage&quot;&gt;Load Image&lt;/md-button&gt;
-              &lt;md-button class=&quot;md-primary md-raised&quot; @click=&quot;clearImage&quot;&gt;Clear Image&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;loadImage&quot;&gt;Load Image&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary md-raised&quot; @click.native=&quot;clearImage&quot;&gt;Clear Image&lt;/md-button&gt;
 
               &lt;div&gt;
                 &lt;md-image :md-src=&quot;src&quot;&gt;&lt;/md-image&gt;
diff --git a/docs/src/pages/components/Select.vue b/docs/src/pages/components/Select.vue
index 9d5992c..93958cc 100644
--- a/docs/src/pages/components/Select.vue
+++ b/docs/src/pages/components/Select.vue
@@ -209,7 +209,7 @@
               </md-input-container>
             </div>
 
-            <md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
+            <md-button class="md-raised md-primary" @click.native="setPulpFiction">Set Pulp Fiction</md-button>
           </div>
 
           <div slot="code">
@@ -279,7 +279,7 @@
                 &lt;/md-input-container&gt;
               &lt;/div&gt;
 
-              &lt;md-button class=&quot;md-raised md-primary&quot; @click=&quot;setPulpFiction&quot;&gt;Set Pulp Fiction&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-primary&quot; @click.native=&quot;setPulpFiction&quot;&gt;Set Pulp Fiction&lt;/md-button&gt;
             </code-block>
 
             <code-block lang="javascript">
diff --git a/docs/src/pages/components/Sidenav.vue b/docs/src/pages/components/Sidenav.vue
index a03695a..39a86ed 100644
--- a/docs/src/pages/components/Sidenav.vue
+++ b/docs/src/pages/components/Sidenav.vue
@@ -120,7 +120,7 @@
           <div slot="demo">
             <div class="phone-viewport">
               <md-toolbar>
-                <md-button class="md-icon-button" @click="toggleLeftSidenav">
+                <md-button class="md-icon-button" @click.native="toggleLeftSidenav">
                   <md-icon>menu</md-icon>
                 </md-button>
 
@@ -128,7 +128,7 @@
               </md-toolbar>
 
               <div>
-                <md-button class="md-raised md-accent" @click="toggleRightSidenav">Toggle right</md-button>
+                <md-button class="md-raised md-accent" @click.native="toggleRightSidenav">Toggle right</md-button>
                 <p>Open console to see the events</p>
               </div>
 
@@ -149,7 +149,7 @@
                   </div>
                 </md-toolbar>
 
-                <md-button class="md-raised md-accent" @click="closeRightSidenav">Close</md-button>
+                <md-button class="md-raised md-accent" @click.native="closeRightSidenav">Close</md-button>
               </md-sidenav>
             </div>
           </div>
@@ -158,7 +158,7 @@
             <code-block lang="xml">
               &lt;div class=&quot;phone-viewport&quot;&gt;
                 &lt;md-toolbar&gt;
-                  &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;toggleLeftSidenav&quot;&gt;
+                  &lt;md-button class=&quot;md-icon-button&quot; @click.native=&quot;toggleLeftSidenav&quot;&gt;
                     &lt;md-icon&gt;menu&lt;/md-icon&gt;
                   &lt;/md-button&gt;
 
@@ -166,7 +166,7 @@
                 &lt;/md-toolbar&gt;
 
                 &lt;div&gt;
-                  &lt;md-button class=&quot;md-raised md-accent&quot; @click=&quot;toggleRightSidenav&quot;&gt;Toggle right&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-raised md-accent&quot; @click.native=&quot;toggleRightSidenav&quot;&gt;Toggle right&lt;/md-button&gt;
                   &lt;p&gt;Open console to see the events&lt;/p&gt;
                 &lt;/div&gt;
 
@@ -187,7 +187,7 @@
                     &lt;/div&gt;
                   &lt;/md-toolbar&gt;
 
-                  &lt;md-button class=&quot;md-raised md-accent&quot; @click=&quot;closeRightSidenav&quot;&gt;Close&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-raised md-accent&quot; @click.native=&quot;closeRightSidenav&quot;&gt;Close&lt;/md-button&gt;
                 &lt;/md-sidenav&gt;
               &lt;/div&gt;
             </code-block>
diff --git a/docs/src/pages/components/Snackbar.vue b/docs/src/pages/components/Snackbar.vue
index ded940b..c2b2b78 100644
--- a/docs/src/pages/components/Snackbar.vue
+++ b/docs/src/pages/components/Snackbar.vue
@@ -107,7 +107,7 @@
 
               <md-snackbar :md-position="vertical + ' ' + horizontal" ref="snackbar" :md-duration="duration">
                 <span>Connection timeout. Showing limited messages.</span>
-                <md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar.close()">Retry</md-button>
+                <md-button class="md-accent" md-theme="light-blue" @click.native="$refs.snackbar.close()">Retry</md-button>
               </md-snackbar>
             </form>
           </div>
@@ -140,7 +140,7 @@
 
                 &lt;md-snackbar :md-position=&quot;vertical + &#039; &#039; + horizontal&quot; ref=&quot;snackbar&quot; :md-duration=&quot;duration&quot;&gt;
                   &lt;span&gt;Connection timeout. Showing limited messages.&lt;/span&gt;
-                  &lt;md-button class=&quot;md-accent&quot; md-theme=&quot;light-blue&quot; @click=&quot;$refs.snackbar.close()&quot;&gt;Retry&lt;/md-button&gt;
+                  &lt;md-button class=&quot;md-accent&quot; md-theme=&quot;light-blue&quot; @click.native=&quot;$refs.snackbar.close()&quot;&gt;Retry&lt;/md-button&gt;
                 &lt;/md-snackbar&gt;
               &lt;/form&gt;
             </code-block>
diff --git a/docs/src/pages/components/Toolbar.vue b/docs/src/pages/components/Toolbar.vue
index 0a1b9c7..0d379fe 100644
--- a/docs/src/pages/components/Toolbar.vue
+++ b/docs/src/pages/components/Toolbar.vue
@@ -420,7 +420,7 @@
             <div class="phone-viewport complete-example">
               <md-whiteframe md-tag="md-toolbar" md-elevation="2" md-theme="light-blue" class="md-large">
                 <div class="md-toolbar-container">
-                  <md-button class="md-icon-button" @click="$refs.sidenav.toggle()">
+                  <md-button class="md-icon-button" @click.native="$refs.sidenav.toggle()">
                     <md-icon>menu</md-icon>
                   </md-button>
 
@@ -590,23 +590,23 @@
                 </md-toolbar>
 
                 <md-list>
-                  <md-list-item @click="$refs.sidenav.toggle()" class="md-primary">
+                  <md-list-item @click.native="$refs.sidenav.toggle()" class="md-primary">
                     <md-icon>insert_drive_file</md-icon> <span>My files</span>
                   </md-list-item>
 
-                  <md-list-item @click="$refs.sidenav.toggle()">
+                  <md-list-item @click.native="$refs.sidenav.toggle()">
                     <md-icon>people</md-icon> <span>Shared with me</span>
                   </md-list-item>
 
-                  <md-list-item @click="$refs.sidenav.toggle()">
+                  <md-list-item @click.native="$refs.sidenav.toggle()">
                     <md-icon>access_time</md-icon> <span>Recent</span>
                   </md-list-item>
 
-                  <md-list-item @click="$refs.sidenav.toggle()">
+                  <md-list-item @click.native="$refs.sidenav.toggle()">
                     <md-icon>start</md-icon> <span>Starred</span>
                   </md-list-item>
 
-                  <md-list-item @click="$refs.sidenav.toggle()">
+                  <md-list-item @click.native="$refs.sidenav.toggle()">
                     <md-icon>delete</md-icon> <span>Trash</span>
                   </md-list-item>
                 </md-list>
@@ -619,7 +619,7 @@
               &lt;div class=&quot;phone-viewport complete-example&quot;&gt;
                 &lt;md-whiteframe md-tag=&quot;md-toolbar&quot; md-elevation=&quot;2&quot; md-theme=&quot;light-blue&quot; class=&quot;md-large&quot;&gt;
                   &lt;div class=&quot;md-toolbar-container&quot;&gt;
-                    &lt;md-button class=&quot;md-icon-button&quot; @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-button class=&quot;md-icon-button&quot; @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;menu&lt;/md-icon&gt;
                     &lt;/md-button&gt;
 
@@ -789,23 +789,23 @@
                   &lt;/md-toolbar&gt;
 
                   &lt;md-list&gt;
-                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
+                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot; class=&quot;md-primary&quot;&gt;
                       &lt;md-icon&gt;insert_drive_file&lt;/md-icon&gt; &lt;span&gt;My files&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;people&lt;/md-icon&gt; &lt;span&gt;Shared with me&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;access_time&lt;/md-icon&gt; &lt;span&gt;Recent&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;start&lt;/md-icon&gt; &lt;span&gt;Starred&lt;/span&gt;
                     &lt;/md-list-item&gt;
 
-                    &lt;md-list-item @click=&quot;$refs.sidenav.toggle()&quot;&gt;
+                    &lt;md-list-item @click.native=&quot;$refs.sidenav.toggle()&quot;&gt;
                       &lt;md-icon&gt;delete&lt;/md-icon&gt; &lt;span&gt;Trash&lt;/span&gt;
                     &lt;/md-list-item&gt;
                   &lt;/md-list&gt;