diff --git a/dev/App.vue b/dev/App.vue
index 40dfcf29b1a..fa1ca87c780 100644
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="quasar-app">
+  <div id="q-app">
     <router-view></router-view>
   </div>
 </template>
diff --git a/dev/components/components/collapsible.vue b/dev/components/components/collapsible.vue
index 611c15162bd..01166f01041 100644
--- a/dev/components/components/collapsible.vue
+++ b/dev/components/components/collapsible.vue
@@ -2,64 +2,64 @@
   <div>
     <div class="layout-padding" style="max-width: 600px;">
       <div class="list">
-        <quasar-collapsible icon="explore" label="First">
+        <q-collapsible icon="explore" label="First">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="perm_identity" label="Second">
+        </q-collapsible>
+        <q-collapsible icon="perm_identity" label="Second">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="shopping_cart" label="Third">
+        </q-collapsible>
+        <q-collapsible icon="shopping_cart" label="Third">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
 
       <p class="caption">With Item Delimiters</p>
       <div class="list item-delimiter">
-        <quasar-collapsible icon="explore" label="First">
+        <q-collapsible icon="explore" label="First">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="perm_identity" label="Second">
+        </q-collapsible>
+        <q-collapsible icon="perm_identity" label="Second">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="shopping_cart" label="Third">
+        </q-collapsible>
+        <q-collapsible icon="shopping_cart" label="Third">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
 
       <p class="caption">Preselected/Opened Collapsible</p>
       <div class="list item-delimiter">
-        <quasar-collapsible icon="explore" label="First">
+        <q-collapsible icon="explore" label="First">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="perm_identity" label="Second" opened>
+        </q-collapsible>
+        <q-collapsible icon="perm_identity" label="Second" opened>
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="shopping_cart" label="Third">
+        </q-collapsible>
+        <q-collapsible icon="shopping_cart" label="Third">
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
 
       <p class="caption">Ubiquity. Using Cards as content.</p>
       <div class="list item-delimiter">
-        <quasar-collapsible icon="explore" label="First Card">
+        <q-collapsible icon="explore" label="First Card">
           <div class="card bg-primary text-white">
             <div class="card-title">
               Card Title
@@ -68,16 +68,16 @@
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </div>
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="perm_identity" label="Second Card">
+        </q-collapsible>
+        <q-collapsible icon="perm_identity" label="Second Card">
           <div class="card">
             <img src="~assets/mountains.jpg">
             <div class="card-content">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             </div>
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="shopping_cart" label="Third Card">
+        </q-collapsible>
+        <q-collapsible icon="shopping_cart" label="Third Card">
           <div class="card">
             <div class="card-media">
               <img src="~assets/map.png">
@@ -120,7 +120,7 @@
               </button>
             </div>
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
     </div>
   </div>
diff --git a/dev/components/components/context-menu.vue b/dev/components/components/context-menu.vue
index a4efa1404c3..e8c49a7cab5 100644
--- a/dev/components/components/context-menu.vue
+++ b/dev/components/components/context-menu.vue
@@ -30,7 +30,7 @@
       </p>
     </div>
 
-    <quasar-context-menu ref="context">
+    <q-context-menu ref="context">
       <div class="list highlight" style="min-width: 150px; max-height: 300px;">
         <div
           class="item item-link two-lines item-delimiter"
@@ -43,7 +43,7 @@
           </div>
         </div>
       </div>
-    </quasar-context-menu>
+    </q-context-menu>
   </div>
 </template>
 
diff --git a/dev/components/components/fab.vue b/dev/components/components/fab.vue
index bd2a83bbd23..1126eef41b0 100644
--- a/dev/components/components/fab.vue
+++ b/dev/components/components/fab.vue
@@ -9,25 +9,25 @@
       </p>
 
       <div class="column items-center" style="margin-top: 100px; margin-bottom: 100px;">
-        <quasar-fab classNames="purple" icon="keyboard_arrow_up" direction="up">
-          <quasar-small-fab class="white" @click.native="toast('mail')">mail</quasar-small-fab>
-          <quasar-small-fab class="white" @click.native="toast('alarm')">alarm</quasar-small-fab>
-        </quasar-fab>
+        <q-fab classNames="purple" icon="keyboard_arrow_up" direction="up">
+          <q-small-fab class="white" @click.native="toast('mail')">mail</q-small-fab>
+          <q-small-fab class="white" @click.native="toast('alarm')">alarm</q-small-fab>
+        </q-fab>
 
-        <quasar-fab icon="keyboard_arrow_left" direction="left">
-          <quasar-small-fab class="white" @click.native="toast('mail')">mail</quasar-small-fab>
-          <quasar-small-fab class="white" @click.native="toast('alarm')">alarm</quasar-small-fab>
-        </quasar-fab>
+        <q-fab icon="keyboard_arrow_left" direction="left">
+          <q-small-fab class="white" @click.native="toast('mail')">mail</q-small-fab>
+          <q-small-fab class="white" @click.native="toast('alarm')">alarm</q-small-fab>
+        </q-fab>
 
-        <quasar-fab classNames="secondary push" icon="keyboard_arrow_right" direction="right">
-          <quasar-small-fab class="primary" @click.native="toast('mail')">mail</quasar-small-fab>
-          <quasar-small-fab class="white" @click.native="toast('alarm')">alarm</quasar-small-fab>
-        </quasar-fab>
+        <q-fab classNames="secondary push" icon="keyboard_arrow_right" direction="right">
+          <q-small-fab class="primary" @click.native="toast('mail')">mail</q-small-fab>
+          <q-small-fab class="white" @click.native="toast('alarm')">alarm</q-small-fab>
+        </q-fab>
 
-        <quasar-fab classNames="tertiary glossy" icon="keyboard_arrow_down" direction="down">
-          <quasar-small-fab class="white" @click.native="toast('mail')">mail</quasar-small-fab>
-          <quasar-small-fab class="white" @click.native="toast('alarm')">alarm</quasar-small-fab>
-        </quasar-fab>
+        <q-fab classNames="tertiary glossy" icon="keyboard_arrow_down" direction="down">
+          <q-small-fab class="white" @click.native="toast('mail')">mail</q-small-fab>
+          <q-small-fab class="white" @click.native="toast('alarm')">alarm</q-small-fab>
+        </q-fab>
       </div>
 
       <p class="caption" style="margin-bottom: 100px;">
@@ -37,7 +37,7 @@
         You can close it by clicking/tapping on the whitey backdrop.
       </p>
 
-      <quasar-fab
+      <q-fab
         class="absolute-bottom-right"
         @click="alert()"
         classNames="primary"
@@ -45,9 +45,9 @@
         direction="up"
         style="right: 18px; bottom: 18px;"
       >
-        <quasar-small-fab class="purple" @click.native="toast('mail')">mail</quasar-small-fab>
-        <quasar-small-fab class="secondary" @click.native="toast('alarm')">alarm</quasar-small-fab>
-      </quasar-fab>
+        <q-small-fab class="purple" @click.native="toast('mail')">mail</q-small-fab>
+        <q-small-fab class="secondary" @click.native="toast('alarm')">alarm</q-small-fab>
+      </q-fab>
     </div>
   </div>
 </template>
diff --git a/dev/components/components/image-gallery.vue b/dev/components/components/image-gallery.vue
index 5d2fa578095..d1b2d5b4a55 100644
--- a/dev/components/components/image-gallery.vue
+++ b/dev/components/components/image-gallery.vue
@@ -2,10 +2,10 @@
   <div>
     <div class="layout-padding">
       <h5>Gallery</h5>
-      <quasar-gallery :src="gallery"></quasar-gallery>
+      <q-gallery :src="gallery"></q-gallery>
 
       <h5>Gallery Slider</h5>
-      <quasar-gallery-slider :src="slider"></quasar-gallery>
+      <q-gallery-slider :src="slider"></q-gallery>
     </div>
   </div>
 </template>
diff --git a/dev/components/components/infinite-scroll.vue b/dev/components/components/infinite-scroll.vue
index b6c2e10730f..81e4f7ffdf7 100644
--- a/dev/components/components/infinite-scroll.vue
+++ b/dev/components/components/infinite-scroll.vue
@@ -4,7 +4,7 @@
       <p class="caption">Scroll down to see it in action.</p>
 
       <br>
-      <quasar-infinite-scroll :handler="refresher">
+      <q-infinite-scroll :handler="refresher">
         <p v-for="(item, index) in items" class="caption">
           <span class="label bg-secondary text-white shadow-1">
             {{ index + 1 }}
@@ -15,7 +15,7 @@
         <div class="row justify-center" style="margin-bottom: 50px;">
           <spinner name="dots" slot="message" :size="40"></spinner>
         </div>
-      </quasar-infinite-scroll>
+      </q-infinite-scroll>
     </div>
   </div>
 </template>
diff --git a/dev/components/components/modal.vue b/dev/components/components/modal.vue
index 6efcdbc1f70..a1e4d9be8e6 100644
--- a/dev/components/components/modal.vue
+++ b/dev/components/components/modal.vue
@@ -22,13 +22,13 @@
       </div>
     </div>
 
-    <quasar-modal ref="basicModal" :content-css="{padding: '50px', minWidth: '50vw'}">
+    <q-modal ref="basicModal" :content-css="{padding: '50px', minWidth: '50vw'}">
       <h4>Basic Modal</h4>
       <p v-for="n in 25">Scroll down to close</p>
       <button class="primary" @click="$refs.basicModal.close()">Close</button>
-    </quasar-modal>
+    </q-modal>
 
-    <quasar-modal
+    <q-modal
       ref="eventsModal"
       @open="notify('open')"
       @escape-key="notify('escape-key')"
@@ -38,27 +38,27 @@
       <h4>Modal with Events</h4>
       <p v-for="n in 25">Scroll down to close</p>
       <button class="primary" @click="$refs.eventsModal.close()">Close</button>
-    </quasar-modal>
+    </q-modal>
 
-    <quasar-modal ref="layoutModal" :content-css="{minWidth: '80vw', minHeight: '80vh'}">
-      <quasar-layout>
+    <q-modal ref="layoutModal" :content-css="{minWidth: '80vw', minHeight: '80vh'}">
+      <q-layout>
         <div slot="header" class="toolbar">
           <button @click="$refs.layoutModal.close()">
             <i>keyboard_arrow_left</i>
           </button>
-          <quasar-toolbar-title :padding="1">
+          <q-toolbar-title :padding="1">
             Header
-          </quasar-toolbar-title>
+          </q-toolbar-title>
         </div>
 
         <div slot="header" class="toolbar primary">
-          <quasar-search class="primary"></quasar-search>
+          <q-search class="primary"></q-search>
         </div>
 
         <div slot="footer" class="toolbar">
-          <quasar-toolbar-title :padding="1">
+          <q-toolbar-title :padding="1">
             Footer
-          </quasar-toolbar-title>
+          </q-toolbar-title>
         </div>
 
         <div class="layout-view">
@@ -68,19 +68,19 @@
             <p class="caption" v-for="n in 15">This is a Modal presenting a Layout.</p>
           </div>
         </div>
-      </quasar-layout>
-    </quasar-modal>
+      </q-layout>
+    </q-modal>
 
-    <quasar-modal ref="minimizedModal" class="minimized" :content-css="{padding: '50px'}">
+    <q-modal ref="minimizedModal" class="minimized" :content-css="{padding: '50px'}">
       <h4>Minimized Modal</h4>
       <p>This one has backdrop on small screens too.</p>
       <button class="tertiary" @click="$refs.basicModal.close()">Close Me</button>
-    </quasar-modal>
+    </q-modal>
 
-    <quasar-modal ref="maximizedModal" class="maximized" :content-css="{padding: '50px'}">
+    <q-modal ref="maximizedModal" class="maximized" :content-css="{padding: '50px'}">
       <h4>Maximized Modal</h4><p>This one is maximized on bigger screens too.</p>
       <button class="tertiary" @click="$refs.maximizedModal.close()">Close Me</button>
-    </quasar-modal>
+    </q-modal>
   </div>
 </template>
 
diff --git a/dev/components/components/pagination.vue b/dev/components/components/pagination.vue
index 2aa9d865095..bef767c1642 100644
--- a/dev/components/components/pagination.vue
+++ b/dev/components/components/pagination.vue
@@ -13,10 +13,10 @@
         then hit &lt;ENTER&gt;
       </p>
 
-      <quasar-pagination v-model="page" :max="17"></quasar-pagination>
+      <q-pagination v-model="page" :max="17"></q-pagination>
 
       <p class="caption">Disabled State</p>
-      <quasar-pagination v-model="page" :max="17" disable></quasar-pagination>
+      <q-pagination v-model="page" :max="17" disable></q-pagination>
     </div>
   </div>
 </template>
diff --git a/dev/components/components/parallax.vue b/dev/components/components/parallax.vue
index 3cf4b185864..250d6d561b6 100644
--- a/dev/components/components/parallax.vue
+++ b/dev/components/components/parallax.vue
@@ -9,37 +9,37 @@
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
     </div>
 
-    <quasar-parallax :src="'statics/parallax1.jpg'" :height="200">
+    <q-parallax :src="'statics/parallax1.jpg'" :height="200">
       <div slot="loading">Loading...</div>
       <h1>Parallax  Title</h1>
-    </quasar-parallax>
+    </q-parallax>
 
     <div class="layout-padding">
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
     </div>
 
-    <quasar-parallax :src="'statics/parallax2.jpg'">
+    <q-parallax :src="'statics/parallax2.jpg'">
       <div slot="loading">Loading...</div>
       <h1>Bridge</h1>
-    </quasar-parallax>
+    </q-parallax>
 
     <div class="layout-padding">
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
     </div>
 
-    <quasar-parallax :src="'statics/parallax1.jpg'">
+    <q-parallax :src="'statics/parallax1.jpg'">
       <div slot="loading">Loading...</div>
       <h1>Title</h1>
-    </quasar-parallax>
+    </q-parallax>
 
     <div class="layout-padding">
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
     </div>
 
-    <quasar-parallax :src="'statics/mountains.jpg'" :height="200">
+    <q-parallax :src="'statics/mountains.jpg'" :height="200">
       <div slot="loading">Loading...</div>
       <h1>Mountains</h1>
-    </quasar-parallax>
+    </q-parallax>
 
     <div class="layout-padding">
       <p v-for="n in 7" class="par-text">{{loremipsum}}</p>
diff --git a/dev/components/components/popover.vue b/dev/components/components/popover.vue
index e808441b717..7ea3ee5537b 100644
--- a/dev/components/components/popover.vue
+++ b/dev/components/components/popover.vue
@@ -11,7 +11,7 @@
         <button class="primary">
           <i>assignment</i>
 
-          <quasar-popover ref="popover1">
+          <q-popover ref="popover1">
             <div class="list scroll highlight" style="min-width: 150px; max-height: 500px;">
               <div
                 class="item item-link two-lines item-delimiter"
@@ -24,15 +24,15 @@
                 </div>
               </div>
             </div>
-          </quasar-popover>
+          </q-popover>
         </button>
 
         <button ref="target4" class="negative">
           Disabled Popover
 
-          <quasar-popover disable>
+          <q-popover disable>
             This Popover content won't be shown because of "disable"
-          </quasar-popover>
+          </q-popover>
         </button>
 
         <div class="card" style="margin-top: 75px">
@@ -40,7 +40,7 @@
             <button class="orange push">
               Tap
 
-              <quasar-popover
+              <q-popover
                 ref="popover2"
                 :anchor="anchor"
                 :self="self"
@@ -56,7 +56,7 @@
                     </div>
                   </div>
                 </div>
-              </quasar-popover>
+              </q-popover>
             </button>
           </div>
 
@@ -72,30 +72,30 @@
                 <div class="column group">
                   <div>Vertical</div>
                   <label>
-                    <quasar-radio v-model="anchorOrigin.vertical" val="top"></quasar-radio>
+                    <q-radio v-model="anchorOrigin.vertical" val="top"></q-radio>
                     Top
                   </label>
                   <label>
-                    <quasar-radio v-model="anchorOrigin.vertical" val="center"></quasar-radio>
+                    <q-radio v-model="anchorOrigin.vertical" val="center"></q-radio>
                     Center
                   </label>
                   <label>
-                    <quasar-radio v-model="anchorOrigin.vertical" val="bottom"></quasar-radio>
+                    <q-radio v-model="anchorOrigin.vertical" val="bottom"></q-radio>
                     Bottom
                   </label>
                 </div>
                 <div class="column group">
                   <div>Horizontal</div>
                   <label>
-                    <quasar-radio v-model="anchorOrigin.horizontal" val="left"></quasar-radio>
+                    <q-radio v-model="anchorOrigin.horizontal" val="left"></q-radio>
                     Left
                   </label>
                   <label>
-                    <quasar-radio v-model="anchorOrigin.horizontal" val="middle"></quasar-radio>
+                    <q-radio v-model="anchorOrigin.horizontal" val="middle"></q-radio>
                     Middle
                   </label>
                   <label>
-                    <quasar-radio v-model="anchorOrigin.horizontal" val="right"></quasar-radio>
+                    <q-radio v-model="anchorOrigin.horizontal" val="right"></q-radio>
                     Right
                   </label>
                 </div>
@@ -108,30 +108,30 @@
                 <div class="column group">
                   <div>Vertical</div>
                   <label>
-                    <quasar-radio v-model="selfOrigin.vertical" val="top"></quasar-radio>
+                    <q-radio v-model="selfOrigin.vertical" val="top"></q-radio>
                     Top
                   </label>
                   <label>
-                    <quasar-radio v-model="selfOrigin.vertical" val="center"></quasar-radio>
+                    <q-radio v-model="selfOrigin.vertical" val="center"></q-radio>
                     Center
                   </label>
                   <label>
-                    <quasar-radio v-model="selfOrigin.vertical" val="bottom"></quasar-radio>
+                    <q-radio v-model="selfOrigin.vertical" val="bottom"></q-radio>
                     Bottom
                   </label>
                 </div>
                 <div class="column group">
                   <div>Horizontal</div>
                   <label>
-                    <quasar-radio v-model="selfOrigin.horizontal" val="left"></quasar-radio>
+                    <q-radio v-model="selfOrigin.horizontal" val="left"></q-radio>
                     Left
                   </label>
                   <label>
-                    <quasar-radio v-model="selfOrigin.horizontal" val="middle"></quasar-radio>
+                    <q-radio v-model="selfOrigin.horizontal" val="middle"></q-radio>
                     Middle
                   </label>
                   <label>
-                    <quasar-radio v-model="selfOrigin.horizontal" val="right"></quasar-radio>
+                    <q-radio v-model="selfOrigin.horizontal" val="right"></q-radio>
                     Right
                   </label>
                 </div>
@@ -143,7 +143,7 @@
         <br><br>
         <span>
           <img ref="target3" src="~assets/map.png" class="responsive">
-          <quasar-popover anchor-ref="target3" ref="popover3" touch-position>
+          <q-popover anchor-ref="target3" ref="popover3" touch-position>
             <div class="list highlight" style="min-width: 200px; max-height: 300px;">
               <div
                 class="item item-link item-delimiter"
@@ -156,7 +156,7 @@
                 </div>
               </div>
             </div>
-          </quasar-popover>
+          </q-popover>
         </span>
 
         <div style="margin-bottom: 700px;"></div>
@@ -164,19 +164,19 @@
         <button class="secondary absolute-top-right" style="top: 10px; right: 10px; right: 16px;">
           <i>directions</i>
 
-          <quasar-popover ref="popover5">
+          <q-popover ref="popover5">
             <img
               src="~assets/map.png"
               style="height: 150px; width: 200px;"
               @click="showToast(), $refs.popover5.close()"
             >
-          </quasar-popover>
+          </q-popover>
         </button>
 
         <button class="tertiary absolute-bottom-right" style="bottom: 10px; right: 16px;">
           <i>plus_one</i>
 
-          <quasar-popover ref="popover6">
+          <q-popover ref="popover6">
             <div class="group" style="width: 200px; height: 50px; text-align: center;">
               <button class="primary clear" @click="showToast(), $refs.popover6.close()">
                 <i>thumb_up</i>
@@ -188,14 +188,14 @@
                 <i>share</i>
               </button>
             </div>
-          </quasar-popover>
+          </q-popover>
         </button>
       </div>
 
       <button class="primary absolute-bottom-left" style="bottom: 10px; left: 10px;">
         <i>menu</i>
 
-        <quasar-popover ref="popover7">
+        <q-popover ref="popover7">
           <div class="list highlight" style="min-width: 150px">
             <div
               class="item item-link two-lines item-delimiter"
@@ -208,7 +208,7 @@
               </div>
             </div>
           </div>
-        </quasar-popover>
+        </q-popover>
       </button>
     </div>
   </div>
diff --git a/dev/components/components/progress-button.vue b/dev/components/components/progress-button.vue
index 83f0042fd48..dab11558ded 100644
--- a/dev/components/components/progress-button.vue
+++ b/dev/components/components/progress-button.vue
@@ -5,41 +5,41 @@
 
       <p class="caption">Determined Progress</p>
       <div class="group">
-        <quasar-progress-button
+        <q-progress-button
           class="yellow"
           :percentage="progressBtn"
           @click.native="workButton()"
           dark-filler
         >
           Work it!
-        </quasar-progress-button>
-        <quasar-progress-button
+        </q-progress-button>
+        <q-progress-button
           class="dark"
           :percentage="progressBtn"
           @click.native="workButton()"
         >
           Work it!
-        </quasar-progress-button>
+        </q-progress-button>
       </div>
 
       <p class="caption">Indetermined Progress</p>
       <div class="group">
-        <quasar-progress-button
+        <q-progress-button
           class="primary"
           indeterminate
           :percentage="progressBtn"
           @click.native="workButton()"
         >
           Work it!
-        </quasar-progress-button>
-        <quasar-progress-button
+        </q-progress-button>
+        <q-progress-button
           class="negative"
           indeterminate
           :percentage="progressBtn"
           @click.native="workButton()"
         >
           Work it!
-        </quasar-progress-button>
+        </q-progress-button>
       </div>
 
       <p class="caption">Control Progress with Buttons below</p>
diff --git a/dev/components/components/progress.vue b/dev/components/components/progress.vue
index bd9d71516eb..b142acfb2f8 100644
--- a/dev/components/components/progress.vue
+++ b/dev/components/components/progress.vue
@@ -13,37 +13,37 @@
 
       <h5>Determinate State</h5>
       <p>
-        <quasar-progress :percentage="progress" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe positive" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe info" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe warning" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe secondary" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe tertiary" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe dark" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe negative" @click.native="randomize()"></quasar-progress>
-        <quasar-progress :percentage="progress" class="stripe animate" @click.native="randomize()"></quasar-progress>
+        <q-progress :percentage="progress" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe positive" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe info" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe warning" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe secondary" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe tertiary" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe dark" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe negative" @click.native="randomize()"></q-progress>
+        <q-progress :percentage="progress" class="stripe animate" @click.native="randomize()"></q-progress>
       </p>
 
       <h5>Indeterminate State</h5>
       <p>
-        <quasar-progress class="indeterminate"></quasar-progress>
-        <quasar-progress class="indeterminate positive"></quasar-progress>
-        <quasar-progress class="indeterminate warning"></quasar-progress>
-        <quasar-progress class="indeterminate negative"></quasar-progress>
-        <quasar-progress class="indeterminate dark"></quasar-progress>
+        <q-progress class="indeterminate"></q-progress>
+        <q-progress class="indeterminate positive"></q-progress>
+        <q-progress class="indeterminate warning"></q-progress>
+        <q-progress class="indeterminate negative"></q-progress>
+        <q-progress class="indeterminate dark"></q-progress>
       </p>
 
       <h5>Specific Height</h5>
       <p>
-        <quasar-progress class="indeterminate stripe" style="height: 45px"></quasar-progress>
+        <q-progress class="indeterminate stripe" style="height: 45px"></q-progress>
       </p>
 
       <h5>Striped</h5>
-      <quasar-progress :percentage="progress" class="stripe" @click.native="randomize()"></quasar-progress>
+      <q-progress :percentage="progress" class="stripe" @click.native="randomize()"></q-progress>
 
       <h5>Striped and Animated</h5>
-      <quasar-progress :percentage="progress" class="stripe animate" @click.native="randomize()"></quasar-progress>
+      <q-progress :percentage="progress" class="stripe animate" @click.native="randomize()"></q-progress>
     </div>
   </div>
 </template>
diff --git a/dev/components/components/pull-to-refresh.vue b/dev/components/components/pull-to-refresh.vue
index 4dacf515ee5..d4fec58a4fa 100644
--- a/dev/components/components/pull-to-refresh.vue
+++ b/dev/components/components/pull-to-refresh.vue
@@ -1,9 +1,9 @@
 <template>
-  <quasar-layout>
+  <q-layout>
     <div class="toolbar" slot="header">Pull To Refresh</div>
 
     <div class="layout-view">
-      <quasar-pull-to-refresh :handler="refresher">
+      <q-pull-to-refresh :handler="refresher">
         <div class="layout-padding bg-white">
           <p class="caption">
             Pull down to refresh on the content below.
@@ -17,9 +17,9 @@
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           </p>
         </div>
-      </quasar-pull-to-refresh>
+      </q-pull-to-refresh>
     </div>
-  </quasar-layout>
+  </q-layout>
 </template>
 
 <script>
diff --git a/dev/components/components/slider.vue b/dev/components/components/slider.vue
index aac3e3eb9cb..2647a0154a5 100644
--- a/dev/components/components/slider.vue
+++ b/dev/components/components/slider.vue
@@ -5,7 +5,7 @@
         Basic Slider. No controls. Just swipe between slides or
         use you mouse to drag slides to left or right.
       </p>
-      <quasar-slider class="text-white">
+      <q-slider class="text-white">
         <div slot="slide" class="bg-primary">
           Slide 1
         </div>
@@ -15,12 +15,12 @@
         <div slot="slide" class="bg-tertiary">
           Slide 3
         </div>
-      </quasar-slider>
+      </q-slider>
 
       <p class="caption">
         Slider with Arrows, Dots and Fullscreen controls.
       </p>
-      <quasar-slider arrows dots fullscreen class="text-white">
+      <q-slider arrows dots fullscreen class="text-white">
         <div slot="slide" class="bg-primary">
           <div>Slide 1</div>
           <div v-for="n in 12">Line {{(n+2)}}</div>
@@ -31,12 +31,12 @@
         <div slot="slide" class="bg-tertiary">
           Slide 3
         </div>
-      </quasar-slider>
+      </q-slider>
 
       <p class="caption">
         Slider with Centered Content
       </p>
-      <quasar-slider arrows dots class="text-white">
+      <q-slider arrows dots class="text-white">
         <div slot="slide" class="bg-primary centered">
           Slide 1
         </div>
@@ -46,12 +46,12 @@
         <div slot="slide" class="bg-tertiary centered">
           Slide 3
         </div>
-      </quasar-slider>
+      </q-slider>
 
       <p class="caption">
         Slider with Custom Actions as Controls
       </p>
-      <quasar-slider arrows dots actions class="text-white">
+      <q-slider arrows dots actions class="text-white">
         <div slot="slide" class="bg-primary">
           <div v-for="n in 20">Slide {{n}}</div>
         </div>
@@ -64,7 +64,7 @@
         <i slot="action">camera_enhance</i>
         <i slot="action">bookmark_border</i>
         <i slot="action">add_shopping_cart</i>
-      </quasar-slider>
+      </q-slider>
 
       <p class="caption">
         Launch Slider on Fullscreen
@@ -72,8 +72,8 @@
       <button class="primary glossy" @click="$refs.modal.open()">
         Launch
       </button>
-      <quasar-modal ref="modal" class="maximized">
-        <quasar-slider arrows dots class="text-white full-height">
+      <q-modal ref="modal" class="maximized">
+        <q-slider arrows dots class="text-white full-height">
           <div slot="slide" class="bg-primary centered">
             <h1>Slide 1</h1>
             <button class="dark glossy" @click="$refs.modal.close()">Close Me</button>
@@ -86,8 +86,8 @@
             <h1>Slide 3</h1>
             <button class="dark glossy" @click="$refs.modal.close()">Close Me</button>
           </div>
-        </quasar-slider>
-      </quasar-modal>
+        </q-slider>
+      </q-modal>
     </div>
   </div>
 </template>
diff --git a/dev/components/components/spinner.vue b/dev/components/components/spinner.vue
index 09eb5099f82..1338f842a02 100644
--- a/dev/components/components/spinner.vue
+++ b/dev/components/components/spinner.vue
@@ -6,20 +6,20 @@
           Size: {{ size }}px
         </div>
         <div>
-          <quasar-range label v-model="size" :min="20" :max="256"></quasar-range>
+          <q-range label v-model="size" :min="20" :max="256"></q-range>
         </div>
 
         <i class="text-grey-7" style="font-size: 2rem">palette</i>
         <label for="color-spinner" class="auto">Color</label>
         <input id="color-spinner" v-model="color" style="width: 80px; text-align: center; margin-right: 10px;">
-        <quasar-dialog-select
+        <q-dialog-select
           type="radio"
           v-model="color"
           :options="colorOptions"
           ok-label="Pick"
           title="Spinner Color"
           style="vertical-align: middle"
-        ></quasar-select>
+        ></q-select>
       </div>
 
       <p class="caption">
@@ -33,7 +33,7 @@
             :color="color"
             :size="size"
           ></spinner>
-          <quasar-tooltip>{{spinner}}</quasar-tooltip>
+          <q-tooltip>{{spinner}}</q-tooltip>
         </div>
       </div>
 
diff --git a/dev/components/components/state.vue b/dev/components/components/state.vue
index 677856e5177..e2b8d9a5912 100644
--- a/dev/components/components/state.vue
+++ b/dev/components/components/state.vue
@@ -11,7 +11,7 @@
       </p>
 
       <div class="row justify-center" style="margin-top: 20px;">
-        <quasar-state :active="state">
+        <q-state :active="state">
           <div slot="active">
             <spinner name="hourglass" :size="40" color="#90caf9"></spinner>
             &nbsp;&nbsp;&nbsp;Active State
@@ -20,7 +20,7 @@
           <button class="primary" @click="changeState()">
             Default State - Hit me!
           </button>
-        </quasar-state>
+        </q-state>
       </div>
     </div>
   </div>
diff --git a/dev/components/components/stepper.vue b/dev/components/components/stepper.vue
index cf0c897562b..284a5a5d814 100644
--- a/dev/components/components/stepper.vue
+++ b/dev/components/components/stepper.vue
@@ -1,24 +1,24 @@
 <template>
   <div>
     <div class="layout-padding">
-      <quasar-transition name="slide">
-        <quasar-stepper @finish="finish()" ref="stepper" v-show="!finished">
-          <quasar-step title="Select campaign settings">
+      <q-transition name="slide">
+        <q-stepper @finish="finish()" ref="stepper" v-show="!finished">
+          <q-step title="Select campaign settings">
             For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.
-          </quasar-step>
-          <quasar-step title="Create an ad group" :ready="ready">
+          </q-step>
+          <q-step title="Create an ad group" :ready="ready">
             An ad group contains one or more ads which target a shared set of keywords.
             <br><br>
             <label>
-              <quasar-toggle v-model="ready"></quasar-toggle>
+              <q-toggle v-model="ready"></q-toggle>
               Enable next step
             </label>
-          </quasar-step>
-          <quasar-step title="Create an ad">
+          </q-step>
+          <q-step title="Create an ad">
             Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions. If you run into any problems with your ads, find out how to tell if they're running and how to resolve approval issues.
-          </quasar-step>
-        </quasar-stepper>
-      </quasar-transition>
+          </q-step>
+        </q-stepper>
+      </q-transition>
 
       <div v-show="finished" class="items-center column justify-center full-width full-height">
         <p class="caption">
diff --git a/dev/components/components/tooltip.vue b/dev/components/components/tooltip.vue
index 224b02f3e12..e9ed4611e9d 100644
--- a/dev/components/components/tooltip.vue
+++ b/dev/components/components/tooltip.vue
@@ -14,35 +14,35 @@
 
       <div style="margin-top: 40px;width: 200px; height: 70px;background-color: #26A69A;">
         &nbsp;
-        <quasar-tooltip>
+        <q-tooltip>
           Quasar Rulz!
-        </quasar-tooltip>
+        </q-tooltip>
       </div>
       <br><br>
       <div class="group">
         <button class="indigo">
           Hover
-          <quasar-tooltip>
+          <q-tooltip>
             Quasar Tooltip 1
-          </quasar-tooltip>
+          </q-tooltip>
         </button>
         <button class="red">
           Over
-          <quasar-tooltip>
+          <q-tooltip>
             Quasar Tooltip 2
-          </quasar-tooltip>
+          </q-tooltip>
         </button>
         <button class="purple">
           These
-          <quasar-tooltip>
+          <q-tooltip>
             Quasar Tooltip 3
-          </quasar-tooltip>
+          </q-tooltip>
         </button>
         <button class="amber">
           Buttons
-          <quasar-tooltip>
+          <q-tooltip>
             Quasar Tooltip 4
-          </quasar-tooltip>
+          </q-tooltip>
         </button>
       </div>
 
@@ -51,10 +51,10 @@
           <button class="orange push">
             Mouse Hover
 
-            <quasar-tooltip :anchor="anchor" :self="self">
+            <q-tooltip :anchor="anchor" :self="self">
               <div>Quasar is <strong>great</strong>!</div>
               <div class="text-center">Try it.</div>
-            </quasar-popover>
+            </q-popover>
           </button>
         </div>
 
@@ -70,30 +70,30 @@
               <div class="column group">
                 <div>Vertical</div>
                 <label>
-                  <quasar-radio v-model="anchorOrigin.vertical" val="top"></quasar-radio>
+                  <q-radio v-model="anchorOrigin.vertical" val="top"></q-radio>
                   Top
                 </label>
                 <label>
-                  <quasar-radio v-model="anchorOrigin.vertical" val="center"></quasar-radio>
+                  <q-radio v-model="anchorOrigin.vertical" val="center"></q-radio>
                   Center
                 </label>
                 <label>
-                  <quasar-radio v-model="anchorOrigin.vertical" val="bottom"></quasar-radio>
+                  <q-radio v-model="anchorOrigin.vertical" val="bottom"></q-radio>
                   Bottom
                 </label>
               </div>
               <div class="column group">
                 <div>Horizontal</div>
                 <label>
-                  <quasar-radio v-model="anchorOrigin.horizontal" val="left"></quasar-radio>
+                  <q-radio v-model="anchorOrigin.horizontal" val="left"></q-radio>
                   Left
                 </label>
                 <label>
-                  <quasar-radio v-model="anchorOrigin.horizontal" val="middle"></quasar-radio>
+                  <q-radio v-model="anchorOrigin.horizontal" val="middle"></q-radio>
                   Middle
                 </label>
                 <label>
-                  <quasar-radio v-model="anchorOrigin.horizontal" val="right"></quasar-radio>
+                  <q-radio v-model="anchorOrigin.horizontal" val="right"></q-radio>
                   Right
                 </label>
               </div>
@@ -106,30 +106,30 @@
               <div class="column group">
                 <div>Vertical</div>
                 <label>
-                  <quasar-radio v-model="selfOrigin.vertical" val="top"></quasar-radio>
+                  <q-radio v-model="selfOrigin.vertical" val="top"></q-radio>
                   Top
                 </label>
                 <label>
-                  <quasar-radio v-model="selfOrigin.vertical" val="center"></quasar-radio>
+                  <q-radio v-model="selfOrigin.vertical" val="center"></q-radio>
                   Center
                 </label>
                 <label>
-                  <quasar-radio v-model="selfOrigin.vertical" val="bottom"></quasar-radio>
+                  <q-radio v-model="selfOrigin.vertical" val="bottom"></q-radio>
                   Bottom
                 </label>
               </div>
               <div class="column group">
                 <div>Horizontal</div>
                 <label>
-                  <quasar-radio v-model="selfOrigin.horizontal" val="left"></quasar-radio>
+                  <q-radio v-model="selfOrigin.horizontal" val="left"></q-radio>
                   Left
                 </label>
                 <label>
-                  <quasar-radio v-model="selfOrigin.horizontal" val="middle"></quasar-radio>
+                  <q-radio v-model="selfOrigin.horizontal" val="middle"></q-radio>
                   Middle
                 </label>
                 <label>
-                  <quasar-radio v-model="selfOrigin.horizontal" val="right"></quasar-radio>
+                  <q-radio v-model="selfOrigin.horizontal" val="right"></q-radio>
                   Right
                 </label>
               </div>
diff --git a/dev/components/components/tree.vue b/dev/components/components/tree.vue
index 09fccbf9d13..ab5b5db77a2 100644
--- a/dev/components/components/tree.vue
+++ b/dev/components/components/tree.vue
@@ -12,11 +12,11 @@
         turn them into anything you want.
       </p>
 
-      <quasar-tree
+      <q-tree
         :model="treeModel"
         contract-html="<i>remove_circle</i>"
         expand-html="<i>add_circle</i>"
-      ></quasar-tree>
+      ></q-tree>
     </div>
   </div>
 </template>
diff --git a/dev/components/components/video-embedding.vue b/dev/components/components/video-embedding.vue
index 8ab1b26f3da..c0165f15f6b 100644
--- a/dev/components/components/video-embedding.vue
+++ b/dev/components/components/video-embedding.vue
@@ -2,9 +2,9 @@
   <div>
     <div class="layout-padding">
       <p class="caption">With Component</p>
-      <quasar-video
+      <q-video
         src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
-      ></quasar-video>
+      ></q-video>
 
       <p class="caption">With HTML Markup</p>
       <div class="video">
diff --git a/dev/components/css/card.vue b/dev/components/css/card.vue
index 308ce6f4381..906604aa9cb 100644
--- a/dev/components/css/card.vue
+++ b/dev/components/css/card.vue
@@ -115,23 +115,23 @@
           Card with Collapsible List
         </div>
         <div class="list item-delimiter">
-          <quasar-collapsible icon="explore" label="Places">
+          <q-collapsible icon="explore" label="Places">
             <div>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </div>
-          </quasar-collapsible>
+          </q-collapsible>
 
-          <quasar-collapsible icon="perm_identity" label="People">
+          <q-collapsible icon="perm_identity" label="People">
             <div>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </div>
-          </quasar-collapsible>
+          </q-collapsible>
 
-          <quasar-collapsible icon="shopping_cart" label="Shopping">
+          <q-collapsible icon="shopping_cart" label="Shopping">
             <div>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </div>
-          </quasar-collapsible>
+          </q-collapsible>
         </div>
       </div>
 
@@ -165,9 +165,9 @@
         <div class="card-title">
           Card with Parallax
         </div>
-        <quasar-parallax :src="'statics/parallax2.jpg'" :height="150">
+        <q-parallax :src="'statics/parallax2.jpg'" :height="150">
           <div slot="loading">Loading...</div>
-        </quasar-parallax>
+        </q-parallax>
         <div class="card-content">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
diff --git a/dev/components/css/grid.vue b/dev/components/css/grid.vue
index 545a41533e6..74699a01b73 100644
--- a/dev/components/css/grid.vue
+++ b/dev/components/css/grid.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="layout-padding">
       <label>
-        <quasar-toggle v-model="border"></quasar-toggle>
+        <q-toggle v-model="border"></q-toggle>
         Grid Borders
       </label>
       <div id="view-flexbox" :class="{'with-border': border}">
diff --git a/dev/components/css/html-table.vue b/dev/components/css/html-table.vue
index 28fff38cdad..9ab349c4249 100644
--- a/dev/components/css/html-table.vue
+++ b/dev/components/css/html-table.vue
@@ -3,74 +3,74 @@
     <div class="layout-padding">
       <div class="column group">
         <label>
-          <quasar-checkbox v-model="bordered"></quasar-checkbox>
+          <q-checkbox v-model="bordered"></q-checkbox>
           Bordered
         </label>
         <label>
-          <quasar-checkbox v-model="highlight"></quasar-checkbox>
+          <q-checkbox v-model="highlight"></q-checkbox>
           Highlight
         </label>
 
         <div class="column gt-md-row">
           <label>
-            <quasar-radio v-model="delimiter" val="none"></quasar-radio>
+            <q-radio v-model="delimiter" val="none"></q-radio>
             No delimiter
           </label>
           <label>
-            <quasar-radio v-model="delimiter" val="horizontal"></quasar-radio>
+            <q-radio v-model="delimiter" val="horizontal"></q-radio>
             Horizontal delimiter
           </label>
           <label>
-            <quasar-radio v-model="delimiter" val="vertical"></quasar-radio>
+            <q-radio v-model="delimiter" val="vertical"></q-radio>
             Vertical delimiter
           </label>
           <label>
-            <quasar-radio v-model="delimiter" val="cell"></quasar-radio>
+            <q-radio v-model="delimiter" val="cell"></q-radio>
             Cell delimiter
           </label>
         </div>
 
         <div class="column gt-md-row">
           <label>
-            <quasar-radio v-model="stripe" val="none"></quasar-radio>
+            <q-radio v-model="stripe" val="none"></q-radio>
             No Stripe
           </label>
           <label>
-            <quasar-radio v-model="stripe" val="odd"></quasar-radio>
+            <q-radio v-model="stripe" val="odd"></q-radio>
             Striped Odd
           </label>
           <label>
-            <quasar-radio v-model="stripe" val="even"></quasar-radio>
+            <q-radio v-model="stripe" val="even"></q-radio>
             Striped Even
           </label>
         </div>
 
         <div>
           <label>
-            <quasar-radio v-model="type" val="none"></quasar-radio>
+            <q-radio v-model="type" val="none"></q-radio>
             Normal
           </label>
           <label>
-            <quasar-radio v-model="type" val="flipped"></quasar-radio>
+            <q-radio v-model="type" val="flipped"></q-radio>
             Flipped
           </label>
           <label>
-            <quasar-radio v-model="type" val="responsive"></quasar-radio>
+            <q-radio v-model="type" val="responsive"></q-radio>
             Responsive
           </label>
         </div>
 
         <div>
           <label>
-            <quasar-radio v-model="gutter" val="none"></quasar-radio>
+            <q-radio v-model="gutter" val="none"></q-radio>
             Normal
           </label>
           <label>
-            <quasar-radio v-model="gutter" val="compact"></quasar-radio>
+            <q-radio v-model="gutter" val="compact"></q-radio>
             Compact
           </label>
           <label>
-            <quasar-radio v-model="gutter" val="loose"></quasar-radio>
+            <q-radio v-model="gutter" val="loose"></q-radio>
             Loose
           </label>
         </div>
@@ -81,7 +81,7 @@
         Classes <span class="right-detail"><em>{{computedClasses}}</em></span>
       </div>
 
-      <table style="margin-top: 30px;" class="quasar-table" :class="computedClasses">
+      <table style="margin-top: 30px;" class="q-table" :class="computedClasses">
         <thead>
           <tr>
             <th class="text-left">Name</th>
diff --git a/dev/components/css/list.vue b/dev/components/css/list.vue
index c6c2c53dfb6..759138e10ac 100644
--- a/dev/components/css/list.vue
+++ b/dev/components/css/list.vue
@@ -292,7 +292,7 @@
               more_vert
             </i>
 
-            <quasar-popover ref="popover">
+            <q-popover ref="popover">
               <div class="list">
                 <div class="item item-link" @click="$refs.popover.close()">
                   <div class="item-content">Reply</div>
@@ -304,7 +304,7 @@
                   <div class="item-content">Delete</div>
                 </div>
               </div>
-            </quasar-popover>
+            </q-popover>
           </div>
         </div>
       </div>
@@ -363,38 +363,38 @@
       </div>
 
       <div class="list">
-        <quasar-collapsible icon="inbox" label="Inbox">
+        <q-collapsible icon="inbox" label="Inbox">
           <div class="item" v-for="n in 3">
             <i class="item-primary">mail</i>
             <div class="item-content">
               Email {{ n + 1 }}
             </div>
           </div>
-          <quasar-collapsible icon="favorites" label="Favorites">
+          <q-collapsible icon="favorites" label="Favorites">
             <div class="item" v-for="n in 3">
               <i class="item-primary">mail</i>
               <div class="item-content">
                 Favorite {{ n + 1 }}
               </div>
             </div>
-          </quasar-collapsible>
-        </quasar-collapsible>
-        <quasar-collapsible icon="send" label="Sent">
+          </q-collapsible>
+        </q-collapsible>
+        <q-collapsible icon="send" label="Sent">
           <div class="item" v-for="n in 3">
             <i class="item-primary">mail</i>
             <div class="item-content">
               Email {{ n + 1 }}
             </div>
           </div>
-        </quasar-collapsible>
-        <quasar-collapsible icon="delete" label="Trash">
+        </q-collapsible>
+        <q-collapsible icon="delete" label="Trash">
           <div class="item" v-for="n in 3">
             <i class="item-primary">mail</i>
             <div class="item-content">
               Email {{ n + 1 }}
             </div>
           </div>
-        </quasar-collapsible>
+        </q-collapsible>
       </div>
 
       <div class="list">
@@ -466,7 +466,7 @@
       <div class="list">
         <label class="item">
           <div class="item-primary">
-            <quasar-checkbox v-model="checked"></quasar-checkbox>
+            <q-checkbox v-model="checked"></q-checkbox>
           </div>
           <div class="item-content">
             Notifications
@@ -474,7 +474,7 @@
         </label>
         <label class="item two-lines">
           <div class="item-primary">
-            <quasar-checkbox v-model="checked"></quasar-checkbox>
+            <q-checkbox v-model="checked"></q-checkbox>
           </div>
           <div class="item-content">
             <div>Notifications</div>
@@ -483,7 +483,7 @@
         </label>
         <label class="item three-lines">
           <div class="item-primary">
-            <quasar-checkbox v-model="checked"></quasar-checkbox>
+            <q-checkbox v-model="checked"></q-checkbox>
           </div>
           <div class="item-content">
             <div>Notifications</div>
@@ -496,7 +496,7 @@
       <div class="list">
         <label class="item">
           <div class="item-primary">
-            <quasar-radio v-model="option" val="opt1"></quasar-radio>
+            <q-radio v-model="option" val="opt1"></q-radio>
           </div>
           <div class="item-content">
             Option 1
@@ -504,7 +504,7 @@
         </label>
         <label class="item two-lines">
           <div class="item-primary">
-            <quasar-radio v-model="option" val="opt2"></quasar-radio>
+            <q-radio v-model="option" val="opt2"></q-radio>
           </div>
           <div class="item-content">
             <div>Option 2</div>
@@ -513,7 +513,7 @@
         </label>
         <label class="item three-lines">
           <div class="item-primary">
-            <quasar-radio v-model="option" val="opt3"></quasar-radio>
+            <q-radio v-model="option" val="opt3"></q-radio>
           </div>
           <div class="item-content">
             <div>Option 3</div>
@@ -529,7 +529,7 @@
             Events and reminders
           </div>
           <div class="item-secondary">
-            <quasar-toggle v-model="checked"></quasar-toggle>
+            <q-toggle v-model="checked"></q-toggle>
           </div>
         </label>
         <label class="item two-lines">
@@ -538,7 +538,7 @@
             <div>Lorem ipsum</div>
           </div>
           <div class="item-secondary">
-            <quasar-toggle v-model="checked" class="purple"></quasar-toggle>
+            <q-toggle v-model="checked" class="purple"></q-toggle>
           </div>
         </label>
         <label class="item three-lines">
@@ -547,7 +547,7 @@
             <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
           </div>
           <div class="item-secondary">
-            <quasar-toggle v-model="checked" class="red"></quasar-toggle>
+            <q-toggle v-model="checked" class="red"></q-toggle>
           </div>
         </label>
       </div>
@@ -558,7 +558,7 @@
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
           <div class="item-content">
-            <quasar-select class="full-width" type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Company"></quasar-select>
+            <q-select class="full-width" type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Company"></q-select>
           </div>
         </div>
         <hr>
@@ -566,13 +566,13 @@
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
           <div class="item-content">
-            <quasar-select class="full-width" type="checkbox" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" title="Companies"></quasar-select>
+            <q-select class="full-width" type="checkbox" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" title="Companies"></q-select>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
           <div class="item-content">
-            <quasar-select class="full-width" type="toggle" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" title="Companies"></quasar-select>
+            <q-select class="full-width" type="toggle" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" title="Companies"></q-select>
           </div>
         </div>
       </div>
@@ -582,13 +582,13 @@
         <div class="item two-lines">
           <i class="item-primary">volume_up</i>
           <div class="item-content">
-            <quasar-range v-model="range" :min="0" :max="50" label></quasar-range>
+            <q-range v-model="range" :min="0" :max="50" label></q-range>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">brightness_medium</i>
           <div class="item-content">
-            <quasar-range v-model="range" :min="0" :max="50" label></quasar-range>
+            <q-range v-model="range" :min="0" :max="50" label></q-range>
           </div>
         </div>
         <hr>
@@ -596,13 +596,13 @@
         <div class="item two-lines">
           <i class="item-primary">local_atm</i>
           <div class="item-content">
-            <quasar-double-range v-model="doubleRange" :min="0" :max="50" label></quasar-double-range>
+            <q-double-range v-model="doubleRange" :min="0" :max="50" label></q-double-range>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">euro_symbol</i>
           <div class="item-content">
-            <quasar-double-range v-model="doubleRange" :min="0" :max="50" label></quasar-double-range>
+            <q-double-range v-model="doubleRange" :min="0" :max="50" label></q-double-range>
           </div>
         </div>
       </div>
@@ -613,13 +613,13 @@
         <div class="item two-lines">
           <i class="item-primary">access_time</i>
           <div class="item-content">
-            <quasar-datetime class="full-width" v-model="timestamp" type="time"></quasar-datetime>
+            <q-datetime class="full-width" v-model="timestamp" type="time"></q-datetime>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">update</i>
           <div class="item-content row items-baseline">
-            <quasar-datetime class="full-width" v-model="timestamp" type="date"></quasar-datetime>
+            <q-datetime class="full-width" v-model="timestamp" type="date"></q-datetime>
           </div>
         </div>
         <hr>
@@ -627,7 +627,7 @@
         <div class="item two-lines">
           <i class="item-primary">notifications</i>
           <div class="item-content row items-baseline">
-            <quasar-datetime class="full-width" v-model="timestamp" type="datetime"></quasar-datetime>
+            <q-datetime class="full-width" v-model="timestamp" type="datetime"></q-datetime>
           </div>
         </div>
       </div>
@@ -922,7 +922,7 @@
           <i class="item-primary">edit</i>
           <div class="item-content">
             <span class="item-label">Number:</span>
-            <quasar-numeric v-model="number"></quasar-numeric>
+            <q-numeric v-model="number"></q-numeric>
           </div>
         </div>
         <hr class="inset">
@@ -930,7 +930,7 @@
           <i class="item-primary">edit</i>
           <div class="item-content">
             <span class="item-label">Number:</span>
-            <quasar-numeric v-model="number"></quasar-numeric>
+            <q-numeric v-model="number"></q-numeric>
           </div>
         </div>
 
@@ -940,7 +940,7 @@
         <div class="item multiple-lines">
           <i class="item-primary">edit</i>
           <div class="item-content">
-            <quasar-chips v-model="chips" placeholder="Type names"></quasar-chips>
+            <q-chips v-model="chips" placeholder="Type names"></q-chips>
           </div>
         </div>
       </div>
diff --git a/dev/components/form/checkbox.vue b/dev/components/form/checkbox.vue
index d188822dcfc..79ace641467 100644
--- a/dev/components/form/checkbox.vue
+++ b/dev/components/form/checkbox.vue
@@ -8,29 +8,29 @@
       <p class="caption">Standalone</p>
       <div class="column group">
         <label>
-          <quasar-checkbox v-model="checked"></quasar-checkbox>
+          <q-checkbox v-model="checked"></q-checkbox>
           Checkbox Label
         </label>
 
         <label>
-          <quasar-checkbox v-model="checked" class="teal"></quasar-checkbox>
+          <q-checkbox v-model="checked" class="teal"></q-checkbox>
           Checkbox Label
         </label>
 
         <label>
-          <quasar-checkbox v-model="checked" class="orange"></quasar-checkbox>
+          <q-checkbox v-model="checked" class="orange"></q-checkbox>
           Checkbox Label
         </label>
 
         <label>
-          <quasar-checkbox v-model="checked" class="dark"></quasar-checkbox>
+          <q-checkbox v-model="checked" class="dark"></q-checkbox>
           Checkbox Label
         </label>
       </div>
 
       <p class="caption">Disabled State</p>
       <label>
-        <quasar-checkbox v-model="checked" disable></quasar-checkbox>
+        <q-checkbox v-model="checked" disable></q-checkbox>
         Checkbox Label
       </label>
 
@@ -38,7 +38,7 @@
       <div class="list">
         <label class="item">
           <div class="item-primary">
-            <quasar-checkbox v-model="checked"></quasar-checkbox>
+            <q-checkbox v-model="checked"></q-checkbox>
           </div>
           <div class="item-content">
             Notifications
@@ -46,7 +46,7 @@
         </label>
         <label class="item two-lines">
           <div class="item-primary">
-            <quasar-checkbox v-model="checked"></quasar-checkbox>
+            <q-checkbox v-model="checked"></q-checkbox>
           </div>
           <div class="item-content">
             <div>Notifications</div>
@@ -55,7 +55,7 @@
         </label>
         <label class="item three-lines">
           <div class="item-primary">
-            <quasar-checkbox v-model="checked"></quasar-checkbox>
+            <q-checkbox v-model="checked"></q-checkbox>
           </div>
           <div class="item-content">
             <div>Notifications</div>
diff --git a/dev/components/form/chips.vue b/dev/components/form/chips.vue
index e5c89b8bedf..0c5727d4cab 100644
--- a/dev/components/form/chips.vue
+++ b/dev/components/form/chips.vue
@@ -12,23 +12,23 @@
         <span class="mobile-only">Tap</span>
         on Chips Textbox below to start adding Chips.
       </p>
-      <quasar-chips v-model="model"></quasar-chips>
+      <q-chips v-model="model"></q-chips>
 
       <p class="caption">Disabled State</p>
-      <quasar-chips v-model="model" disable></quasar-chips>
+      <q-chips v-model="model" disable></q-chips>
 
       <p class="caption">Readonly State</p>
-      <quasar-chips v-model="model" readonly></quasar-chips>
+      <q-chips v-model="model" readonly></q-chips>
 
       <p class="caption">Error State</p>
-      <quasar-chips v-model="model" class="has-error"></quasar-chips>
+      <q-chips v-model="model" class="has-error"></q-chips>
 
       <p class="caption">Inside of a List</p>
       <div class="list">
         <div class="item multiple-lines">
           <i class="item-primary">edit</i>
           <div class="item-content">
-            <quasar-chips v-model="model" placeholder="Type names"></quasar-chips>
+            <q-chips v-model="model" placeholder="Type names"></q-chips>
           </div>
         </div>
       </div>
diff --git a/dev/components/form/datetime.vue b/dev/components/form/datetime.vue
index f7bc8e2e0d7..16b1ba8bfb4 100644
--- a/dev/components/form/datetime.vue
+++ b/dev/components/form/datetime.vue
@@ -34,7 +34,7 @@
           </span>
         </small>
       </p>
-      <quasar-datetime v-model="model" type="date"></quasar-datetime>
+      <q-datetime v-model="model" type="date"></q-datetime>
 
       <p class="caption">
         Time
@@ -49,32 +49,32 @@
           <span class="mat-only">inside of the clock</span>.
         </small>
       </p>
-      <quasar-datetime v-model="model" type="time"></quasar-datetime>
+      <q-datetime v-model="model" type="time"></q-datetime>
 
       <p class="caption">Date & Time</p>
-      <quasar-datetime v-model="model" type="datetime"></quasar-datetime>
+      <q-datetime v-model="model" type="datetime"></q-datetime>
 
       <p class="caption">With Label</p>
-      <quasar-datetime v-model="model" type="date" label="Pick Date"></quasar-datetime>
+      <q-datetime v-model="model" type="date" label="Pick Date"></q-datetime>
 
       <p class="caption">With Placeholder</p>
-      <quasar-datetime v-model="model" type="date" placeholder="Pick Date"></quasar-datetime>
+      <q-datetime v-model="model" type="date" placeholder="Pick Date"></q-datetime>
 
       <p class="caption">Disabled State</p>
-      <quasar-datetime disable v-model="model" type="datetime"></quasar-datetime>
+      <q-datetime disable v-model="model" type="datetime"></q-datetime>
 
       <p class="caption">Readonly State</p>
-      <quasar-datetime readonly v-model="model" type="datetime"></quasar-datetime>
+      <q-datetime readonly v-model="model" type="datetime"></q-datetime>
 
       <p class="caption">Error State</p>
-      <quasar-datetime class="has-error" v-model="model" type="datetime"></quasar-datetime>
+      <q-datetime class="has-error" v-model="model" type="datetime"></q-datetime>
 
       <p class="caption">Min & Max</p>
-      <quasar-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></quasar-datetime>
+      <q-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></q-datetime>
 
       <p class="caption">Range <sup>(beta)</sup></p>
-      <quasar-datetime type="datetime" v-model="range.start" :min="range.min" :max="range.end"></quasar-datetime>
-      <quasar-datetime type="datetime" v-model="range.end" :min="range.start" :max="range.max"></quasar-datetime>
+      <q-datetime type="datetime" v-model="range.start" :min="range.min" :max="range.end"></q-datetime>
+      <q-datetime type="datetime" v-model="range.end" :min="range.start" :max="range.max"></q-datetime>
 
       <p class="caption">Inside of a List</p>
       <div class="list">
@@ -82,13 +82,13 @@
         <div class="item two-lines">
           <i class="item-primary">access_time</i>
           <div class="item-content">
-            <quasar-datetime class="full-width" v-model="model" type="time"></quasar-datetime>
+            <q-datetime class="full-width" v-model="model" type="time"></q-datetime>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">update</i>
           <div class="item-content row items-baseline">
-            <quasar-datetime class="full-width" v-model="model" type="date"></quasar-datetime>
+            <q-datetime class="full-width" v-model="model" type="date"></q-datetime>
           </div>
         </div>
         <hr>
@@ -96,7 +96,7 @@
         <div class="item two-lines">
           <i class="item-primary">notifications</i>
           <div class="item-content row items-baseline">
-            <quasar-datetime class="full-width" v-model="model" type="datetime"></quasar-datetime>
+            <q-datetime class="full-width" v-model="model" type="datetime"></q-datetime>
           </div>
         </div>
       </div>
@@ -119,7 +119,7 @@
           </span>
         </small>
       </p>
-      <quasar-inline-datetime v-model="model" type="date"></quasar-inline-datetime>
+      <q-inline-datetime v-model="model" type="date"></q-inline-datetime>
 
       <p class="caption">
         Time
@@ -134,23 +134,23 @@
           <span class="mat-only">inside of the clock</span>.
         </small>
       </p>
-      <quasar-inline-datetime v-model="model" type="time"></quasar-inline-datetime>
+      <q-inline-datetime v-model="model" type="time"></q-inline-datetime>
 
       <p class="caption">Date & Time</p>
-      <quasar-inline-datetime v-model="model" type="datetime"></quasar-inline-datetime>
+      <q-inline-datetime v-model="model" type="datetime"></q-inline-datetime>
 
       <p class="caption">Disabled State</p>
-      <quasar-inline-datetime disable v-model="model" type="datetime"></quasar-inline-datetime>
+      <q-inline-datetime disable v-model="model" type="datetime"></q-inline-datetime>
 
       <p class="caption">Readonly State</p>
-      <quasar-inline-datetime readonly v-model="model" type="datetime"></quasar-inline-datetime>
+      <q-inline-datetime readonly v-model="model" type="datetime"></q-inline-datetime>
 
       <p class="caption">Min & Max</p>
-      <quasar-inline-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></quasar-inline-datetime>
+      <q-inline-datetime type="datetime" v-model="minMaxModel" :min="min" :max="max"></q-inline-datetime>
 
       <p class="caption">Range <sup>(beta)</sup></p>
-      <quasar-inline-datetime type="datetime" v-model="range.start" :min="range.min" :max="range.end"></quasar-inline-datetime>
-      <quasar-inline-datetime type="datetime" v-model="range.end" :min="range.start" :max="range.max"></quasar-inline-datetime>
+      <q-inline-datetime type="datetime" v-model="range.start" :min="range.min" :max="range.end"></q-inline-datetime>
+      <q-inline-datetime type="datetime" v-model="range.end" :min="range.start" :max="range.max"></q-inline-datetime>
     </div>
   </div>
 </template>
diff --git a/dev/components/form/dialog-select.vue b/dev/components/form/dialog-select.vue
index 29a15cfe747..898caede53f 100644
--- a/dev/components/form/dialog-select.vue
+++ b/dev/components/form/dialog-select.vue
@@ -2,26 +2,26 @@
   <div>
     <div class="layout-padding">
       <p class="caption">With Radios</p>
-      <quasar-dialog-select type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Radios"></quasar-dialog-select>
+      <q-dialog-select type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Radios"></q-dialog-select>
       <p class="caption">With Checkboxes</p>
-      <quasar-dialog-select type="checkbox" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Checkboxes"></quasar-dialog-select>
+      <q-dialog-select type="checkbox" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Checkboxes"></q-dialog-select>
       <p class="caption">With Toggles</p>
-      <quasar-dialog-select type="toggle" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Toggles"></quasar-dialog-select>
+      <q-dialog-select type="toggle" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Toggles"></q-dialog-select>
 
       <p class="caption">With Label</p>
-      <quasar-dialog-select type="checkbox" v-model="multipleSelect" :options="selectOptions" label="Pick Company"></quasar-dialog-select>
+      <q-dialog-select type="checkbox" v-model="multipleSelect" :options="selectOptions" label="Pick Company"></q-dialog-select>
 
       <p class="caption">With Placeholder</p>
-      <quasar-dialog-select type="radio" v-model="select" :options="selectOptions" placeholder="Pick Company"></quasar-dialog-select>
+      <q-dialog-select type="radio" v-model="select" :options="selectOptions" placeholder="Pick Company"></q-dialog-select>
 
       <p class="caption">Disabled State</p>
-      <quasar-dialog-select disable type="radio" v-model="select" :options="selectOptions"></quasar-dialog-select>
+      <q-dialog-select disable type="radio" v-model="select" :options="selectOptions"></q-dialog-select>
 
       <p class="caption">Readonly State</p>
-      <quasar-dialog-select readonly type="radio" v-model="select" :options="selectOptions"></quasar-dialog-select>
+      <q-dialog-select readonly type="radio" v-model="select" :options="selectOptions"></q-dialog-select>
 
       <p class="caption">Error State</p>
-      <quasar-dialog-select class="has-error" type="radio" v-model="select" :options="selectOptions"></quasar-dialog-select>
+      <q-dialog-select class="has-error" type="radio" v-model="select" :options="selectOptions"></q-dialog-select>
 
       <p class="caption">Inside of a List</p>
       <div class="list">
@@ -31,14 +31,14 @@
           <div class="item-content row items-center">
             <label style="margin-right: 10px;">Radio:</label>
             <br>
-            <quasar-dialog-select class="auto" type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Company"></quasar-dialog-select>
+            <q-dialog-select class="auto" type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Company"></q-dialog-select>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
           <div class="item-content row items-center">
             <label style="margin-right: 10px;">Radio:</label>
-            <quasar-dialog-select class="auto" type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Company"></quasar-dialog-select>
+            <q-dialog-select class="auto" type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Company"></q-dialog-select>
           </div>
         </div>
         <hr>
@@ -47,14 +47,14 @@
           <i class="item-primary">supervisor_account</i>
           <div class="item-content row items-center">
             <label style="margin-right: 10px;">Checkbox:</label>
-            <quasar-dialog-select class="auto" type="checkbox" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" title="Companies"></quasar-dialog-select>
+            <q-dialog-select class="auto" type="checkbox" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" title="Companies"></q-dialog-select>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
           <div class="item-content row items-center">
             <label style="margin-right: 10px;">Toggle:</label>
-            <quasar-dialog-select class="auto" type="toggle" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" title="Companies"></quasar-dialog-select>
+            <q-dialog-select class="auto" type="toggle" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" title="Companies"></q-dialog-select>
           </div>
         </div>
       </div>
diff --git a/dev/components/form/double-range.vue b/dev/components/form/double-range.vue
index 9c3fefb48d5..39838dd0c1e 100644
--- a/dev/components/form/double-range.vue
+++ b/dev/components/form/double-range.vue
@@ -8,7 +8,7 @@
           Model <span class="right-detail"><em>{{standalone.min}} to {{standalone.max}}</em> &nbsp;&nbsp;(0 to 50)</span>
         </span>
       </p>
-      <quasar-double-range v-model="standalone" :min="0" :max="50"></quasar-double-range>
+      <q-double-range v-model="standalone" :min="0" :max="50"></q-double-range>
 
        <p class="caption">
         With Label
@@ -16,7 +16,7 @@
           Model <span class="right-detail"><em>{{label.min}} to {{label.max}}</em> &nbsp;&nbsp;(-20 to 20, step 4)</span>
         </span>
       </p>
-      <quasar-double-range v-model="label" :min="-20" :max="20" :step="4" label></quasar-double-range>
+      <q-double-range v-model="label" :min="-20" :max="20" :step="4" label></q-double-range>
 
       <p class="caption">
         With Step
@@ -24,7 +24,7 @@
           Model <span class="right-detail"><em>{{step.min}} to {{step.max}}</em> &nbsp;&nbsp;(0 to 45, step 5)</span>
         </span>
       </p>
-      <quasar-double-range v-model="step" :min="0" :max="45" :step="5" label></quasar-double-range>
+      <q-double-range v-model="step" :min="0" :max="45" :step="5" label></q-double-range>
 
       <p class="caption">
         Snap to Step
@@ -32,7 +32,7 @@
           Model <span class="right-detail"><em>{{snap.min}} to {{snap.max}}</em> &nbsp;&nbsp;(0 to 10, step 2)</span>
         </span>
       </p>
-      <quasar-double-range v-model="snap" :min="0" :max="10" :step="2" label snap></quasar-double-range>
+      <q-double-range v-model="snap" :min="0" :max="10" :step="2" label snap></q-double-range>
 
       <p class="caption">
         With Markers + Snap to Step
@@ -40,7 +40,7 @@
           Model <span class="right-detail"><em>{{marker.min}} to {{marker.max}}</em> &nbsp;&nbsp;(-6 to 10, step 2)</span>
         </span>
       </p>
-      <quasar-double-range v-model="marker" :min="-6" :max="10" :step="2" label snap markers></quasar-double-range>
+      <q-double-range v-model="marker" :min="-6" :max="10" :step="2" label snap markers></q-double-range>
 
       <p class="caption">
         Display Label Always
@@ -48,7 +48,7 @@
           Model <span class="right-detail"><em>{{label.min}} to {{label.max}}</em> &nbsp;&nbsp;(-20 to 20, step 4)</span>
         </span>
       </p>
-      <quasar-double-range v-model="label" :min="-20" :max="20" :step="4" label-always></quasar-double-range>
+      <q-double-range v-model="label" :min="-20" :max="20" :step="4" label-always></q-double-range>
 
 
 
@@ -58,7 +58,7 @@
           Model <span class="right-detail"><em>{{range.min}} to {{range.max}}</em> &nbsp;&nbsp;(0 to 100, step 1)</span>
         </span>
       </p>
-      <quasar-double-range v-model="range" :min="0" :max="100" label drag-range></quasar-double-range>
+      <q-double-range v-model="range" :min="0" :max="100" label drag-range></q-double-range>
 
       <p class="caption">
         Drag Range + Snap to Step
@@ -66,38 +66,38 @@
           Model <span class="right-detail"><em>{{range.min}} to {{range.max}}</em> &nbsp;&nbsp;(0 to 100, step 5)</span>
         </span>
       </p>
-      <quasar-double-range v-model="range" :min="0" :max="100" :step="5" drag-range label markers snap></quasar-double-range>
+      <q-double-range v-model="range" :min="0" :max="100" :step="5" drag-range label markers snap></q-double-range>
 
       <p class="caption">Disable Min + Drag Range</p>
-      <quasar-double-range v-model="range" :min="0" :max="100" disable-min drag-range label></quasar-double-range>
+      <q-double-range v-model="range" :min="0" :max="100" disable-min drag-range label></q-double-range>
 
       <p class="caption">Disable Max + Drag Range + With Step</p>
-      <quasar-double-range v-model="range" :min="0" :max="100" :step="5" markers disable-max drag-range label-always></quasar-double-range>
+      <q-double-range v-model="range" :min="0" :max="100" :step="5" markers disable-max drag-range label-always></q-double-range>
 
 
       <p class="caption">Disabled State</p>
-      <quasar-double-range v-model="standalone" :min="0" :max="50" disable></quasar-double-range>
+      <q-double-range v-model="standalone" :min="0" :max="50" disable></q-double-range>
 
       <p class="caption">Error State</p>
-      <quasar-double-range class="has-error" v-model="standalone" :min="0" :max="50"></quasar-double-range>
+      <q-double-range class="has-error" v-model="standalone" :min="0" :max="50"></q-double-range>
 
       <p class="caption">Coloring</p>
-      <quasar-double-range class="secondary" v-model="standalone" :min="0" :max="50" label></quasar-double-range>
-      <quasar-double-range class="orange" v-model="standalone" :min="0" :max="50" label></quasar-double-range>
-      <quasar-double-range class="dark" v-model="standalone" :min="0" :max="50" label></quasar-double-range>
+      <q-double-range class="secondary" v-model="standalone" :min="0" :max="50" label></q-double-range>
+      <q-double-range class="orange" v-model="standalone" :min="0" :max="50" label></q-double-range>
+      <q-double-range class="dark" v-model="standalone" :min="0" :max="50" label></q-double-range>
 
       <p class="caption">Inside of a List</p>
       <div class="list">
         <div class="item two-lines">
           <i class="item-primary">local_atm</i>
           <div class="item-content">
-            <quasar-double-range v-model="standalone" :min="0" :max="50" label></quasar-double-range>
+            <q-double-range v-model="standalone" :min="0" :max="50" label></q-double-range>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">euro_symbol</i>
           <div class="item-content">
-            <quasar-double-range v-model="standalone" :min="0" :max="50" label></quasar-double-range>
+            <q-double-range v-model="standalone" :min="0" :max="50" label></q-double-range>
           </div>
         </div>
       </div>
diff --git a/dev/components/form/knob.vue b/dev/components/form/knob.vue
index f1fcb75e27e..907f8bef830 100644
--- a/dev/components/form/knob.vue
+++ b/dev/components/form/knob.vue
@@ -6,23 +6,23 @@
       </div>
 
       <p class="caption">Default</p>
-      <quasar-knob
+      <q-knob
         v-model="model"
         :min="min"
         :max="max"
-      ></quasar-knob>
+      ></q-knob>
 
       <p class="caption">With Step</p>
       <div class="group">
-        <quasar-knob
+        <q-knob
           v-model="model"
           :min="min"
           :max="max"
           :step="10"
-        ></quasar-knob>
+        ></q-knob>
 
         <p class="caption">Styling</p>
-        <quasar-knob
+        <q-knob
           v-model="model"
           size="150px"
           color="red"
@@ -31,18 +31,18 @@
           :min="min"
           :max="max"
           :placeholder="'$ ' + model"
-        ></quasar-knob>
+        ></q-knob>
 
-        <quasar-knob
+        <q-knob
           v-model="model"
           style="font-size: 3rem"
           color="#26a69a"
           :min="min"
           :max="max"
           :step="5"
-        ></quasar-knob>
+        ></q-knob>
 
-        <quasar-knob
+        <q-knob
           v-model="model"
           size="120px"
           style="font-size: 1.5rem"
@@ -53,17 +53,17 @@
           :max="max"
           :step="5"
           :placeholder="'<i>euro_symbol</i> ' + model"
-        ></quasar-knob>
+        ></q-knob>
       </div>
 
       <p class="caption">Disabled state</p>
-      <quasar-knob
+      <q-knob
         v-model="model"
         :min="min"
         :max="max"
         :placeholder="'<i>volume_up</i> ' + model"
         disable
-      ></quasar-knob>
+      ></q-knob>
     </div>
   </div>
 </template>
diff --git a/dev/components/form/numeric.vue b/dev/components/form/numeric.vue
index 94939c14685..ef829bf5a37 100644
--- a/dev/components/form/numeric.vue
+++ b/dev/components/form/numeric.vue
@@ -6,16 +6,16 @@
       </div>
 
       <p class="caption">Standalone</p>
-      <quasar-numeric v-model="number" :min="min" :max="max"></quasar-numeric>
+      <q-numeric v-model="number" :min="min" :max="max"></q-numeric>
 
       <p class="caption">Disabled State</p>
-      <quasar-numeric v-model="number" :min="min" :max="max" disable></quasar-numeric>
+      <q-numeric v-model="number" :min="min" :max="max" disable></q-numeric>
 
       <p class="caption">Readonly State</p>
-      <quasar-numeric v-model="number" :min="min" :max="max" readonly></quasar-numeric>
+      <q-numeric v-model="number" :min="min" :max="max" readonly></q-numeric>
 
       <p class="caption">Error State</p>
-      <quasar-numeric class="has-error" v-model="number" :min="min" :max="max"></quasar-numeric>
+      <q-numeric class="has-error" v-model="number" :min="min" :max="max"></q-numeric>
 
       <p class="caption">Inside of a List</p>
       <div class="list">
@@ -23,7 +23,7 @@
           <i class="item-primary">edit</i>
           <div class="item-content">
             <span class="item-label">Number: </span>
-            <quasar-numeric v-model="number" :min="min" :max="max"></quasar-numeric>
+            <q-numeric v-model="number" :min="min" :max="max"></q-numeric>
           </div>
         </div>
         <hr class="inset">
@@ -31,7 +31,7 @@
           <i class="item-primary">edit</i>
           <div class="item-content">
             <span class="item-label">Number: </span>
-            <quasar-numeric v-model="number" :min="min" :max="max"></quasar-numeric>
+            <q-numeric v-model="number" :min="min" :max="max"></q-numeric>
           </div>
         </div>
       </div>
diff --git a/dev/components/form/radio.vue b/dev/components/form/radio.vue
index 0462472ce25..948028042df 100644
--- a/dev/components/form/radio.vue
+++ b/dev/components/form/radio.vue
@@ -8,22 +8,22 @@
       <p class="caption">Standalone</p>
       <div class="column group">
         <label>
-          <quasar-radio v-model="option" val="opt1"></quasar-radio>
+          <q-radio v-model="option" val="opt1"></q-radio>
           Option 1
         </label>
         <label>
-          <quasar-radio v-model="option" val="opt2" class="teal"></quasar-radio>
+          <q-radio v-model="option" val="opt2" class="teal"></q-radio>
           Option 2
         </label>
         <label>
-          <quasar-radio v-model="option" val="opt3" class="orange"></quasar-radio>
+          <q-radio v-model="option" val="opt3" class="orange"></q-radio>
           Option 3
         </label>
       </div>
 
       <p class="caption">Disabled State</p>
       <label>
-        <quasar-radio v-model="option" val="opt1" disable></quasar-radio>
+        <q-radio v-model="option" val="opt1" disable></q-radio>
         Option 1
       </label>
 
@@ -31,7 +31,7 @@
       <div class="list">
         <label class="item">
           <div class="item-primary">
-            <quasar-radio v-model="option" val="opt1"></quasar-radio>
+            <q-radio v-model="option" val="opt1"></q-radio>
           </div>
           <div class="item-content">
             Option 1
@@ -39,7 +39,7 @@
         </label>
         <label class="item two-lines">
           <div class="item-primary">
-            <quasar-radio v-model="option" val="opt2"></quasar-radio>
+            <q-radio v-model="option" val="opt2"></q-radio>
           </div>
           <div class="item-content">
             <div>Option 2</div>
@@ -48,7 +48,7 @@
         </label>
         <label class="item three-lines">
           <div class="item-primary">
-            <quasar-radio v-model="option" val="opt3"></quasar-radio>
+            <q-radio v-model="option" val="opt3"></q-radio>
           </div>
           <div class="item-content">
             <div>Option 3</div>
diff --git a/dev/components/form/range.vue b/dev/components/form/range.vue
index c00f996a632..dd4717ff649 100644
--- a/dev/components/form/range.vue
+++ b/dev/components/form/range.vue
@@ -7,7 +7,7 @@
           Model <span class="right-detail"><em>{{standalone}}</em> &nbsp;&nbsp;(0 to 50)</span>
         </span>
       </p>
-      <quasar-range v-model="standalone" :min="0" :max="50"></quasar-range>
+      <q-range v-model="standalone" :min="0" :max="50"></q-range>
 
       <p class="caption">
         With Step
@@ -15,7 +15,7 @@
           Model <span class="right-detail"><em>{{step}}</em> &nbsp;&nbsp;(0 to 45, step 5)</span>
         </span>
       </p>
-      <quasar-range v-model="step" :min="0" :max="45" :step="5"></quasar-range>
+      <q-range v-model="step" :min="0" :max="45" :step="5"></q-range>
 
       <p class="caption">
         With Label
@@ -23,7 +23,7 @@
           Model <span class="right-detail"><em>{{label}}</em> &nbsp;&nbsp;(-20 to 20, step 4)</span>
         </span>
       </p>
-      <quasar-range v-model="label" :min="-20" :max="20" :step="4" label></quasar-range>
+      <q-range v-model="label" :min="-20" :max="20" :step="4" label></q-range>
 
       <p class="caption">
         Snaps to Steps
@@ -31,7 +31,7 @@
           Model <span class="right-detail"><em>{{snap}}</em> &nbsp;&nbsp;(0 to 10, step 2)</span>
         </span>
       </p>
-      <quasar-range v-model="snap" :min="0" :max="10" :step="2" label snap></quasar-range>
+      <q-range v-model="snap" :min="0" :max="10" :step="2" label snap></q-range>
 
       <p class="caption">
         With Markers. Snaps to Steps
@@ -39,7 +39,7 @@
           Model <span class="right-detail"><em>{{marker}}</em> &nbsp;&nbsp;(0 to 10, step 2)</span>
         </span>
       </p>
-      <quasar-range v-model="marker" :min="0" :max="10" :step="2" label snap markers></quasar-range>
+      <q-range v-model="marker" :min="0" :max="10" :step="2" label snap markers></q-range>
 
       <p class="caption">
         Display Label All the Time
@@ -47,37 +47,37 @@
           Model <span class="right-detail"><em>{{label}}</em> &nbsp;&nbsp;(-20 to 20, step 4)</span>
         </span>
       </p>
-      <quasar-range v-model="label" :min="-20" :max="20" :step="4" label-always></quasar-range>
+      <q-range v-model="label" :min="-20" :max="20" :step="4" label-always></q-range>
 
       <p class="caption">Disabled State</p>
-      <quasar-range v-model="standalone" :min="0" :max="50" disable></quasar-range>
+      <q-range v-model="standalone" :min="0" :max="50" disable></q-range>
 
       <p class="caption">Error State</p>
-      <quasar-range class="has-error" v-model="standalone" :min="0" :max="50"></quasar-range>
+      <q-range class="has-error" v-model="standalone" :min="0" :max="50"></q-range>
 
       <p class="caption">Coloring</p>
-      <quasar-range class="secondary" v-model="standalone" :min="0" :max="50" label></quasar-range>
-      <quasar-range class="orange" v-model="standalone" :min="0" :max="50" label></quasar-range>
-      <quasar-range class="dark" v-model="standalone" :min="0" :max="50" label></quasar-range>
+      <q-range class="secondary" v-model="standalone" :min="0" :max="50" label></q-range>
+      <q-range class="orange" v-model="standalone" :min="0" :max="50" label></q-range>
+      <q-range class="dark" v-model="standalone" :min="0" :max="50" label></q-range>
 
       <p class="caption">Inside of a List</p>
       <div class="list">
         <div class="item two-lines">
           <i class="item-primary">volume_up</i>
           <div class="item-content">
-            <quasar-range v-model="standalone" :min="0" :max="50" label></quasar-range>
+            <q-range v-model="standalone" :min="0" :max="50" label></q-range>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">brightness_medium</i>
           <div class="item-content">
-            <quasar-range v-model="standalone" :min="0" :max="50" label></quasar-range>
+            <q-range v-model="standalone" :min="0" :max="50" label></q-range>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">mic</i>
           <div class="item-content">
-            <quasar-range v-model="standalone" :min="0" :max="50" label></quasar-range>
+            <q-range v-model="standalone" :min="0" :max="50" label></q-range>
           </div>
         </div>
       </div>
diff --git a/dev/components/form/rating.vue b/dev/components/form/rating.vue
index f7c4e6f4d12..24967ee0896 100644
--- a/dev/components/form/rating.vue
+++ b/dev/components/form/rating.vue
@@ -6,14 +6,14 @@
       </div>
 
       <div style="font-size: 2rem; margin-top: 20px;">
-        <quasar-rating v-model="ratingModel" :max="3"></quasar-rating>
-        <quasar-rating class="primary" v-model="ratingModel" :max="5" icon="pets"></quasar-rating>
-        <quasar-rating class="orange" v-model="ratingModel" :max="9" icon="thumb_up"></quasar-rating>
-        <quasar-rating style="font-size: 3rem" class="teal" v-model="ratingModel" :max="6" icon="home"></quasar-rating>
+        <q-rating v-model="ratingModel" :max="3"></q-rating>
+        <q-rating class="primary" v-model="ratingModel" :max="5" icon="pets"></q-rating>
+        <q-rating class="orange" v-model="ratingModel" :max="9" icon="thumb_up"></q-rating>
+        <q-rating style="font-size: 3rem" class="teal" v-model="ratingModel" :max="6" icon="home"></q-rating>
       </div>
 
       <p class="caption">Disabled State</p>
-      <quasar-rating style="font-size: 2rem" class="primary" v-model="ratingModel" :max="6" icon="create" disable></quasar-rating>
+      <q-rating style="font-size: 2rem" class="primary" v-model="ratingModel" :max="6" icon="create" disable></q-rating>
     </div>
   </div>
 </template>
diff --git a/dev/components/form/search.vue b/dev/components/form/search.vue
index f644a9e76bb..f7c97035b43 100644
--- a/dev/components/form/search.vue
+++ b/dev/components/form/search.vue
@@ -7,20 +7,20 @@
 
       <br><br>
 
-      <quasar-search v-model="search"></quasar-search>
-      <quasar-search v-model="search" class="orange"></quasar-search>
-      <quasar-search v-model="search" class="secondary" icon="explore" placeholder="PlacesPlacesPlacesPlacesPlacesPlacesPlaces"></quasar-search>
-      <quasar-search v-model="search" class="primary" icon="local_airport" placeholder="Airports"></quasar-search>
-      <quasar-search v-model="search" class="dark" icon="local_hotel" placeholder="Hotels"></quasar-search>
+      <q-search v-model="search"></q-search>
+      <q-search v-model="search" class="orange"></q-search>
+      <q-search v-model="search" class="secondary" icon="explore" placeholder="PlacesPlacesPlacesPlacesPlacesPlacesPlaces"></q-search>
+      <q-search v-model="search" class="primary" icon="local_airport" placeholder="Airports"></q-search>
+      <q-search v-model="search" class="dark" icon="local_hotel" placeholder="Hotels"></q-search>
 
       <p class="caption">Disabled State</p>
-      <quasar-search v-model="search" class="primary" disable></quasar-search>
+      <q-search v-model="search" class="primary" disable></q-search>
 
       <p class="caption">Readonly State</p>
-      <quasar-search v-model="search" class="primary" readonly></quasar-search>
+      <q-search v-model="search" class="primary" readonly></q-search>
 
       <p class="caption">Error State</p>
-      <quasar-search v-model="search" class="primary has-error"></quasar-search>
+      <q-search v-model="search" class="primary has-error"></q-search>
     </div>
   </div>
 </template>
diff --git a/dev/components/form/select.vue b/dev/components/form/select.vue
index 0388a37bc0a..96a189af66f 100644
--- a/dev/components/form/select.vue
+++ b/dev/components/form/select.vue
@@ -2,26 +2,26 @@
   <div>
     <div class="layout-padding">
       <p class="caption">With Radios</p>
-      <quasar-select type="radio" v-model="select" :options="selectOptions"></quasar-select>
+      <q-select type="radio" v-model="select" :options="selectOptions"></q-select>
       <p class="caption">With Checkboxes</p>
-      <quasar-select type="checkbox" v-model="multipleSelect" :options="selectOptions"></quasar-select>
+      <q-select type="checkbox" v-model="multipleSelect" :options="selectOptions"></q-select>
       <p class="caption">With Toggles</p>
-      <quasar-select type="toggle" v-model="multipleSelect" :options="selectOptions"></quasar-select>
+      <q-select type="toggle" v-model="multipleSelect" :options="selectOptions"></q-select>
 
       <p class="caption">With Label</p>
-      <quasar-select type="checkbox" v-model="multipleSelect" :options="selectOptions" label="Pick Company"></quasar-select>
+      <q-select type="checkbox" v-model="multipleSelect" :options="selectOptions" label="Pick Company"></q-select>
 
       <p class="caption">With Placeholder</p>
-      <quasar-select type="checkbox" v-model="multipleSelect" :options="selectOptions" placeholder="Pick Company"></quasar-select>
+      <q-select type="checkbox" v-model="multipleSelect" :options="selectOptions" placeholder="Pick Company"></q-select>
 
       <p class="caption">Disabled State</p>
-      <quasar-select disable type="radio" v-model="select" :options="selectOptions"></quasar-select>
+      <q-select disable type="radio" v-model="select" :options="selectOptions"></q-select>
 
       <p class="caption">Readonly State</p>
-      <quasar-select readonly type="radio" v-model="select" :options="selectOptions"></quasar-select>
+      <q-select readonly type="radio" v-model="select" :options="selectOptions"></q-select>
 
       <p class="caption">Error State</p>
-      <quasar-select class="has-error" type="radio" v-model="select" :options="selectOptions"></quasar-select>
+      <q-select class="has-error" type="radio" v-model="select" :options="selectOptions"></q-select>
 
       <p class="caption">Inside of a List</p>
       <div class="list">
@@ -29,12 +29,12 @@
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
           <div class="item-content">
-            <quasar-select
+            <q-select
               class="full-width"
               type="radio"
               v-model="select"
               :options="selectOptions"
-            ></quasar-select>
+            ></q-select>
           </div>
         </div>
         <hr>
@@ -42,23 +42,23 @@
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
           <div class="item-content">
-            <quasar-select
+            <q-select
               class="full-width"
               type="checkbox"
               v-model="multipleSelect"
               :options="selectOptions"
-            ></quasar-select>
+            ></q-select>
           </div>
         </div>
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
           <div class="item-content">
-            <quasar-select
+            <q-select
               class="full-width"
               type="toggle"
               v-model="multipleSelect"
               :options="selectOptions"
-            ></quasar-select>
+            ></q-select>
           </div>
         </div>
       </div>
diff --git a/dev/components/form/toggle.vue b/dev/components/form/toggle.vue
index 86a685122b8..5a8356b3eb0 100644
--- a/dev/components/form/toggle.vue
+++ b/dev/components/form/toggle.vue
@@ -8,22 +8,22 @@
       <p class="caption">Standalone</p>
       <div class="column group">
         <label>
-          <quasar-toggle v-model="checked"></quasar-toggle>
+          <q-toggle v-model="checked"></q-toggle>
           Toggle Label
         </label>
 
         <label>
-          <quasar-toggle v-model="checked" class="orange"></quasar-toggle>
+          <q-toggle v-model="checked" class="orange"></q-toggle>
           Toggle Label
         </label>
 
         <label>
-          <quasar-toggle v-model="checked" class="teal"></quasar-toggle>
+          <q-toggle v-model="checked" class="teal"></q-toggle>
           Toggle Label
         </label>
 
         <label>
-          <quasar-toggle v-model="checked" class="dark"></quasar-toggle>
+          <q-toggle v-model="checked" class="dark"></q-toggle>
           Toggle Label
         </label>
       </div>
@@ -31,18 +31,18 @@
       <p class="caption">With Icon</p>
       <div class="column group">
         <label>
-          <quasar-toggle v-model="checked" icon="alarm"></quasar-toggle>
+          <q-toggle v-model="checked" icon="alarm"></q-toggle>
           Toggle Label
         </label>
         <label>
-          <quasar-toggle v-model="checked" icon="mail" class="secondary"></quasar-toggle>
+          <q-toggle v-model="checked" icon="mail" class="secondary"></q-toggle>
           Toggle Label
         </label>
       </div>
 
       <p class="caption">Disabled State</p>
       <label>
-        <quasar-toggle v-model="checked" disable></quasar-toggle>
+        <q-toggle v-model="checked" disable></q-toggle>
         Toggle Label
       </label>
 
@@ -53,7 +53,7 @@
             Events and reminders
           </div>
           <div class="item-secondary">
-            <quasar-toggle v-model="checked"></quasar-toggle>
+            <q-toggle v-model="checked"></q-toggle>
           </div>
         </label>
         <label class="item two-lines">
@@ -62,7 +62,7 @@
             <div>Lorem ipsum</div>
           </div>
           <div class="item-secondary">
-            <quasar-toggle v-model="checked" class="purple"></quasar-toggle>
+            <q-toggle v-model="checked" class="purple"></q-toggle>
           </div>
         </label>
         <label class="item three-lines">
@@ -71,7 +71,7 @@
             <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
           </div>
           <div class="item-secondary">
-            <quasar-toggle v-model="checked" class="red"></quasar-toggle>
+            <q-toggle v-model="checked" class="red"></q-toggle>
           </div>
         </label>
       </div>
diff --git a/dev/components/other/app-visibility.vue b/dev/components/other/app-visibility.vue
index 629e9bc3723..02628b8820d 100644
--- a/dev/components/other/app-visibility.vue
+++ b/dev/components/other/app-visibility.vue
@@ -12,7 +12,7 @@
         then come back here to see Visibility in action.
       </p>
 
-      <table class="quasar-table striped" v-if="eventList.length > 0">
+      <table class="q-table striped" v-if="eventList.length > 0">
         <tbody>
           <tr v-for="evt in eventList" :key="evt.timestamp">
             <td>{{ evt.timestamp }}</td>
diff --git a/dev/components/other/platform-detection.vue b/dev/components/other/platform-detection.vue
index c37c689e147..75583c2e032 100644
--- a/dev/components/other/platform-detection.vue
+++ b/dev/components/other/platform-detection.vue
@@ -5,7 +5,7 @@
         Based on the device you are using to view this, Quasar detects the following:
       </p>
 
-      <table class="quasar-table striped">
+      <table class="q-table striped">
         <thead>
           <tr>
             <th class="text-left">Property</th>
diff --git a/dev/components/other/vue-transitions.vue b/dev/components/other/vue-transitions.vue
index 64ff73d01ac..de67be68b16 100644
--- a/dev/components/other/vue-transitions.vue
+++ b/dev/components/other/vue-transitions.vue
@@ -10,19 +10,19 @@
       </p>
       <p>
         <label>
-          <quasar-toggle v-model="visible"></quasar-toggle>
+          <q-toggle v-model="visible"></q-toggle>
           Visible image
         </label>
       </p>
 
-      <quasar-transition name="slide">
+      <q-transition name="slide">
         <p v-show="visible">
           <img
             class="responsive"
             src="~assets/quasar.jpg"
           >
         </p>
-      </quasar-transition>
+      </q-transition>
     </div>
   </div>
 </template>
diff --git a/dev/components/test-layout/layout.vue b/dev/components/test-layout/layout.vue
index 067ab484d88..f2e1c01c8ba 100644
--- a/dev/components/test-layout/layout.vue
+++ b/dev/components/test-layout/layout.vue
@@ -1,77 +1,77 @@
 <template>
-  <quasar-layout>
+  <q-layout>
     <div slot="header" class="toolbar">
       <button class="hide-on-drawer-visible" @click="$refs.leftDrawer.open()">
         <i>menu</i>
       </button>
-      <quasar-toolbar-title :padding="1">
+      <q-toolbar-title :padding="1">
         Quasar Layout
-      </quasar-toolbar-title>
+      </q-toolbar-title>
       <button @click="$refs.rightDrawer.open()">
         <i>assignment</i>
       </button>
     </div>
 
     <div slot="header" class="toolbar primary">
-      <quasar-search :model.sync="search" class="primary"></quasar-search>
+      <q-search :model.sync="search" class="primary"></q-search>
     </div>
 
-    <quasar-tabs slot="navigation">
-      <quasar-tab icon="view_quilt" route="/test-layout/about" exact replace>About</quasar-tab>
-      <quasar-tab icon="view_day" route="/test-layout/toolbar" replace>Toolbar</quasar-tab>
-      <quasar-tab icon="view_day" route="/test-layout/tabs" replace>Tabs</quasar-tab>
-      <quasar-tab icon="input" route="/test-layout/drawer" replace>Drawer</quasar-tab>
-    </quasar-tabs>
+    <q-tabs slot="navigation">
+      <q-tab icon="view_quilt" route="/test-layout/about" exact replace>About</q-tab>
+      <q-tab icon="view_day" route="/test-layout/toolbar" replace>Toolbar</q-tab>
+      <q-tab icon="view_day" route="/test-layout/tabs" replace>Tabs</q-tab>
+      <q-tab icon="input" route="/test-layout/drawer" replace>Drawer</q-tab>
+    </q-tabs>
 
-    <quasar-drawer ref="leftDrawer">
+    <q-drawer ref="leftDrawer">
       <div class="toolbar light">
-        <quasar-toolbar-title :padding="1">
+        <q-toolbar-title :padding="1">
             Drawer
-        </quasar-toolbar-title>
+        </q-toolbar-title>
       </div>
 
       <div class="list no-border platform-delimiter">
-        <quasar-drawer-link icon="view_quilt" route="/test-layout/about">
+        <q-drawer-link icon="view_quilt" route="/test-layout/about">
           About Layout
-        </quasar-drawer-link>
+        </q-drawer-link>
         <hr>
         <div class="list-label">Layout Components</div>
-        <quasar-drawer-link icon="build" route="/test-layout/toolbar">
+        <q-drawer-link icon="build" route="/test-layout/toolbar">
           Toolbar
-        </quasar-drawer-link>
-        <quasar-drawer-link icon="tab" route="/test-layout/tabs">
+        </q-drawer-link>
+        <q-drawer-link icon="tab" route="/test-layout/tabs">
           Tabs
-        </quasar-drawer-link>
-        <quasar-drawer-link icon="compare_arrows" route="/test-layout/drawer">
+        </q-drawer-link>
+        <q-drawer-link icon="compare_arrows" route="/test-layout/drawer">
           Layout Drawer
-        </quasar-drawer-link>
+        </q-drawer-link>
       </div>
-    </quasar-drawer>
+    </q-drawer>
 
     <router-view class="layout-view"></router-view>
 
-    <quasar-drawer right-side swipe-only ref="rightDrawer">
+    <q-drawer right-side swipe-only ref="rightDrawer">
       <div class="toolbar light">
-        <quasar-toolbar-title :padding="1">
+        <q-toolbar-title :padding="1">
             Right-side Drawer
-        </quasar-toolbar-title>
+        </q-toolbar-title>
       </div>
 
       <p style="padding: 25px;" class="text-grey-7">
         This is yet another Drawer that does not gets displayed alongside content on
         bigger screens.
       </p>
-    </quasar-drawer>
+    </q-drawer>
 
     <div slot="footer" class="toolbar">
-      <quasar-toolbar-title :padding="0">
+      <q-toolbar-title :padding="0">
         <router-link tag="button" to="/">
           <i class="on-left">keyboard_arrow_left</i>
           Back to Index
         </router-link>
-      </quasar-toolbar-title>
+      </q-toolbar-title>
     </div>
-  </quasar-layout>
+  </q-layout>
 </template>
 
 <script>
diff --git a/dev/components/test-layout/tabs.vue b/dev/components/test-layout/tabs.vue
index eb9bffa6b5f..827cf7f477e 100644
--- a/dev/components/test-layout/tabs.vue
+++ b/dev/components/test-layout/tabs.vue
@@ -13,67 +13,67 @@
         tabs to navigation routes.
       </p>
 
-      <quasar-tabs>
-        <quasar-tab icon="mail">Mails</quasar-tab>
-        <quasar-tab icon="alarm">Alarms</quasar-tab>
-        <quasar-tab icon="movie">Movies</quasar-tab>
-        <quasar-tab icon="mail">Mails</quasar-tab>
-        <quasar-tab icon="alarm">Alarms</quasar-tab>
-        <quasar-tab icon="movie">Movies</quasar-tab>
-        <quasar-tab icon="mail">Mails</quasar-tab>
-        <quasar-tab icon="alarm">Alarms</quasar-tab>
-        <quasar-tab icon="movie">Movies</quasar-tab>
-        <quasar-tab icon="mail">Mails</quasar-tab>
-        <quasar-tab icon="alarm">Alarms</quasar-tab>
-        <quasar-tab icon="movie">Movies</quasar-tab>
-        <quasar-tab icon="mail">Mails</quasar-tab>
-        <quasar-tab icon="alarm">Alarms</quasar-tab>
-        <quasar-tab icon="movie">Movies</quasar-tab>
-        <quasar-tab icon="mail">Mails</quasar-tab>
-        <quasar-tab icon="alarm">Alarms</quasar-tab>
-        <quasar-tab icon="movie">Movies</quasar-tab>
-      </quasar-tabs>
+      <q-tabs>
+        <q-tab icon="mail">Mails</q-tab>
+        <q-tab icon="alarm">Alarms</q-tab>
+        <q-tab icon="movie">Movies</q-tab>
+        <q-tab icon="mail">Mails</q-tab>
+        <q-tab icon="alarm">Alarms</q-tab>
+        <q-tab icon="movie">Movies</q-tab>
+        <q-tab icon="mail">Mails</q-tab>
+        <q-tab icon="alarm">Alarms</q-tab>
+        <q-tab icon="movie">Movies</q-tab>
+        <q-tab icon="mail">Mails</q-tab>
+        <q-tab icon="alarm">Alarms</q-tab>
+        <q-tab icon="movie">Movies</q-tab>
+        <q-tab icon="mail">Mails</q-tab>
+        <q-tab icon="alarm">Alarms</q-tab>
+        <q-tab icon="movie">Movies</q-tab>
+        <q-tab icon="mail">Mails</q-tab>
+        <q-tab icon="alarm">Alarms</q-tab>
+        <q-tab icon="movie">Movies</q-tab>
+      </q-tabs>
 
       <p class="caption">
         They come in all colors.
       </p>
       <div class="group">
-        <quasar-tabs class="primary">
-          <quasar-tab icon="mail">Mails</quasar-tab>
-          <quasar-tab icon="alarm">Alarms</quasar-tab>
-          <quasar-tab icon="movie">Movies</quasar-tab>
-        </quasar-tabs>
-        <quasar-tabs class="amber clear">
-          <quasar-tab icon="mail">Mails</quasar-tab>
-          <quasar-tab icon="alarm">Alarms</quasar-tab>
-          <quasar-tab icon="movie">Movies</quasar-tab>
-        </quasar-tabs>
-        <quasar-tabs class="secondary">
-          <quasar-tab icon="mail">Mails</quasar-tab>
-          <quasar-tab icon="alarm">Alarms</quasar-tab>
-          <quasar-tab icon="movie">Movies</quasar-tab>
-        </quasar-tabs>
+        <q-tabs class="primary">
+          <q-tab icon="mail">Mails</q-tab>
+          <q-tab icon="alarm">Alarms</q-tab>
+          <q-tab icon="movie">Movies</q-tab>
+        </q-tabs>
+        <q-tabs class="amber clear">
+          <q-tab icon="mail">Mails</q-tab>
+          <q-tab icon="alarm">Alarms</q-tab>
+          <q-tab icon="movie">Movies</q-tab>
+        </q-tabs>
+        <q-tabs class="secondary">
+          <q-tab icon="mail">Mails</q-tab>
+          <q-tab icon="alarm">Alarms</q-tab>
+          <q-tab icon="movie">Movies</q-tab>
+        </q-tabs>
       </div>
 
       <p class="caption">
         And also "inverted".
       </p>
       <div class="group">
-        <quasar-tabs class="orange inverted">
-          <quasar-tab icon="mail">Mails</quasar-tab>
-          <quasar-tab icon="alarm">Alarms</quasar-tab>
-          <quasar-tab icon="movie">Movies</quasar-tab>
-        </quasar-tabs>
-        <quasar-tabs class="secondary inverted">
-          <quasar-tab icon="mail">Mails</quasar-tab>
-          <quasar-tab icon="alarm">Alarms</quasar-tab>
-          <quasar-tab icon="movie">Movies</quasar-tab>
-        </quasar-tabs>
-        <quasar-tabs class="dark inverted">
-          <quasar-tab icon="mail">Mails</quasar-tab>
-          <quasar-tab icon="alarm">Alarms</quasar-tab>
-          <quasar-tab icon="movie">Movies</quasar-tab>
-        </quasar-tabs>
+        <q-tabs class="orange inverted">
+          <q-tab icon="mail">Mails</q-tab>
+          <q-tab icon="alarm">Alarms</q-tab>
+          <q-tab icon="movie">Movies</q-tab>
+        </q-tabs>
+        <q-tabs class="secondary inverted">
+          <q-tab icon="mail">Mails</q-tab>
+          <q-tab icon="alarm">Alarms</q-tab>
+          <q-tab icon="movie">Movies</q-tab>
+        </q-tabs>
+        <q-tabs class="dark inverted">
+          <q-tab icon="mail">Mails</q-tab>
+          <q-tab icon="alarm">Alarms</q-tab>
+          <q-tab icon="movie">Movies</q-tab>
+        </q-tabs>
       </div>
 
       <p class="caption">
@@ -83,18 +83,18 @@
       </p>
 
       <div class="shadow-1">
-        <quasar-tabs
+        <q-tabs
           :refs="$refs"
           default-tab="tab-4"
           class="primary shadow-1"
           style="padding-top: 5px"
         >
-          <quasar-tab name="tab-1" icon="message">Tab 1</quasar-tab>
-          <quasar-tab name="tab-2" disable icon="fingerprint">Tab 2</quasar-tab>
-          <quasar-tab name="tab-3" icon="alarm">Tab 3</quasar-tab>
-          <quasar-tab name="tab-4" icon="accessibility">Tab 4</quasar-tab>
-          <quasar-tab name="tab-5" hidden icon="accessibility">Tab 5</quasar-tab>
-        </quasar-tabs>
+          <q-tab name="tab-1" icon="message">Tab 1</q-tab>
+          <q-tab name="tab-2" disable icon="fingerprint">Tab 2</q-tab>
+          <q-tab name="tab-3" icon="alarm">Tab 3</q-tab>
+          <q-tab name="tab-4" icon="accessibility">Tab 4</q-tab>
+          <q-tab name="tab-5" hidden icon="accessibility">Tab 5</q-tab>
+        </q-tabs>
 
         <div style="padding: 15px;">
           <div ref="tab-1">
@@ -117,21 +117,21 @@
 
       <br><br>
       <div class="shadow-1">
-        <quasar-tabs
+        <q-tabs
           :refs="$refs"
           v-model="xTabsModel"
           class="orange shadow-1"
           style="padding-top: 5px"
         >
-          <quasar-tab name="xtab-1" icon="message">Tab 1</quasar-tab>
-          <quasar-tab name="xtab-2" icon="alarm">Tab 2</quasar-tab>
-          <quasar-tab name="xtab-3" icon="accessibility">Tab 3</quasar-tab>
-        </quasar-tabs>
+          <q-tab name="xtab-1" icon="message">Tab 1</q-tab>
+          <q-tab name="xtab-2" icon="alarm">Tab 2</q-tab>
+          <q-tab name="xtab-3" icon="accessibility">Tab 3</q-tab>
+        </q-tabs>
 
         <div style="padding: 15px;">
           <div class="flex items-baseline">
             <div style="margin-right: 10px">Programmatic select tab:</div>
-            <quasar-select type="radio" v-model="xTabsModel" :options="xTabsOptions"></quasar-select>
+            <q-select type="radio" v-model="xTabsModel" :options="xTabsOptions"></q-select>
           </div>
 
           <div ref="xtab-1">
diff --git a/dev/components/test-layout/toolbar.vue b/dev/components/test-layout/toolbar.vue
index b2dbc32589c..61e9978db7b 100644
--- a/dev/components/test-layout/toolbar.vue
+++ b/dev/components/test-layout/toolbar.vue
@@ -10,9 +10,9 @@
         <button class="left-drawer-opener">
           <i>menu</i>
         </button>
-        <quasar-toolbar-title :padding="1">
+        <q-toolbar-title :padding="1">
           Toolbar
-        </quasar-toolbar-title>
+        </q-toolbar-title>
         <button class="right-drawer-opener">
           <i>more_vert</i>
         </button>
@@ -24,17 +24,17 @@
 
       <div class="toolbar secondary">
         <button><i>assignment_ind</i></button>
-        <quasar-toolbar-title :padding="2">
+        <q-toolbar-title :padding="2">
           Toolbar
-        </quasar-toolbar-title>
+        </q-toolbar-title>
         <button><i>sim_card</i></button>
         <button><i>gamepad</i></button>
       </div>
       <div class="toolbar orange">
         <button><i>mail</i></button>
-        <quasar-toolbar-title :padding="3">
+        <q-toolbar-title :padding="3">
           Long title for Toolbar. Very very very very very very long title.
-        </quasar-toolbar-title>
+        </q-toolbar-title>
         <button><i>alarm</i></button>
         <button><i>router</i></button>
         <button><i>keyboard</i></button>
@@ -42,9 +42,9 @@
       <div class="toolbar dark">
         <button><i>menu</i></button>
         <button><i>security</i></button>
-        <quasar-toolbar-title :padding="2">
+        <q-toolbar-title :padding="2">
           Toolbar
-        </quasar-toolbar-title>
+        </q-toolbar-title>
         <button><i>headset</i></button>
         <button><i>tv</i></button>
       </div>
@@ -54,25 +54,25 @@
       </p>
       <div class="toolbar purple inverted">
         <button><i>menu</i></button>
-        <quasar-toolbar-title :padding="2">
+        <q-toolbar-title :padding="2">
           Toolbar
-        </quasar-toolbar-title>
+        </q-toolbar-title>
         <button><i>supervisor_account</i></button>
         <button><i>more_vert</i></button>
       </div>
       <div class="toolbar amber inverted">
         <button><i>menu</i></button>
-        <quasar-toolbar-title :padding="2">
+        <q-toolbar-title :padding="2">
           Toolbar
-        </quasar-toolbar-title>
+        </q-toolbar-title>
         <button><i>supervisor_account</i></button>
         <button><i>more_vert</i></button>
       </div>
       <div class="toolbar red inverted">
         <button><i>menu</i></button>
-        <quasar-toolbar-title :padding="2">
+        <q-toolbar-title :padding="2">
           Toolbar
-        </quasar-toolbar-title>
+        </q-toolbar-title>
         <button><i>supervisor_account</i></button>
         <button><i>more_vert</i></button>
       </div>
diff --git a/dev/components/web-tests/fast-test.vue b/dev/components/web-tests/fast-test.vue
index 7eac81f9232..7b002d36e59 100644
--- a/dev/components/web-tests/fast-test.vue
+++ b/dev/components/web-tests/fast-test.vue
@@ -14,8 +14,7 @@
 <script>
 export default {
   data () {
-    return {
-    }
+    return {}
   }
 }
 </script>
diff --git a/dev/index.html b/dev/index.html
index e5770c0aab4..9672082c102 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -10,7 +10,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="statics/favicon.ico">
   </head>
   <body>
-    <div id="quasar-app"></div>
+    <div id="q-app"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/dev/main.js b/dev/main.js
index f2f92735fb4..010c8f370d6 100644
--- a/dev/main.js
+++ b/dev/main.js
@@ -10,7 +10,7 @@ Vue.use(Quasar) // Install Quasar Framework
 Quasar.start(() => {
   /* eslint-disable no-new */
   new Vue({
-    el: '#quasar-app',
+    el: '#q-app',
     router,
     render: h => h(require('./App'))
   })
diff --git a/src/components/action-sheet/ActionSheet.vue b/src/components/action-sheet/ActionSheet.vue
index 82b8af0bb35..e09d5004ef3 100644
--- a/src/components/action-sheet/ActionSheet.vue
+++ b/src/components/action-sheet/ActionSheet.vue
@@ -1,9 +1,9 @@
 <template>
-  <quasar-modal
+  <q-modal
     ref="dialog"
     class="with-backdrop"
     position-classes="items-end justify-center"
-    transition="quasar-modal-actions"
+    transition="q-modal-actions"
     :content-css="css"
   >
     <!-- Material -->
@@ -11,7 +11,7 @@
       <div v-if="title" class="modal-header" v-html="title"></div>
 
       <div class="modal-scroll">
-        <div v-if="gallery" class="quasar-action-sheet-gallery row wrap items-center justify-center">
+        <div v-if="gallery" class="q-action-sheet-gallery row wrap items-center justify-center">
           <div
             v-for="button in actions"
             class="cursor-pointer column inline items-center justify-center"
@@ -56,11 +56,11 @@
 
     <!-- iOS -->
     <div v-once v-if="$quasar.theme === 'ios'">
-      <div class="quasar-action-sheet">
+      <div class="q-action-sheet">
         <div v-if="title" class="modal-header" v-html="title"></div>
 
         <div class="modal-scroll">
-          <div v-if="gallery" class="quasar-action-sheet-gallery row wrap items-center justify-center">
+          <div v-if="gallery" class="q-action-sheet-gallery row wrap items-center justify-center">
             <div
               v-for="button in actions"
               class="cursor-pointer column inline items-center justify-center"
@@ -90,7 +90,7 @@
         </div>
       </div>
 
-      <div v-if="dismiss" class="quasar-action-sheet">
+      <div v-if="dismiss" class="q-action-sheet">
         <div
           class="item item-link"
           @click="close(dismiss.handler)"
@@ -102,7 +102,7 @@
         </div>
       </div>
     </div>
-  </quasar-modal>
+  </q-modal>
 </template>
 
 <script>
diff --git a/src/components/action-sheet/action-sheet.ios.styl b/src/components/action-sheet/action-sheet.ios.styl
index 014d7f4b727..cd9f16b3d8b 100644
--- a/src/components/action-sheet/action-sheet.ios.styl
+++ b/src/components/action-sheet/action-sheet.ios.styl
@@ -6,7 +6,7 @@ $action-sheet-font-size        ?= 1.3rem
 $action-sheet-avatar-padding   ?= .6rem 1.1rem
 $action-sheet-hover-background ?= #d0d0d0
 
-.quasar-action-sheet-gallery
+.q-action-sheet-gallery
   > div
     padding $action-sheet-avatar-padding
     border-radius $generic-border-radius
@@ -20,7 +20,7 @@ $action-sheet-hover-background ?= #d0d0d0
     width 50px
     height 50px
 
-.quasar-action-sheet
+.q-action-sheet
   border-radius $action-sheet-border-radius
   background $action-sheet-background
   max-width $action-sheet-max-width
@@ -42,7 +42,7 @@ $action-sheet-hover-background ?= #d0d0d0
     &:not(:last-child)
       border-bottom 1px solid $grey-4
 
-.quasar-modal-actions-enter, .quasar-modal-actions-leave-active
+.q-modal-actions-enter, .q-modal-actions-leave-active
   opacity 0
   .modal-content
     transform translateY(101%)
diff --git a/src/components/action-sheet/action-sheet.mat.styl b/src/components/action-sheet/action-sheet.mat.styl
index b2ec4f1fc46..493a5a07fea 100644
--- a/src/components/action-sheet/action-sheet.mat.styl
+++ b/src/components/action-sheet/action-sheet.mat.styl
@@ -1,7 +1,7 @@
 $action-sheet-avatar-padding   ?= .6rem 1.2rem
 $action-sheet-hover-background ?= #d0d0d0
 
-.quasar-action-sheet-gallery
+.q-action-sheet-gallery
   > div
     padding $action-sheet-avatar-padding
     transition all .3s
@@ -14,7 +14,7 @@ $action-sheet-hover-background ?= #d0d0d0
     width 50px
     height 50px
 
-.quasar-modal-actions-enter, .quasar-modal-actions-leave-active
+.q-modal-actions-enter, .q-modal-actions-leave-active
   opacity 0
   .modal-content
     transform translateY(101%)
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index a80e8686874..279659e733d 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <quasar-modal class="minimized" ref="dialog">
+  <q-modal class="minimized" ref="dialog">
     <div class="modal-header" v-html="title || ''"></div>
     <div v-if="message" class="modal-body modal-scroll" v-html="message"></div>
 
@@ -19,24 +19,24 @@
 
         <div v-if="el.type === 'numeric'" style="margin-bottom: 10px">
           <label v-html="el.label"></label>
-          <quasar-numeric v-model="el.model" :min="el.min" :max="el.max" :step="el.step"></quasar-numeric>
+          <q-numeric v-model="el.model" :min="el.min" :max="el.max" :step="el.step"></q-numeric>
         </div>
 
         <div v-if="el.type === 'chips'" style="margin-bottom: 10px">
           <label v-html="el.label"></label>
-          <quasar-chips v-model="el.model"></quasar-chips>
+          <q-chips v-model="el.model"></q-chips>
         </div>
 
         <label v-if="el.type === 'radio'" v-for="radio in el.items" class="item">
           <div class="item-primary">
-            <quasar-radio v-model="el.model" :val="radio.value"></quasar-radio>
+            <q-radio v-model="el.model" :val="radio.value"></q-radio>
           </div>
           <div class="item-content" v-html="radio.label"></div>
         </label>
 
         <label v-if="el.type === 'checkbox'" v-for="checkbox in el.items" class="item">
           <div class="item-primary">
-            <quasar-checkbox v-model="checkbox.model"></quasar-checkbox>
+            <q-checkbox v-model="checkbox.model"></q-checkbox>
           </div>
           <div class="item-content" v-html="checkbox.label"></div>
         </label>
@@ -44,7 +44,7 @@
         <label v-if="el.type === 'toggle'" v-for="toggle in el.items" class="item">
           <div class="item-content has-secondary" v-html="toggle.label"></div>
           <div class="item-secondary">
-            <quasar-toggle v-model="toggle.model"></quasar-toggle>
+            <q-toggle v-model="toggle.model"></q-toggle>
           </div>
         </label>
 
@@ -52,7 +52,7 @@
         <div v-if="el.type === 'range' || el.type === 'double-range'" style="margin-top: 15px; margin-bottom: 10px">
           <label v-html="el.label + ' (' + (el.type === 'double-range' ? el.model.min + ' to ' + el.model.max : el.model) + ')'"></label>
           <component
-            :is="'quasar-' + el.type"
+            :is="'q-' + el.type"
             v-model="el.model"
             :min="el.min"
             :max="el.max"
@@ -66,16 +66,16 @@
 
         <div v-if="el.type === 'rating'" style="margin-bottom: 10px">
           <label v-html="el.label"></label>
-          <quasar-rating v-model="el.model" :max="el.max" :icon="el.icon" :style="{fontSize: el.size || '2rem'}"></quasar-rating>
+          <q-rating v-model="el.model" :max="el.max" :icon="el.icon" :style="{fontSize: el.size || '2rem'}"></q-rating>
         </div>
       </template>
     </div>
     <div v-if="progress" class="modal-body">
-      <quasar-progress
+      <q-progress
         :percentage="progress.model"
         class="primary stripe animate"
         :class="{indeterminate: progress.indeterminate}"
-      ></quasar-progress>
+      ></q-progress>
       <span v-if="!progress.indeterminate">
         {{progress.model}} %
       </span>
@@ -96,7 +96,7 @@
     <div class="modal-buttons row" v-if="!buttons && !nobuttons">
       <button class="primary clear" @click="close()">OK</button>
     </div>
-  </quasar-modal>
+  </q-modal>
 </template>
 
 <script>
diff --git a/src/components/loading/Loading.vue b/src/components/loading/Loading.vue
index 93cdf03d990..9f02542d3f8 100644
--- a/src/components/loading/Loading.vue
+++ b/src/components/loading/Loading.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="quasar-loading animate-fade fullscreen column items-center justify-center z-absolute">
+  <div class="q-loading animate-fade fullscreen column items-center justify-center z-absolute">
     <spinner :name="spinner" :color="spinnerColor" :size="spinnerSize"></spinner>
     <div
       v-if="message"
diff --git a/src/components/loading/loading.ios.styl b/src/components/loading/loading.ios.styl
index ebc1f2379c5..da4fa6922e3 100644
--- a/src/components/loading/loading.ios.styl
+++ b/src/components/loading/loading.ios.styl
@@ -3,7 +3,7 @@ $loading-background ?= $dimmed-background
 body.with-loading
   overflow hidden
 
-.quasar-loading
+.q-loading
   background $loading-background
   > div
     margin 40px 20px 0
diff --git a/src/components/loading/loading.mat.styl b/src/components/loading/loading.mat.styl
index ebc1f2379c5..da4fa6922e3 100644
--- a/src/components/loading/loading.mat.styl
+++ b/src/components/loading/loading.mat.styl
@@ -3,7 +3,7 @@ $loading-background ?= $dimmed-background
 body.with-loading
   overflow hidden
 
-.quasar-loading
+.q-loading
   background $loading-background
   > div
     margin 40px 20px 0
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 567ec813d39..5b5704e7225 100644
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="quasar-toast-container"
+    class="q-toast-container"
     :class="{active}"
   >
     <div
-      class="quasar-toast row no-wrap items-center non-selectable"
+      class="q-toast row no-wrap items-center non-selectable"
       v-if="stack[0]"
       :style="{color: stack[0].color, background: stack[0].bgColor}"
       :class="classes"
@@ -12,7 +12,7 @@
       <i v-if="stack[0].icon">{{ stack[0].icon }}</i>
       <img v-if="stack[0].image" :src="stack[0].image">
 
-      <div class="quasar-toast-message auto" v-html="stack[0].html"></div>
+      <div class="q-toast-message auto" v-html="stack[0].html"></div>
 
       <a
         v-if="stack[0].button && stack[0].button.label"
diff --git a/src/components/toast/toast.ios.styl b/src/components/toast/toast.ios.styl
index 343285cb3a3..daf3d6bb7b5 100644
--- a/src/components/toast/toast.ios.styl
+++ b/src/components/toast/toast.ios.styl
@@ -1,4 +1,4 @@
-.quasar-toast-container
+.q-toast-container
   pointer-events none
   position fixed
   left 0
@@ -14,7 +14,7 @@
   &.active
     transform translateY(0)
 
-.quasar-toast
+.q-toast
   pointer-events all
   padding 0 24px
   font-size .9rem
@@ -37,11 +37,11 @@
     i
       font-size 1.3rem
 
-.quasar-toast-message
+.q-toast-message
   padding 20px 0
 
 @media (min-width $layout-medium-min)
-  .quasar-toast
+  .q-toast
     font-size 1.1rem
     border-radius $generic-border-radius
     max-width $layout-medium-min
diff --git a/src/components/toast/toast.mat.styl b/src/components/toast/toast.mat.styl
index fa6d35e5d26..6a113428ccd 100644
--- a/src/components/toast/toast.mat.styl
+++ b/src/components/toast/toast.mat.styl
@@ -1,4 +1,4 @@
-.quasar-toast-container
+.q-toast-container
   pointer-events none
   position fixed
   left 0
@@ -11,7 +11,7 @@
   &.active
     transform translateY(0)
 
-.quasar-toast
+.q-toast
   pointer-events all
   padding 0 24px
   font-size .9rem
@@ -34,11 +34,11 @@
     i
       font-size 1.3rem
 
-.quasar-toast-message
+.q-toast-message
   padding 20px 0
 
 @media (min-width $layout-medium-min)
-  .quasar-toast
+  .q-toast
     font-size 1.1rem
     border-radius $generic-border-radius
     max-width $layout-medium-min
diff --git a/src/css-components/card/card.ios.styl b/src/css-components/card/card.ios.styl
index bc940d09ab4..d9be4513ba6 100644
--- a/src/css-components/card/card.ios.styl
+++ b/src/css-components/card/card.ios.styl
@@ -28,9 +28,9 @@ $card-padding-vertical   ?= 13px
     border 0
     border-top 1px solid rgb(224, 224, 224)
     border-bottom 1px solid rgb(224, 224, 224)
-    > .item:first-child, > .quasar-collapsible:first-child
+    > .item:first-child, > .q-collapsible:first-child
       margin-top 0
-    > .item:last-child, > .quasar-collapsible:last-child
+    > .item:last-child, > .q-collapsible:last-child
       margin-bottom 0
 
 .card-content
diff --git a/src/css-components/card/card.mat.styl b/src/css-components/card/card.mat.styl
index bc940d09ab4..d9be4513ba6 100644
--- a/src/css-components/card/card.mat.styl
+++ b/src/css-components/card/card.mat.styl
@@ -28,9 +28,9 @@ $card-padding-vertical   ?= 13px
     border 0
     border-top 1px solid rgb(224, 224, 224)
     border-bottom 1px solid rgb(224, 224, 224)
-    > .item:first-child, > .quasar-collapsible:first-child
+    > .item:first-child, > .q-collapsible:first-child
       margin-top 0
-    > .item:last-child, > .quasar-collapsible:last-child
+    > .item:last-child, > .q-collapsible:last-child
       margin-bottom 0
 
 .card-content
diff --git a/src/css-components/html-table/html-table.ios.styl b/src/css-components/html-table/html-table.ios.styl
index 96c402d3fa5..352db9c8885 100644
--- a/src/css-components/html-table/html-table.ios.styl
+++ b/src/css-components/html-table/html-table.ios.styl
@@ -3,7 +3,7 @@ $table-highlight-color ?= #f2f2f2
 $table-color           ?= $grey-8
 $table-border          ?= 1px solid rgba(0, 0, 0, .12)
 
-table.quasar-table
+table.q-table
   position relative
   border 0
   border-collapse collapse
@@ -67,7 +67,7 @@ table.quasar-table
     td
       padding 5px
 
-body.desktop table.quasar-table.highlight
+body.desktop table.q-table.highlight
   tbody tr, th
     transition all .28s ease-in
     &:hover
diff --git a/src/css-components/html-table/html-table.mat.styl b/src/css-components/html-table/html-table.mat.styl
index 58b177a43b1..f9058730a92 100644
--- a/src/css-components/html-table/html-table.mat.styl
+++ b/src/css-components/html-table/html-table.mat.styl
@@ -2,7 +2,7 @@ $table-stripe-color          ?= rgba(0, 0, 0, .07)
 $table-highlight-color       ?= rgba(0, 0, 0, .14)
 $table-border                ?= 1px solid rgba(0, 0, 0, .12)
 
-table.quasar-table
+table.q-table
   border-collapse collapse
   border-spacing 0
   empty-cells show
@@ -120,7 +120,7 @@ table.quasar-table
           border-left $table-border
           border-right $table-border
 
-body.desktop table.quasar-table.highlight tbody tr
+body.desktop table.q-table.highlight tbody tr
   transition all .28s ease-in
   &:hover
     background $table-highlight-color
diff --git a/src/css-components/list/list.ios.styl b/src/css-components/list/list.ios.styl
index e2d6dc84a9e..8b8f2e76b7c 100644
--- a/src/css-components/list/list.ios.styl
+++ b/src/css-components/list/list.ios.styl
@@ -107,7 +107,7 @@ $item-label-color             ?= rgba(0, 0, 0, .54)
   > * // @stylint ignore
     text-align left
 
-  &:not(.two-lines):not(.three-lines):not(.multiple-lines) > .item-content > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
+  &:not(.two-lines):not(.three-lines):not(.multiple-lines) > .item-content > div:not(.stacked-label):not(.floating-label):not([class^='q-'])
     overflow hidden
     text-overflow ellipsis
     white-space nowrap
@@ -127,12 +127,12 @@ $item-label-color             ?= rgba(0, 0, 0, .54)
       padding-bottom 16px
 
       &:not(.no-style)
-        > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
+        > div:not(.stacked-label):not(.floating-label):not([class^='q-'])
           overflow hidden
           text-overflow ellipsis
           white-space nowrap
 
-        > div:not(:first-of-type):not([class^='quasar-'])
+        > div:not(:first-of-type):not([class^='q-'])
           font-size 14px
           line-height 16px
           height 16px
@@ -152,14 +152,14 @@ $item-label-color             ?= rgba(0, 0, 0, .54)
       padding-bottom 16px
 
       &:not(.no-style)
-        > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
+        > div:not(.stacked-label):not(.floating-label):not([class^='q-'])
           overflow hidden
           text-overflow ellipsis
 
-        > div:first-of-type:not([class^='quasar-'])
+        > div:first-of-type:not([class^='q-'])
           white-space nowrap
 
-        > div:not(:first-of-type):not([class^='quasar-'])
+        > div:not(:first-of-type):not([class^='q-'])
           font-size 14px
           line-height 18px
           height 36px
@@ -183,9 +183,9 @@ $item-label-color             ?= rgba(0, 0, 0, .54)
     font-size 14px
 
 .item + .item,
-.item + .quasar-collapsible,
-.quasar-collapsible + .item,
-.quasar-collapsible + .quasar-collapsible
+.item + .q-collapsible,
+.q-collapsible + .item,
+.q-collapsible + .q-collapsible
   &.item-delimiter
     border-top 1px solid rgb(224, 224, 224)
   &.item-inset-delimiter
@@ -205,7 +205,7 @@ body.desktop .item.item-link:hover
   text-align left
   border 1px solid rgb(224, 224, 224)
 
-  > .item, > .quasar-collapsible
+  > .item, > .q-collapsible
     &:first-child
       margin-top 8px
     &:last-child
@@ -242,15 +242,15 @@ body.desktop .item.item-link:hover
 
   &.item-delimiter
     .item + .item,
-    .item + .quasar-collapsible,
-    .quasar-collapsible + .item,
-    .quasar-collapsible + .quasar-collapsible
+    .item + .q-collapsible,
+    .q-collapsible + .item,
+    .q-collapsible + .q-collapsible
       border-top 1px solid rgb(224, 224, 224)
   &.item-inset-delimiter
     .item + .item,
-    .item + .quasar-collapsible,
-    .quasar-collapsible + .item,
-    .quasar-collapsible + .quasar-collapsible
+    .item + .q-collapsible,
+    .q-collapsible + .item,
+    .q-collapsible + .q-collapsible
       &:after
         content ''
         position absolute
diff --git a/src/css-components/list/list.mat.styl b/src/css-components/list/list.mat.styl
index e2d6dc84a9e..8b8f2e76b7c 100644
--- a/src/css-components/list/list.mat.styl
+++ b/src/css-components/list/list.mat.styl
@@ -107,7 +107,7 @@ $item-label-color             ?= rgba(0, 0, 0, .54)
   > * // @stylint ignore
     text-align left
 
-  &:not(.two-lines):not(.three-lines):not(.multiple-lines) > .item-content > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
+  &:not(.two-lines):not(.three-lines):not(.multiple-lines) > .item-content > div:not(.stacked-label):not(.floating-label):not([class^='q-'])
     overflow hidden
     text-overflow ellipsis
     white-space nowrap
@@ -127,12 +127,12 @@ $item-label-color             ?= rgba(0, 0, 0, .54)
       padding-bottom 16px
 
       &:not(.no-style)
-        > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
+        > div:not(.stacked-label):not(.floating-label):not([class^='q-'])
           overflow hidden
           text-overflow ellipsis
           white-space nowrap
 
-        > div:not(:first-of-type):not([class^='quasar-'])
+        > div:not(:first-of-type):not([class^='q-'])
           font-size 14px
           line-height 16px
           height 16px
@@ -152,14 +152,14 @@ $item-label-color             ?= rgba(0, 0, 0, .54)
       padding-bottom 16px
 
       &:not(.no-style)
-        > div:not(.stacked-label):not(.floating-label):not([class^='quasar-'])
+        > div:not(.stacked-label):not(.floating-label):not([class^='q-'])
           overflow hidden
           text-overflow ellipsis
 
-        > div:first-of-type:not([class^='quasar-'])
+        > div:first-of-type:not([class^='q-'])
           white-space nowrap
 
-        > div:not(:first-of-type):not([class^='quasar-'])
+        > div:not(:first-of-type):not([class^='q-'])
           font-size 14px
           line-height 18px
           height 36px
@@ -183,9 +183,9 @@ $item-label-color             ?= rgba(0, 0, 0, .54)
     font-size 14px
 
 .item + .item,
-.item + .quasar-collapsible,
-.quasar-collapsible + .item,
-.quasar-collapsible + .quasar-collapsible
+.item + .q-collapsible,
+.q-collapsible + .item,
+.q-collapsible + .q-collapsible
   &.item-delimiter
     border-top 1px solid rgb(224, 224, 224)
   &.item-inset-delimiter
@@ -205,7 +205,7 @@ body.desktop .item.item-link:hover
   text-align left
   border 1px solid rgb(224, 224, 224)
 
-  > .item, > .quasar-collapsible
+  > .item, > .q-collapsible
     &:first-child
       margin-top 8px
     &:last-child
@@ -242,15 +242,15 @@ body.desktop .item.item-link:hover
 
   &.item-delimiter
     .item + .item,
-    .item + .quasar-collapsible,
-    .quasar-collapsible + .item,
-    .quasar-collapsible + .quasar-collapsible
+    .item + .q-collapsible,
+    .q-collapsible + .item,
+    .q-collapsible + .q-collapsible
       border-top 1px solid rgb(224, 224, 224)
   &.item-inset-delimiter
     .item + .item,
-    .item + .quasar-collapsible,
-    .quasar-collapsible + .item,
-    .quasar-collapsible + .quasar-collapsible
+    .item + .q-collapsible,
+    .q-collapsible + .item,
+    .q-collapsible + .q-collapsible
       &:after
         content ''
         position absolute
diff --git a/src/themes/core/normalize.styl b/src/themes/core/normalize.styl
index a805ae1998a..dd185708532 100644
--- a/src/themes/core/normalize.styl
+++ b/src/themes/core/normalize.styl
@@ -10,7 +10,7 @@
 html, body
   height 100%
   width 100%
-html, body, #quasar-app
+html, body, #q-app
   margin 0
   box-sizing border-box
 
diff --git a/src/themes/core/touch.styl b/src/themes/core/touch.styl
index 5318e344198..6d217669644 100644
--- a/src/themes/core/touch.styl
+++ b/src/themes/core/touch.styl
@@ -1,9 +1,9 @@
-.quasar-touch
+.q-touch
   user-select none
   user-drag none
   -khtml-user-drag none
   -webkit-user-drag none
-.quasar-touch-x
+.q-touch-x
   touch-action pan-x
-.quasar-touch-y
+.q-touch-y
   touch-action pan-y
diff --git a/src/themes/core/visibility.styl b/src/themes/core/visibility.styl
index 6c065a5180c..1b6651b8fcd 100644
--- a/src/themes/core/visibility.styl
+++ b/src/themes/core/visibility.styl
@@ -1,25 +1,25 @@
 .animate-spin
-  animation quasar-spin 2s infinite linear
+  animation q-spin 2s infinite linear
 .animate-blink
-  animation quasar-blink 1s steps(5, start) infinite
+  animation q-blink 1s steps(5, start) infinite
 .animate-pop
-  animation quasar-pop .2s
+  animation q-pop .2s
 .animate-scale
-  animation quasar-scale .2s
+  animation q-scale .2s
 .animate-fade
-  animation quasar-fade .2s
+  animation q-fade .2s
 
-@keyframes quasar-blink
+@keyframes q-blink
   to
     visibility hidden
 
-@keyframes quasar-spin
+@keyframes q-spin
   0%
     transform rotate(0deg)
   100%
     transform rotate(359deg)
 
-@keyframes quasar-pop
+@keyframes q-pop
   0%
     opacity 0
     transform scale(.7)
@@ -29,13 +29,13 @@
   100%
     transform scale(1)
 
-@keyframes quasar-fade
+@keyframes q-fade
   0%
     opacity 0
   100%
     opacity 1
 
-@keyframes quasar-scale
+@keyframes q-scale
   0%
     opacity 0
     transform scale(.7)
@@ -94,16 +94,16 @@ body
   z-index $z-absolute !important
 
 
-@keyframes quasar-highlight
+@keyframes q-highlight
   0%
     background $lime-6
   100%
     background transparent
 
 .highlight-and-fade
-  animation quasar-highlight 2s
+  animation q-highlight 2s
 
-@keyframes quasar-rotate
+@keyframes q-rotate
   0%
     transform rotate(0)
   25%
diff --git a/src/vue-components/checkbox/Checkbox.vue b/src/vue-components/checkbox/Checkbox.vue
index 033e6c9b76d..4c7d53dd6de 100644
--- a/src/vue-components/checkbox/Checkbox.vue
+++ b/src/vue-components/checkbox/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="quasar-checkbox" :class="{disabled: disable}">
+  <label class="q-checkbox" :class="{disabled: disable}">
     <input type="checkbox" v-model="model" :disabled="disable">
     <div></div>
   </label>
diff --git a/src/vue-components/checkbox/checkbox.ios.styl b/src/vue-components/checkbox/checkbox.ios.styl
index 788da292a81..05fc711ab17 100644
--- a/src/vue-components/checkbox/checkbox.ios.styl
+++ b/src/vue-components/checkbox/checkbox.ios.styl
@@ -8,7 +8,7 @@ $checkbox-tick-left       = ($checkbox-size / 6)
 $checkbox-tick-width      = (.26 * $checkbox-size)
 $checkbox-tick-height     = (.55 * $checkbox-size)
 
-.quasar-checkbox
+.q-checkbox
   display inline-block
   height ($checkbox-size + $checkbox-border-width)
   width ($checkbox-size + $checkbox-border-width)
diff --git a/src/vue-components/checkbox/checkbox.mat.styl b/src/vue-components/checkbox/checkbox.mat.styl
index 18848f5799e..9be6f9fb45a 100644
--- a/src/vue-components/checkbox/checkbox.mat.styl
+++ b/src/vue-components/checkbox/checkbox.mat.styl
@@ -8,7 +8,7 @@ $checkbox-tick-left       = ($checkbox-size / 6)
 $checkbox-tick-width      = (.26 * $checkbox-size)
 $checkbox-tick-height     = (.55 * $checkbox-size)
 
-.quasar-checkbox
+.q-checkbox
   display inline-block
   height $checkbox-size
   width $checkbox-size
diff --git a/src/vue-components/chips/Chips.vue b/src/vue-components/chips/Chips.vue
index 307970ca1c5..3721fd1cca6 100644
--- a/src/vue-components/chips/Chips.vue
+++ b/src/vue-components/chips/Chips.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="quasar-chips group textfield"
+    class="q-chips group textfield"
     @click="focus"
     :class="{active, disabled: disable, readonly}"
   >
@@ -12,7 +12,7 @@
       {{ label }}
       <i class="on-right" @click="remove(index)">close</i>
     </span>
-    <div class="quasar-chips-input chip label text-grey-9">
+    <div class="q-chips-input chip label text-grey-9">
       <input
         type="text"
         class="no-style"
diff --git a/src/vue-components/chips/chips.ios.styl b/src/vue-components/chips/chips.ios.styl
index 964eb260c45..30d1f8f9f2e 100644
--- a/src/vue-components/chips/chips.ios.styl
+++ b/src/vue-components/chips/chips.ios.styl
@@ -1,12 +1,12 @@
-.quasar-chips
+.q-chips
   min-height 45px
   padding-bottom 5px
   transition all .3s
   cursor text
   &.readonly
-    .quasar-chips-input, i
+    .q-chips-input, i
       display none
-  .quasar-chips-input
+  .q-chips-input
     display inline-block
     white-space nowrap
   input
diff --git a/src/vue-components/chips/chips.mat.styl b/src/vue-components/chips/chips.mat.styl
index 964eb260c45..30d1f8f9f2e 100644
--- a/src/vue-components/chips/chips.mat.styl
+++ b/src/vue-components/chips/chips.mat.styl
@@ -1,12 +1,12 @@
-.quasar-chips
+.q-chips
   min-height 45px
   padding-bottom 5px
   transition all .3s
   cursor text
   &.readonly
-    .quasar-chips-input, i
+    .q-chips-input, i
       display none
-  .quasar-chips-input
+  .q-chips-input
     display inline-block
     white-space nowrap
   input
diff --git a/src/vue-components/collapsible/Collapsible.vue b/src/vue-components/collapsible/Collapsible.vue
index 03610c86ecc..bed7dcbf289 100644
--- a/src/vue-components/collapsible/Collapsible.vue
+++ b/src/vue-components/collapsible/Collapsible.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="quasar-collapsible">
+  <div class="q-collapsible">
     <div class="item item-link non-selectable item-collapsible" @click="__toggleItem()">
       <i class="item-primary" v-if="icon" v-text="icon"></i>
       <img class="item-primary thumbnail" v-if="img" :src="img"></i>
@@ -9,11 +9,11 @@
       </div>
       <i class="item-secondary" :class="{'rotate-180': active}" @click.stop="toggle()">keyboard_arrow_down</i>
     </div>
-    <quasar-transition name="slide">
-      <div class="quasar-collapsible-sub-item" v-show="active">
+    <q-transition name="slide">
+      <div class="q-collapsible-sub-item" v-show="active">
         <slot></slot>
       </div>
-    </quasar-transition>
+    </q-transition>
   </div>
 </template>
 
diff --git a/src/vue-components/collapsible/collapsible.ios.styl b/src/vue-components/collapsible/collapsible.ios.styl
index 00256156831..009bba8ec1d 100644
--- a/src/vue-components/collapsible/collapsible.ios.styl
+++ b/src/vue-components/collapsible/collapsible.ios.styl
@@ -1,4 +1,4 @@
-.quasar-collapsible-sub-item
+.q-collapsible-sub-item
   padding 8px 8px 8px 18px
 
   .card
diff --git a/src/vue-components/collapsible/collapsible.mat.styl b/src/vue-components/collapsible/collapsible.mat.styl
index 76bdddd2f02..dea9b6f49b2 100644
--- a/src/vue-components/collapsible/collapsible.mat.styl
+++ b/src/vue-components/collapsible/collapsible.mat.styl
@@ -1,8 +1,8 @@
-.quasar-collapsible-sub-item
+.q-collapsible-sub-item
   padding 8px 8px 8px 18px
 
   .card
     margin-bottom 0
 
-.quasar-collapsible.router-link-active > .item
+.q-collapsible.router-link-active > .item
   @extend .item.router-link-active
diff --git a/src/vue-components/context-menu/ContextMenuDesktop.vue b/src/vue-components/context-menu/ContextMenuDesktop.vue
index 9adeecfce9a..d1977a84702 100644
--- a/src/vue-components/context-menu/ContextMenuDesktop.vue
+++ b/src/vue-components/context-menu/ContextMenuDesktop.vue
@@ -1,7 +1,7 @@
 <template>
-  <quasar-popover ref="popover" :anchor-click="false">
+  <q-popover ref="popover" :anchor-click="false">
     <slot></slot>
-  </quasar-popover>
+  </q-popover>
 </template>
 
 <script>
diff --git a/src/vue-components/context-menu/ContextMenuMobile.vue b/src/vue-components/context-menu/ContextMenuMobile.vue
index 44690b02cc9..e0b43e1c542 100644
--- a/src/vue-components/context-menu/ContextMenuMobile.vue
+++ b/src/vue-components/context-menu/ContextMenuMobile.vue
@@ -1,7 +1,7 @@
 <template>
-  <quasar-modal class="minimized" ref="dialog">
+  <q-modal class="minimized" ref="dialog">
     <slot></slot>
-  </quasar-modal>
+  </q-modal>
 </template>
 
 <script>
diff --git a/src/vue-components/datetime/Datetime.vue b/src/vue-components/datetime/Datetime.vue
index 4cee2205a08..8dc11449195 100644
--- a/src/vue-components/datetime/Datetime.vue
+++ b/src/vue-components/datetime/Datetime.vue
@@ -1,5 +1,5 @@
 <template>
-  <quasar-picker-textfield
+  <q-picker-textfield
     :disable="disable"
     :readonly="readonly"
     :label="label"
@@ -7,23 +7,23 @@
     :value="actualValue"
     @click.native="__open()"
   >
-    <quasar-popover
+    <q-popover
       v-if="desktop"
       ref="popup"
       @open="__setModel()"
       :disable="disable || readonly"
     >
-      <quasar-inline-datetime v-model="model" :type="type" :min="min" :max="max">
+      <q-inline-datetime v-model="model" :type="type" :min="min" :max="max">
         <div class="modal-buttons row full-width">
           <button v-if="!noClear" @click="clear()" class="primary clear" v-html="clearLabel"></button>
           <div class="auto"></div>
           <button @click="close()" class="primary clear" v-html="cancelLabel"></button>
           <button @click="close(__update)" class="primary clear" v-html="okLabel"></button>
         </div>
-      </quasar-inline-datetime>
-    </quasar-popover>
+      </q-inline-datetime>
+    </q-popover>
 
-    <quasar-modal
+    <q-modal
       v-else
       ref="popup"
       class="with-backdrop"
@@ -32,16 +32,16 @@
       :position-classes="position"
       :content-css="css"
     >
-      <quasar-inline-datetime v-model="model" :type="type" :min="min" :max="max" class="no-border full-width">
+      <q-inline-datetime v-model="model" :type="type" :min="min" :max="max" class="no-border full-width">
         <div class="modal-buttons row full-width">
           <button v-if="!noClear" @click="clear()" class="primary clear" v-html="clearLabel"></button>
           <div class="auto"></div>
           <button @click="close()" class="primary clear" v-html="cancelLabel"></button>
           <button @click="close(__update)" class="primary clear" v-html="okLabel"></button>
         </div>
-      </quasar-inline-datetime>
-    </quasar-modal>
-  </quasar-picker-textfield>
+      </q-inline-datetime>
+    </q-modal>
+  </q-picker-textfield>
 </template>
 
 <script>
@@ -103,7 +103,7 @@ export default {
     let data = Platform.is.desktop ? {} : {
       css: contentCSS[theme],
       position: theme === 'ios' ? 'items-end justify-center' : 'items-center justify-center',
-      transition: theme === 'ios' ? 'quasar-modal-actions' : 'quasar-modal',
+      transition: theme === 'ios' ? 'q-modal-actions' : 'q-modal',
       classNames: theme === 'ios' ? '' : 'minimized'
     }
     data.model = this.value || ''
diff --git a/src/vue-components/datetime/InlineDatetimeIOS.vue b/src/vue-components/datetime/InlineDatetimeIOS.vue
index 992edbd8443..f2d12cc057c 100644
--- a/src/vue-components/datetime/InlineDatetimeIOS.vue
+++ b/src/vue-components/datetime/InlineDatetimeIOS.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="quasar-datetime" :class="['type-' + type, disable ? 'disabled' : '', readonly ? 'readonly' : '']">
+  <div class="q-datetime" :class="['type-' + type, disable ? 'disabled' : '', readonly ? 'readonly' : '']">
     <slot></slot>
-    <div class="quasar-datetime-content non-selectable">
-      <div class="quasar-datetime-inner full-height flex justify-center">
+    <div class="q-datetime-content non-selectable">
+      <div class="q-datetime-inner full-height flex justify-center">
         <template v-if="typeHasDate">
           <div
-            class="quasar-datetime-col quasar-datetime-col-month"
+            class="q-datetime-col q-datetime-col-month"
             @touchstart="__dragStart($event, 'month')"
             @touchmove="__dragMove($event, 'month')"
             @touchend="__dragStop($event, 'month')"
           >
-            <div ref="month" class="quasar-datetime-col-wrapper" :style="__monthStyle">
+            <div ref="month" class="q-datetime-col-wrapper" :style="__monthStyle">
               <div
                 v-for="index in monthInterval"
-                class="quasar-datetime-item"
+                class="q-datetime-item"
                 @click="setMonth(index + monthMin)"
               >
                 {{ monthsList[index + monthMin - 1] }}
@@ -22,15 +22,15 @@
           </div>
 
           <div
-            class="quasar-datetime-col quasar-datetime-col-day"
+            class="q-datetime-col q-datetime-col-day"
             @touchstart="__dragStart($event, 'date')"
             @touchmove="__dragMove($event, 'date')"
             @touchend="__dragStop($event, 'date')"
           >
-            <div ref="date" class="quasar-datetime-col-wrapper" :style="__dayStyle">
+            <div ref="date" class="q-datetime-col-wrapper" :style="__dayStyle">
               <div
                 v-for="index in daysInterval"
-                class="quasar-datetime-item"
+                class="q-datetime-item"
                 @click="setDay(index + dayMin - 1)"
               >
                 {{ index + dayMin - 1 }}
@@ -39,15 +39,15 @@
           </div>
 
           <div
-            class="quasar-datetime-col quasar-datetime-col-year"
+            class="q-datetime-col q-datetime-col-year"
             @touchstart="__dragStart($event, 'year')"
             @touchmove="__dragMove($event, 'year')"
             @touchend="__dragStop($event, 'year')"
           >
-            <div ref="year" class="quasar-datetime-col-wrapper" :style="__yearStyle">
+            <div ref="year" class="q-datetime-col-wrapper" :style="__yearStyle">
               <div
                 v-for="n in yearInterval"
-                class="quasar-datetime-item"
+                class="q-datetime-item"
                 @click="setYear(n + yearMin)"
               >
                 {{ n + yearMin }}
@@ -58,15 +58,15 @@
 
         <template v-if="typeHasTime">
           <div
-            class="quasar-datetime-col quasar-datetime-col-hour"
+            class="q-datetime-col q-datetime-col-hour"
             @touchstart="__dragStart($event, 'hour')"
             @touchmove="__dragMove($event, 'hour')"
             @touchend="__dragStop($event, 'hour')"
           >
-            <div ref="hour" class="quasar-datetime-col-wrapper" :style="__hourStyle">
+            <div ref="hour" class="q-datetime-col-wrapper" :style="__hourStyle">
               <div
                 v-for="n in hourInterval"
-                class="quasar-datetime-item"
+                class="q-datetime-item"
                 @click="setHour(n + hourMin - 1)"
               >
                 {{ n + hourMin - 1 }}
@@ -74,22 +74,22 @@
             </div>
           </div>
 
-          <div class="quasar-datetime-col-divider">
-            <div class="quasar-datetime-col-wrapper full-height row items-center justify-center">
+          <div class="q-datetime-col-divider">
+            <div class="q-datetime-col-wrapper full-height row items-center justify-center">
               <div>:</div>
             </div>
           </div>
 
           <div
-            class="quasar-datetime-col quasar-datetime-col-minute"
+            class="q-datetime-col q-datetime-col-minute"
             @touchstart="__dragStart($event, 'minute')"
             @touchmove="__dragMove($event, 'minute')"
             @touchend="__dragStop($event, 'minute')"
           >
-            <div ref="minute" class="quasar-datetime-col-wrapper" :style="__minuteStyle">
+            <div ref="minute" class="q-datetime-col-wrapper" :style="__minuteStyle">
               <div
                 v-for="n in minuteInterval"
-                class="quasar-datetime-item"
+                class="q-datetime-item"
                 @click="setMinute(n + minuteMin - 1)"
               >
                 {{ __pad(n + minuteMin - 1) }}
@@ -99,22 +99,22 @@
         </template>
 
         <div
-          class="quasar-datetime-highlight row items-center justify-center"
-          :class="{'quasar-datetime-no-selection': !value}"
+          class="q-datetime-highlight row items-center justify-center"
+          :class="{'q-datetime-no-selection': !value}"
         >
           <template v-if="!value && typeHasDate">
-            <div class="quasar-datetime-col-month">-----</div>
-            <div class="quasar-datetime-col-day">--</div>
-            <div class="quasar-datetime-col-year">----</div>
+            <div class="q-datetime-col-month">-----</div>
+            <div class="q-datetime-col-day">--</div>
+            <div class="q-datetime-col-year">----</div>
           </template>
           <template v-if="!value && typeHasTime">
-            <div class="quasar-datetime-col-hour">--</div>
-            <div class="quasar-datetime-col-minute">--</div>
+            <div class="q-datetime-col-hour">--</div>
+            <div class="q-datetime-col-minute">--</div>
           </template>
         </div>
       </div>
 
-      <div class="quasar-datetime-mask"></div>
+      <div class="q-datetime-mask"></div>
     </div>
   </div>
 </template>
diff --git a/src/vue-components/datetime/InlineDatetimeMat.vue b/src/vue-components/datetime/InlineDatetimeMat.vue
index 3ef8a26cdf2..026d5240d80 100644
--- a/src/vue-components/datetime/InlineDatetimeMat.vue
+++ b/src/vue-components/datetime/InlineDatetimeMat.vue
@@ -1,27 +1,27 @@
 <template>
-  <div class="quasar-datetime inline column gt-md-row" :class="{disabled: disable, readonly}">
-    <div class="quasar-datetime-header column justify-center" v-if="!value">&nbsp;</div>
-    <div class="quasar-datetime-header column justify-center" v-else>
+  <div class="q-datetime inline column gt-md-row" :class="{disabled: disable, readonly}">
+    <div class="q-datetime-header column justify-center" v-if="!value">&nbsp;</div>
+    <div class="q-datetime-header column justify-center" v-else>
       <div v-if="typeHasDate">
-        <div class="quasar-datetime-weekdaystring">{{ weekDayString }}</div>
-        <div class="quasar-datetime-datestring row gt-md-column items-center justify-center">
+        <div class="q-datetime-weekdaystring">{{ weekDayString }}</div>
+        <div class="q-datetime-datestring row gt-md-column items-center justify-center">
           <span
             :class="{active: view === 'month'}"
-            class="quasar-datetime-link small"
+            class="q-datetime-link small"
             @click="view = 'month'"
           >
             {{ monthString }}
           </span>
           <span
             :class="{active: view === 'day'}"
-            class="quasar-datetime-link"
+            class="q-datetime-link"
             @click="view = 'day'"
           >
             {{ dayString }}
           </span>
           <span
             :class="{active: view === 'year'}"
-            class="quasar-datetime-link small"
+            class="q-datetime-link small"
             @click="view = 'year'"
           >
             {{ year }}
@@ -30,12 +30,12 @@
       </div>
       <div
         v-if="typeHasTime"
-        class="quasar-datetime-time row gt-md-column items-center justify-center"
+        class="q-datetime-time row gt-md-column items-center justify-center"
       >
-        <div class="quasar-datetime-clockstring">
+        <div class="q-datetime-clockstring">
           <span
             :class="{active: view === 'hour'}"
-            class="quasar-datetime-link"
+            class="q-datetime-link"
             @click="view = 'hour'"
           >
             {{ __pad(hour, '&nbsp;&nbsp;') }}
@@ -43,31 +43,31 @@
           <span style="opacity: 0.6">:</span>
           <span
             :class="{active: view === 'minute'}"
-            class="quasar-datetime-link"
+            class="q-datetime-link"
             @click="view = 'minute'"
           >
             {{ __pad(minute) }}
           </span>
         </div>
-        <div class="quasar-datetime-ampm column justify-around">
+        <div class="q-datetime-ampm column justify-around">
           <div
             :class="{active: am}"
-            class="quasar-datetime-link"
+            class="q-datetime-link"
             @click="toggleAmPm()"
           >AM</div>
           <div
             :class="{active: !am}"
-            class="quasar-datetime-link"
+            class="q-datetime-link"
             @click="toggleAmPm()"
           >PM</div>
         </div>
       </div>
     </div>
-    <div class="quasar-datetime-content auto column">
-      <div ref="selector" class="quasar-datetime-selector auto row items-center justify-center">
+    <div class="q-datetime-content auto column">
+      <div ref="selector" class="q-datetime-selector auto row items-center justify-center">
         <div
           v-if="view === 'year'"
-          class="quasar-datetime-view-year full-width full-height"
+          class="q-datetime-view-year full-width full-height"
         >
           <button
             v-for="n in yearInterval"
@@ -81,7 +81,7 @@
 
         <div
           v-if="view === 'month'"
-          class="quasar-datetime-view-month full-width full-height"
+          class="q-datetime-view-month full-width full-height"
         >
           <button
             v-for="index in monthInterval"
@@ -95,7 +95,7 @@
 
         <div
           v-if="view === 'day'"
-          class="quasar-datetime-view-day quasar-datetime-animate"
+          class="q-datetime-view-day q-datetime-animate"
         >
           <div class="row items-center content-center">
             <button
@@ -114,11 +114,11 @@
               <i>keyboard_arrow_right</i>
             </button>
           </div>
-          <div class="quasar-datetime-weekdays row items-center justify-start">
+          <div class="q-datetime-weekdays row items-center justify-start">
             <div v-for="day in daysList">{{day}}</div>
           </div>
-          <div class="quasar-datetime-days row wrap items-center justify-start content-center">
-            <div v-for="fillerDay in fillerDays" class="quasar-datetime-fillerday"></div>
+          <div class="q-datetime-days row wrap items-center justify-start content-center">
+            <div v-for="fillerDay in fillerDays" class="q-datetime-fillerday"></div>
             <div v-if="min" v-for="fillerDay in beforeMinDays" class="flex items-center content-center justify-center disabled">
               {{ fillerDay }}
             </div>
@@ -143,7 +143,7 @@
         >
           <div
             v-if="view === 'hour'"
-            class="quasar-datetime-clock cursor-pointer"
+            class="q-datetime-clock cursor-pointer"
             @mousedown="__dragStart"
             @mousemove="__dragMove"
             @mouseup="__dragStop"
@@ -151,15 +151,15 @@
             @touchmove="__dragMove"
             @touchend="__dragStop"
           >
-            <div class="quasar-datetime-clock-circle full-width full-height">
-              <div class="quasar-datetime-clock-center"></div>
-              <div class="quasar-datetime-clock-pointer" :style="clockPointerStyle" :class="{hidden: !value}">
+            <div class="q-datetime-clock-circle full-width full-height">
+              <div class="q-datetime-clock-center"></div>
+              <div class="q-datetime-clock-pointer" :style="clockPointerStyle" :class="{hidden: !value}">
                 <span></span>
               </div>
               <div
                 v-for="n in 12"
-                class="quasar-datetime-clock-position"
-                :class="['quasar-datetime-clock-pos-' + n, value && n === hour ? 'active' : '']"
+                class="q-datetime-clock-position"
+                :class="['q-datetime-clock-pos-' + n, value && n === hour ? 'active' : '']"
               >
                 {{ n }}
               </div>
@@ -168,7 +168,7 @@
 
           <div
             v-if="view === 'minute'"
-            class="quasar-datetime-clock cursor-pointer"
+            class="q-datetime-clock cursor-pointer"
             @mousedown="__dragStart"
             @mousemove="__dragMove"
             @mouseup="__dragStop"
@@ -176,15 +176,15 @@
             @touchmove="__dragMove"
             @touchend="__dragStop"
           >
-            <div class="quasar-datetime-clock-circle full-width full-height">
-              <div class="quasar-datetime-clock-center"></div>
-              <div class="quasar-datetime-clock-pointer" :style="clockPointerStyle">
+            <div class="q-datetime-clock-circle full-width full-height">
+              <div class="q-datetime-clock-center"></div>
+              <div class="q-datetime-clock-pointer" :style="clockPointerStyle">
                 <span></span>
               </div>
               <div
                 v-for="n in 12"
-                class="quasar-datetime-clock-position"
-                :class="['quasar-datetime-clock-pos-' + (n - 1), (n - 1) * 5 === minute ? 'active' : '']"
+                class="q-datetime-clock-position"
+                :class="['q-datetime-clock-pos-' + (n - 1), (n - 1) * 5 === minute ? 'active' : '']"
               >
                 {{ (n - 1) * 5 }}
               </div>
diff --git a/src/vue-components/datetime/datetime.ios.styl b/src/vue-components/datetime/datetime.ios.styl
index e32ce9e83b6..ace92d90178 100644
--- a/src/vue-components/datetime/datetime.ios.styl
+++ b/src/vue-components/datetime/datetime.ios.styl
@@ -1,4 +1,4 @@
-.quasar-datetime
+.q-datetime
   max-width 100vw
   border 1px solid $grey-4
   display inline-block
@@ -10,11 +10,11 @@
   &.type-datetime
     width 320px
 
-.quasar-datetime-content
+.q-datetime-content
   height 200px
   position relative
 
-.quasar-datetime-inner
+.q-datetime-inner
   font-size 21px
   overflow hidden
   perspective 1200px
@@ -23,7 +23,7 @@
   position relative
   padding 0
 
-.quasar-datetime-mask
+.q-datetime-mask
   position absolute
   top 0
   right 0
@@ -34,37 +34,37 @@
   background linear-gradient(to top, white, transparent 50%, white)
   pointer-events none
 
-.quasar-datetime-col
+.q-datetime-col
   display block
   overflow visible
   transform-style preserve-3d
   position relative
   max-height 100%
 
-.quasar-datetime-col-wrapper, .quasar-datetime-item
+.q-datetime-col-wrapper, .q-datetime-item
   transform-style preserve-3d
   transition all .2s ease-out
 
-body.desktop .quasar-datetime-col-wrapper
+body.desktop .q-datetime-col-wrapper
   cursor pointer
 
-.quasar-datetime-col-divider
+.q-datetime-col-divider
   max-height 100%
   width 10px
 
-.quasar-datetime-col-month
+.q-datetime-col-month
   width 117px
   text-align left
-.quasar-datetime-col-day
+.q-datetime-col-day
   width 37px
-.quasar-datetime-col-year
+.q-datetime-col-year
   width 61px
-.quasar-datetime-col-hour
+.q-datetime-col-hour
   width 37px
-.quasar-datetime-col-minute
+.q-datetime-col-minute
   width 37px
 
-.quasar-datetime-item
+.q-datetime-item
   height 36px
   line-height 36px
   padding 0 6px
@@ -79,7 +79,7 @@ body.desktop .quasar-datetime-col-wrapper
   backface-visibility hidden
   transform-origin center center -110px
 
-.quasar-datetime-highlight
+.q-datetime-highlight
   height 36px
   position absolute
   left 0
@@ -109,7 +109,7 @@ body.desktop .quasar-datetime-col-wrapper
     bottom 0
     top auto
 
-  &.quasar-datetime-no-selection
+  &.q-datetime-no-selection
     letter-spacing 3px
     background white
     color $grey-6
diff --git a/src/vue-components/datetime/datetime.mat.styl b/src/vue-components/datetime/datetime.mat.styl
index 95249326c17..fc971951dce 100644
--- a/src/vue-components/datetime/datetime.mat.styl
+++ b/src/vue-components/datetime/datetime.mat.styl
@@ -1,58 +1,58 @@
 $datetime-color             ?= $primary
 
-.quasar-datetime
+.q-datetime
   color rgba(0, 0, 0, .87)
   font-size 1rem
   text-align center
   user-select none
   line-height initial
 
-.quasar-datetime-header
+.q-datetime-header
   color opposite-non-color($datetime-color)
   background $datetime-color
 
-.quasar-datetime-weekdaystring
+.q-datetime-weekdaystring
   font-size .8rem
   background rgba(0, 0, 0, .1)
   padding 5px 0
 
-.quasar-datetime-time
+.q-datetime-time
   padding 10px 0
 
-div + .quasar-datetime-time
+div + .q-datetime-time
   padding-top 0
 
-.quasar-datetime-ampm
+.q-datetime-ampm
   font-size .9rem
 
-.quasar-datetime-datestring
+.q-datetime-datestring
   font-size 2.7rem
   span.small
     font-size 1.2rem
 
-.quasar-datetime-link
+.q-datetime-link
   cursor pointer
   opacity .6
   &.active
     opacity 1
 
-.quasar-datetime-clockstring
+.q-datetime-clockstring
   font-size 2.7rem
 
-.quasar-datetime-selector
+.q-datetime-selector
   height 330px
   overflow auto
 
-.quasar-datetime-animate
-  animation quasar-scale-in .4s
-.modal .quasar-datetime-animate
+.q-datetime-animate
+  animation q-scale-in .4s
+.modal .q-datetime-animate
   animation initial
 
-.quasar-datetime-view-day
+.q-datetime-view-day
   width 250px
   height 300px
 
-.quasar-datetime-weekdays
+.q-datetime-weekdays
   font-size .75rem
   margin-top 10px
   margin-bottom 5px
@@ -67,22 +67,22 @@ div + .quasar-datetime-time
     min-height 0
     background transparent
 
-.quasar-datetime-days
+.q-datetime-days
   font-size 12px
   div
     width 35px
     height 35px
-    &:not(.quasar-datetime-fillerday):not(.disabled)
+    &:not(.q-datetime-fillerday):not(.disabled)
       border-radius 50%
       transition all .3s
       &:hover
         background $grey-4
       &.active
-        animation quasar-pop-in .5s
+        animation q-pop-in .5s
         color opposite-non-color($datetime-color)
         background $datetime-color
 
-.quasar-datetime-view-year, .quasar-datetime-view-month
+.q-datetime-view-year, .q-datetime-view-month
   button
     font-weight normal
     text-transform capitalize
@@ -93,18 +93,18 @@ div + .quasar-datetime-time
       padding-bottom 1rem
       color $primary !important
 
-.quasar-datetime-clock
+.q-datetime-clock
   width 250px
   height 250px
   border-radius 50%
   background $grey-4
   padding 24px
 
-.quasar-datetime-clock-circle
+.q-datetime-clock-circle
   position relative
-  animation quasar-pop-in .5s
+  animation q-pop-in .5s
 
-.quasar-datetime-clock-center
+.q-datetime-clock-center
   height 6px
   width 6px
   top 0
@@ -118,7 +118,7 @@ div + .quasar-datetime-time
   color opposite-non-color($datetime-color)
   background $datetime-color
 
-.quasar-datetime-clock-pointer
+.q-datetime-clock-pointer
   width 1px
   height 50%
   margin 0 auto
@@ -141,10 +141,10 @@ div + .quasar-datetime-time
     transform translate(-50%, -50%)
     background $datetime-color
 
-body.desktop .quasar-datetime-clock-position:not(.active):hover
+body.desktop .q-datetime-clock-position:not(.active):hover
   background $grey-2 !important
 
-.quasar-datetime-clock-position
+.q-datetime-clock-position
   position absolute
   min-height 32px
   width 32px
@@ -161,44 +161,44 @@ body.desktop .quasar-datetime-clock-position:not(.active):hover
 
 for $pos in 0..12
   $degree = (270 + 30 * $pos)
-  .quasar-datetime-clock-pos-{$pos}
+  .q-datetime-clock-pos-{$pos}
     top (((1 + sin($degree * 1deg)) * 100%) / 2)
     left (((1 + cos($degree * 1deg)) * 100%) / 2)
 
 @media (max-width $layout-medium-max)
-  .quasar-datetime-ampm
+  .q-datetime-ampm
     margin-left 1.5rem
-  .quasar-datetime-datestring span
+  .q-datetime-datestring span
     margin 10px 5px
     &.small
       margin-top 1.3rem
-  .quasar-datetime
+  .q-datetime
     width 290px
-    &:not(.no-border) .quasar-datetime-content
+    &:not(.no-border) .q-datetime-content
       border-width 0 1px 1px 1px
       border-style solid
       border-color $grey-4
 
 @media (min-width $layout-big-min)
-  .quasar-datetime-datestring
+  .q-datetime-datestring
     padding 10px 0
-  .quasar-datetime-ampm
+  .q-datetime-ampm
     margin-top 5px
     div
       margin 2px 0
-  .quasar-datetime-header
+  .q-datetime-header
     width 170px
     position relative
-  .quasar-datetime-weekdaystring
+  .q-datetime-weekdaystring
     position absolute
     top 0
     left 0
     right 0
-  .quasar-datetime-content
+  .q-datetime-content
     width 290px
-  .quasar-datetime
+  .q-datetime
     width 520px
-    &:not(.no-border) .quasar-datetime-content
+    &:not(.no-border) .q-datetime-content
       border-width 1px 1px 1px 0
       border-style solid
       border-color $grey-4
diff --git a/src/vue-components/drawer/Drawer.vue b/src/vue-components/drawer/Drawer.vue
index 5b3b4c87ae7..0be1d1c4798 100644
--- a/src/vue-components/drawer/Drawer.vue
+++ b/src/vue-components/drawer/Drawer.vue
@@ -321,7 +321,7 @@ export default {
       const content = this.$refs.content
 
       if (theme.current === 'ios') {
-        this.layoutContainer = this.$el.closest('.layout') || document.getElementById('quasar-app')
+        this.layoutContainer = this.$el.closest('.layout') || document.getElementById('q-app')
       }
 
       this.width = Utils.dom.width(content)
diff --git a/src/vue-components/fab/Fab.vue b/src/vue-components/fab/Fab.vue
index fdb5e257c02..f9db5016325 100644
--- a/src/vue-components/fab/Fab.vue
+++ b/src/vue-components/fab/Fab.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    class="quasar-fab flex inline justify-center"
+    class="q-fab flex inline justify-center"
     :class="{opened}"
   >
     <div class="backdrop animate-fade" @click="toggle(true)"></div>
     <button class="circular raised" @click="toggle()" :class="classNames">
-      <i class="quasar-fab-icon">{{icon}}</i>
-      <i class="quasar-fab-active-icon">{{activeIcon}}</i>
+      <i class="q-fab-icon">{{icon}}</i>
+      <i class="q-fab-active-icon">{{activeIcon}}</i>
     </button>
-    <div class="quasar-fab-actions flex inline items-center" :class="[direction]">
+    <div class="q-fab-actions flex inline items-center" :class="[direction]">
       <slot></slot>
     </div>
   </div>
diff --git a/src/vue-components/fab/fab.ios.styl b/src/vue-components/fab/fab.ios.styl
index ddb8370d7f9..1f400d5a98f 100644
--- a/src/vue-components/fab/fab.ios.styl
+++ b/src/vue-components/fab/fab.ios.styl
@@ -2,7 +2,7 @@ $fab-size       = (1.2 * $button-circular-size)
 $fab-translate  = 2 * $fab-size
 $fab-margin    ?= 5px
 
-.quasar-fab
+.q-fab
   height $fab-size
   width $fab-size
   position relative
@@ -14,33 +14,33 @@ $fab-margin    ?= 5px
   &.opened
     z-index $z-fab
 
-    .quasar-fab-actions
+    .q-fab-actions
       opacity 1
       transform scaleX(1) scaleY(1) translateX(0) translateY(0)
       pointer-events all
-    .quasar-fab-icon
+    .q-fab-icon
       transform rotate3d(0, 0, 1, 180deg)
       opacity 0
-    .quasar-fab-active-icon
+    .q-fab-active-icon
       transform rotate3d(0, 0, 1, 0deg)
       opacity 1
     .backdrop
       display block
       background rgba(255, 255, 255, .5)
 
-.quasar-fab-icon, .quasar-fab-active-icon
+.q-fab-icon, .q-fab-active-icon
   position absolute
   top 18px
   left 17px
   transition opacity .4s, transform .4s
-.quasar-fab-icon
+.q-fab-icon
   opacity 1
   transform rotate3d(0, 0, 1, 0deg)
-.quasar-fab-active-icon
+.q-fab-active-icon
   opacity 0
   transform rotate3d(0, 0, 1, -180deg)
 
-.quasar-fab-actions
+.q-fab-actions
   position absolute
   margin 0
   opacity 0
diff --git a/src/vue-components/fab/fab.mat.styl b/src/vue-components/fab/fab.mat.styl
index ddb8370d7f9..1f400d5a98f 100644
--- a/src/vue-components/fab/fab.mat.styl
+++ b/src/vue-components/fab/fab.mat.styl
@@ -2,7 +2,7 @@ $fab-size       = (1.2 * $button-circular-size)
 $fab-translate  = 2 * $fab-size
 $fab-margin    ?= 5px
 
-.quasar-fab
+.q-fab
   height $fab-size
   width $fab-size
   position relative
@@ -14,33 +14,33 @@ $fab-margin    ?= 5px
   &.opened
     z-index $z-fab
 
-    .quasar-fab-actions
+    .q-fab-actions
       opacity 1
       transform scaleX(1) scaleY(1) translateX(0) translateY(0)
       pointer-events all
-    .quasar-fab-icon
+    .q-fab-icon
       transform rotate3d(0, 0, 1, 180deg)
       opacity 0
-    .quasar-fab-active-icon
+    .q-fab-active-icon
       transform rotate3d(0, 0, 1, 0deg)
       opacity 1
     .backdrop
       display block
       background rgba(255, 255, 255, .5)
 
-.quasar-fab-icon, .quasar-fab-active-icon
+.q-fab-icon, .q-fab-active-icon
   position absolute
   top 18px
   left 17px
   transition opacity .4s, transform .4s
-.quasar-fab-icon
+.q-fab-icon
   opacity 1
   transform rotate3d(0, 0, 1, 0deg)
-.quasar-fab-active-icon
+.q-fab-active-icon
   opacity 0
   transform rotate3d(0, 0, 1, -180deg)
 
-.quasar-fab-actions
+.q-fab-actions
   position absolute
   margin 0
   opacity 0
diff --git a/src/vue-components/gallery/Gallery.vue b/src/vue-components/gallery/Gallery.vue
index 3ac239c84ea..822b8103089 100644
--- a/src/vue-components/gallery/Gallery.vue
+++ b/src/vue-components/gallery/Gallery.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="quasar-gallery">
+  <div class="q-gallery">
     <div
       v-for="(img, index) in src"
       :key="index"
diff --git a/src/vue-components/gallery/GallerySlider.vue b/src/vue-components/gallery/GallerySlider.vue
index 0fe10e832bb..29680746095 100644
--- a/src/vue-components/gallery/GallerySlider.vue
+++ b/src/vue-components/gallery/GallerySlider.vue
@@ -1,8 +1,8 @@
 <template>
-  <quasar-slider
+  <q-slider
     ref="slider" arrows fullscreen
     @slide="__updateCurrentSlide"
-    class="text-white bg-black quasar-gallery-slider"
+    class="text-white bg-black q-gallery-slider"
   >
     <div
       v-for="(img, index) in src"
@@ -16,7 +16,7 @@
     </div>
 
     <div
-      class="quasar-gallery-slider-overlay"
+      class="q-gallery-slider-overlay"
       :class="{active: quickView}"
       @click="toggleQuickView()"
     ></div>
@@ -24,7 +24,7 @@
     <i slot="action" @click="toggleQuickView()">view_carousel</i>
 
     <div
-      class="quasar-gallery-slider-quickview"
+      class="q-gallery-slider-quickview"
       :class="{active: quickView}"
     >
       <div v-for="(img, index) in src" :key="index">
@@ -35,7 +35,7 @@
         >
       </div>
     </div>
-  </quasar-slider>
+  </q-slider>
 </template>
 
 <script>
diff --git a/src/vue-components/gallery/gallery.ios.styl b/src/vue-components/gallery/gallery.ios.styl
index c3cf7a8b4bb..fa366a65826 100644
--- a/src/vue-components/gallery/gallery.ios.styl
+++ b/src/vue-components/gallery/gallery.ios.styl
@@ -1,4 +1,4 @@
-.quasar-gallery
+.q-gallery
   width 100%
   display flex
   flex-flow row wrap
@@ -7,18 +7,18 @@
     flex auto
     width 150px
     margin 0 12px 12px 0
-    &.quasar-gallery-main
+    &.q-gallery-main
       flex-basis 200%
 
   img
     height auto
     width 100%
 
-.quasar-gallery-slider img
+.q-gallery-slider img
   height auto
   width 100%
 
-.quasar-gallery-slider-overlay
+.q-gallery-slider-overlay
   position absolute
   top 0
   right 0
@@ -30,7 +30,7 @@
   &.active
     display block
 
-.quasar-gallery-slider-quickview
+.q-gallery-slider-quickview
   position absolute
   bottom 0
   left 0
@@ -66,5 +66,5 @@
       opacity 1
       border 1px solid white
 
-body.desktop .quasar-gallery-slider-quickview img:hover
+body.desktop .q-gallery-slider-quickview img:hover
   opacity 1
diff --git a/src/vue-components/gallery/gallery.mat.styl b/src/vue-components/gallery/gallery.mat.styl
index c3cf7a8b4bb..fa366a65826 100644
--- a/src/vue-components/gallery/gallery.mat.styl
+++ b/src/vue-components/gallery/gallery.mat.styl
@@ -1,4 +1,4 @@
-.quasar-gallery
+.q-gallery
   width 100%
   display flex
   flex-flow row wrap
@@ -7,18 +7,18 @@
     flex auto
     width 150px
     margin 0 12px 12px 0
-    &.quasar-gallery-main
+    &.q-gallery-main
       flex-basis 200%
 
   img
     height auto
     width 100%
 
-.quasar-gallery-slider img
+.q-gallery-slider img
   height auto
   width 100%
 
-.quasar-gallery-slider-overlay
+.q-gallery-slider-overlay
   position absolute
   top 0
   right 0
@@ -30,7 +30,7 @@
   &.active
     display block
 
-.quasar-gallery-slider-quickview
+.q-gallery-slider-quickview
   position absolute
   bottom 0
   left 0
@@ -66,5 +66,5 @@
       opacity 1
       border 1px solid white
 
-body.desktop .quasar-gallery-slider-quickview img:hover
+body.desktop .q-gallery-slider-quickview img:hover
   opacity 1
diff --git a/src/vue-components/infinite-scroll/InfiniteScroll.vue b/src/vue-components/infinite-scroll/InfiniteScroll.vue
index 8d9d44cf9c3..b036c2a87d3 100644
--- a/src/vue-components/infinite-scroll/InfiniteScroll.vue
+++ b/src/vue-components/infinite-scroll/InfiniteScroll.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="quasar-infinite-scroll">
-    <div ref="content" class="quasar-infinite-scroll-content">
+  <div class="q-infinite-scroll">
+    <div ref="content" class="q-infinite-scroll-content">
       <slot></slot>
     </div>
     <br>
-    <div class="quasar-infinite-scroll-message" v-show="fetching">
+    <div class="q-infinite-scroll-message" v-show="fetching">
       <slot name="message"></slot>
     </div>
   </div>
diff --git a/src/vue-components/knob/Knob.vue b/src/vue-components/knob/Knob.vue
index 89dcc01fe4f..7f552452adf 100644
--- a/src/vue-components/knob/Knob.vue
+++ b/src/vue-components/knob/Knob.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="quasar-knob non-selectable cursor-pointer"
+    class="q-knob non-selectable cursor-pointer"
     :class="{disabled: disable}"
     @mousedown="__dragStart"
     @mousemove="__dragMove"
@@ -32,7 +32,7 @@
       </svg>
 
       <div
-        class="quasar-knob-label row items-center justify-center content-center"
+        class="q-knob-label row items-center justify-center content-center"
         :style="{color: color}"
         v-html="placeholder || value"
       ></div>
diff --git a/src/vue-components/knob/knob.ios.styl b/src/vue-components/knob/knob.ios.styl
index f13dc0a233a..fcb97dbadf9 100644
--- a/src/vue-components/knob/knob.ios.styl
+++ b/src/vue-components/knob/knob.ios.styl
@@ -1,8 +1,8 @@
-.quasar-knob, .quasar-knob > div
+.q-knob, .q-knob > div
   position relative
   display inline-block
 
-.quasar-knob-label
+.q-knob-label
   width 100%
   pointer-events none
   position absolute
diff --git a/src/vue-components/knob/knob.mat.styl b/src/vue-components/knob/knob.mat.styl
index f13dc0a233a..fcb97dbadf9 100644
--- a/src/vue-components/knob/knob.mat.styl
+++ b/src/vue-components/knob/knob.mat.styl
@@ -1,8 +1,8 @@
-.quasar-knob, .quasar-knob > div
+.q-knob, .q-knob > div
   position relative
   display inline-block
 
-.quasar-knob-label
+.q-knob-label
   width 100%
   pointer-events none
   position absolute
diff --git a/src/vue-components/layout/layout.ios.styl b/src/vue-components/layout/layout.ios.styl
index b70c2d5236c..057755a3da1 100644
--- a/src/vue-components/layout/layout.ios.styl
+++ b/src/vue-components/layout/layout.ios.styl
@@ -14,7 +14,7 @@ $toolbar-title-font-size   ?= 1.2rem
   display flex
   flex-direction column
 
-  > .quasar-tabs
+  > .q-tabs
     z-index $z-marginals
     order $layout-navbar-order
     border-top $layout-border
@@ -33,7 +33,7 @@ $toolbar-title-font-size   ?= 1.2rem
 body.desktop
   .layout-header, .layout-footer
     button:hover i
-      animation quasar-rotate .25s ease-out
+      animation q-rotate .25s ease-out
 
 .layout-content
   display flex
diff --git a/src/vue-components/layout/layout.mat.styl b/src/vue-components/layout/layout.mat.styl
index a925a57c921..9b4036d24b6 100644
--- a/src/vue-components/layout/layout.mat.styl
+++ b/src/vue-components/layout/layout.mat.styl
@@ -15,7 +15,7 @@ $toolbar-title-font-size   ?= 1.25rem
   display flex
   flex-direction column
 
-  > .quasar-tabs
+  > .q-tabs
     z-index $z-marginals
     order $layout-navbar-order
     border-radius 0 !important
@@ -31,7 +31,7 @@ $toolbar-title-font-size   ?= 1.25rem
 body.desktop
   .layout-header, .layout-footer
     button:hover i
-      animation quasar-rotate .25s ease-out
+      animation q-rotate .25s ease-out
 
 .layout-content
   display flex
diff --git a/src/vue-components/modal/Modal.vue b/src/vue-components/modal/Modal.vue
index a31e999164e..582f45cb6ae 100644
--- a/src/vue-components/modal/Modal.vue
+++ b/src/vue-components/modal/Modal.vue
@@ -25,7 +25,7 @@ export default {
   props: {
     transition: {
       type: String,
-      default: 'quasar-modal'
+      default: 'q-modal'
     },
     positionClasses: {
       type: String,
diff --git a/src/vue-components/modal/modal.ios.styl b/src/vue-components/modal/modal.ios.styl
index fdf3f1b8d46..4603505fb50 100644
--- a/src/vue-components/modal/modal.ios.styl
+++ b/src/vue-components/modal/modal.ios.styl
@@ -53,18 +53,18 @@ maximized-modal()
   &.maximized .modal-content
     maximized-modal()
 
-.quasar-modal-enter, .quasar-modal-leave-active
+.q-modal-enter, .q-modal-leave-active
   opacity 0
 
 @media screen and (min-width $layout-medium-min)
   .modal:not(.maximized)
     background $dimmed-background
-    &.quasar-modal-enter .modal-content
+    &.q-modal-enter .modal-content
       transform scale(1.2)
-    &.quasar-modal-leave-active .modal-content
+    &.q-modal-leave-active .modal-content
       transform scale(.8)
   .modal.maximized
-    &.quasar-modal-enter, &.quasar-modal-leave-active
+    &.q-modal-enter, &.q-modal-leave-active
       .modal-content
         transform translateX(101%)
 
@@ -72,13 +72,13 @@ maximized-modal()
   .modal:not(.minimized)
     .modal-content
       maximized-modal()
-    &.quasar-modal-enter, &.quasar-modal-leave-active
+    &.q-modal-enter, &.q-modal-leave-active
       .modal-content
         transform translateX(101%)
   .modal.minimized
-    &.quasar-modal-enter .modal-content
+    &.q-modal-enter .modal-content
       transform scale(1.2)
-    &.quasar-modal-leave-active .modal-content
+    &.q-modal-leave-active .modal-content
       transform scale(.8)
 
 .modal, .modal-content
diff --git a/src/vue-components/modal/modal.mat.styl b/src/vue-components/modal/modal.mat.styl
index cefee0e9eec..4435753e7c7 100644
--- a/src/vue-components/modal/modal.mat.styl
+++ b/src/vue-components/modal/modal.mat.styl
@@ -53,18 +53,18 @@ maximized-modal()
   &.maximized .modal-content
     maximized-modal()
 
-.quasar-modal-enter, .quasar-modal-leave-active
+.q-modal-enter, .q-modal-leave-active
   opacity 0
 
 @media screen and (min-width $layout-medium-min)
   .modal:not(.maximized)
     background $dimmed-background
-    &.quasar-modal-enter .modal-content
+    &.q-modal-enter .modal-content
       transform scale(1.2)
-    &.quasar-modal-leave-active .modal-content
+    &.q-modal-leave-active .modal-content
       transform scale(.8)
   .modal.maximized
-    &.quasar-modal-enter, &.quasar-modal-leave-active
+    &.q-modal-enter, &.q-modal-leave-active
       .modal-content
         transform translateX(101%)
 
@@ -72,13 +72,13 @@ maximized-modal()
   .modal:not(.minimized)
     .modal-content
       maximized-modal()
-    &.quasar-modal-enter, &.quasar-modal-leave-active
+    &.q-modal-enter, &.q-modal-leave-active
       .modal-content
         transform translateX(101%)
   .modal.minimized
-    &.quasar-modal-enter .modal-content
+    &.q-modal-enter .modal-content
       transform scale(1.2)
-    &.quasar-modal-leave-active .modal-content
+    &.q-modal-leave-active .modal-content
       transform scale(.8)
 
 
diff --git a/src/vue-components/numeric/Numeric.vue b/src/vue-components/numeric/Numeric.vue
index 31d9048f593..a937716bc01 100644
--- a/src/vue-components/numeric/Numeric.vue
+++ b/src/vue-components/numeric/Numeric.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="quasar-numeric textfield row inline items-center" :class="{disabled: disable, readonly}">
+  <div class="q-numeric textfield row inline items-center" :class="{disabled: disable, readonly}">
     <i @click="__setByOffset(-1)">remove</i>
     <input
-      class="no-style auto quasar-input-field"
+      class="no-style auto q-input-field"
       type="number"
       v-model.number="model"
       @blur="__updateValue()"
diff --git a/src/vue-components/numeric/numeric.ios.styl b/src/vue-components/numeric/numeric.ios.styl
index 7e75d05cad4..3a870ab2932 100644
--- a/src/vue-components/numeric/numeric.ios.styl
+++ b/src/vue-components/numeric/numeric.ios.styl
@@ -1,4 +1,4 @@
-.quasar-numeric
+.q-numeric
   vertical-align middle
   padding 0 15px
   margin-left 5px
diff --git a/src/vue-components/numeric/numeric.mat.styl b/src/vue-components/numeric/numeric.mat.styl
index 7e75d05cad4..3a870ab2932 100644
--- a/src/vue-components/numeric/numeric.mat.styl
+++ b/src/vue-components/numeric/numeric.mat.styl
@@ -1,4 +1,4 @@
-.quasar-numeric
+.q-numeric
   vertical-align middle
   padding 0 15px
   margin-left 5px
diff --git a/src/vue-components/pagination/Pagination.vue b/src/vue-components/pagination/Pagination.vue
index 0787251db71..417aa2f025b 100644
--- a/src/vue-components/pagination/Pagination.vue
+++ b/src/vue-components/pagination/Pagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="quasar-pagination" :class="{disabled: disable}">
+  <div class="q-pagination" :class="{disabled: disable}">
     <button :class="{disabled: value === min}" class="primary clear small" @click="set(min)">
       <i>first_page</i>
     </button>
diff --git a/src/vue-components/pagination/pagination.ios.styl b/src/vue-components/pagination/pagination.ios.styl
index 743d42fed27..fee4e2cfec2 100644
--- a/src/vue-components/pagination/pagination.ios.styl
+++ b/src/vue-components/pagination/pagination.ios.styl
@@ -1,4 +1,4 @@
-.quasar-pagination
+.q-pagination
   input
     text-align center
   button
diff --git a/src/vue-components/pagination/pagination.mat.styl b/src/vue-components/pagination/pagination.mat.styl
index 743d42fed27..fee4e2cfec2 100644
--- a/src/vue-components/pagination/pagination.mat.styl
+++ b/src/vue-components/pagination/pagination.mat.styl
@@ -1,4 +1,4 @@
-.quasar-pagination
+.q-pagination
   input
     text-align center
   button
diff --git a/src/vue-components/parallax/Parallax.vue b/src/vue-components/parallax/Parallax.vue
index f0edc0cee78..31ec2a892d9 100644
--- a/src/vue-components/parallax/Parallax.vue
+++ b/src/vue-components/parallax/Parallax.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="quasar-parallax column items-center justify-center" :style="{height: height + 'px'}">
-    <div class="quasar-parallax-image">
+  <div class="q-parallax column items-center justify-center" :style="{height: height + 'px'}">
+    <div class="q-parallax-image">
       <img
         ref="img"
         :src="src"
@@ -9,7 +9,7 @@
         style="transform: translate3D(-50%, 0, 0)"
       >
     </div>
-    <div class="quasar-parallax-text">
+    <div class="q-parallax-text">
       <slot name="loading" v-if="!imageHasBeenLoaded"></slot>
       <slot v-else></slot>
     </div>
diff --git a/src/vue-components/parallax/parallax.ios.styl b/src/vue-components/parallax/parallax.ios.styl
index 88b649d8186..d3cf7c00b5d 100644
--- a/src/vue-components/parallax/parallax.ios.styl
+++ b/src/vue-components/parallax/parallax.ios.styl
@@ -1,11 +1,11 @@
 $paralax-text-shadow ?= 0 0 5px white
 
-.quasar-parallax
+.q-parallax
   position relative
   width 100%
   overflow hidden
 
-.quasar-parallax-image
+.q-parallax-image
   position absolute
   top 0
   right 0
@@ -24,5 +24,5 @@ $paralax-text-shadow ?= 0 0 5px white
     &.ready
       visibility visible
 
-.quasar-parallax-text
+.q-parallax-text
   text-shadow $paralax-text-shadow
diff --git a/src/vue-components/parallax/parallax.mat.styl b/src/vue-components/parallax/parallax.mat.styl
index 88b649d8186..d3cf7c00b5d 100644
--- a/src/vue-components/parallax/parallax.mat.styl
+++ b/src/vue-components/parallax/parallax.mat.styl
@@ -1,11 +1,11 @@
 $paralax-text-shadow ?= 0 0 5px white
 
-.quasar-parallax
+.q-parallax
   position relative
   width 100%
   overflow hidden
 
-.quasar-parallax-image
+.q-parallax-image
   position absolute
   top 0
   right 0
@@ -24,5 +24,5 @@ $paralax-text-shadow ?= 0 0 5px white
     &.ready
       visibility visible
 
-.quasar-parallax-text
+.q-parallax-text
   text-shadow $paralax-text-shadow
diff --git a/src/vue-components/picker-textfield/PickerTextfield.vue b/src/vue-components/picker-textfield/PickerTextfield.vue
index 9c26079542c..81b9a33b83d 100644
--- a/src/vue-components/picker-textfield/PickerTextfield.vue
+++ b/src/vue-components/picker-textfield/PickerTextfield.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="quasar-picker-textfield cursor-pointer textfield caret"
+    class="q-picker-textfield cursor-pointer textfield caret"
     :class="{disabled: disable, readonly, active, 'with-label': label}"
   >
-    <div class="quasar-picker-textfield-label ellipsis" v-html="label"></div>
-    <div class="quasar-picker-textfield-value ellipsis">{{actualValue}}</div>
+    <div class="q-picker-textfield-label ellipsis" v-html="label"></div>
+    <div class="q-picker-textfield-value ellipsis">{{actualValue}}</div>
     <slot></slot>
   </div>
 </template>
diff --git a/src/vue-components/picker-textfield/picker-textfield.ios.styl b/src/vue-components/picker-textfield/picker-textfield.ios.styl
index 2a245baef3c..68d8f8b26ac 100644
--- a/src/vue-components/picker-textfield/picker-textfield.ios.styl
+++ b/src/vue-components/picker-textfield/picker-textfield.ios.styl
@@ -1,6 +1,6 @@
 $picker-textfield-min-width ?= 100px
 
-.quasar-picker-textfield
+.q-picker-textfield
   display inline-block
   vertical-align middle
   min-width $picker-textfield-min-width
@@ -14,10 +14,10 @@ $picker-textfield-min-width ?= 100px
     right 0
     transform scaleY(.45) scaleX(.85)
     content '\25BC'
-  .quasar-picker-textfield-value
+  .q-picker-textfield-value
     height 1rem
     color $faded
-  .quasar-picker-textfield-label
+  .q-picker-textfield-label
     width 100%
     transition transform .15s ease-in-out, color .3s
     transform scale(.8)
@@ -25,8 +25,8 @@ $picker-textfield-min-width ?= 100px
     transform-origin left top
     color $form-active-color
   &.with-label
-    .quasar-picker-textfield-value
+    .q-picker-textfield-value
       color rgba(0, 0, 0, 0)
   &.active
-    .quasar-picker-textfield-value
+    .q-picker-textfield-value
       color inherit
diff --git a/src/vue-components/picker-textfield/picker-textfield.mat.styl b/src/vue-components/picker-textfield/picker-textfield.mat.styl
index 8527e312058..20c4ad335c9 100644
--- a/src/vue-components/picker-textfield/picker-textfield.mat.styl
+++ b/src/vue-components/picker-textfield/picker-textfield.mat.styl
@@ -1,6 +1,6 @@
 $picker-textfield-min-width ?= 100px
 
-.quasar-picker-textfield
+.q-picker-textfield
   display inline-block
   vertical-align middle
   min-width $picker-textfield-min-width
@@ -14,10 +14,10 @@ $picker-textfield-min-width ?= 100px
     right 0
     transform scaleY(.45) scaleX(.85)
     content '\25BC'
-  .quasar-picker-textfield-value
+  .q-picker-textfield-value
     height 1rem
     color $faded
-  .quasar-picker-textfield-label
+  .q-picker-textfield-label
     width 100%
     color $faded
     transition transform .15s ease-in-out, color .3s
@@ -25,11 +25,11 @@ $picker-textfield-min-width ?= 100px
     pointer-events none
     transform-origin left top
   &.with-label
-    .quasar-picker-textfield-value
+    .q-picker-textfield-value
       color rgba(0, 0, 0, 0)
   &.active
-    .quasar-picker-textfield-value
+    .q-picker-textfield-value
       color inherit
-    .quasar-picker-textfield-label
+    .q-picker-textfield-label
       transform translateY(0) scale(.8)
       color $form-active-color
diff --git a/src/vue-components/popover/Popover.vue b/src/vue-components/popover/Popover.vue
index 89402fbfefe..2bfd8a25313 100644
--- a/src/vue-components/popover/Popover.vue
+++ b/src/vue-components/popover/Popover.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="quasar-popover animate-scale"
+    class="q-popover animate-scale"
     @click.stop
     :style="transformCSS"
   >
diff --git a/src/vue-components/popover/popover.ios.styl b/src/vue-components/popover/popover.ios.styl
index 95800486292..92e6120ad79 100644
--- a/src/vue-components/popover/popover.ios.styl
+++ b/src/vue-components/popover/popover.ios.styl
@@ -1,7 +1,7 @@
 $popover-background   ?= white
 $popover-box-shadow   ?= $shadow-1
 
-.quasar-popover
+.q-popover
   position fixed
   box-shadow $popover-box-shadow
   background $popover-background
diff --git a/src/vue-components/popover/popover.mat.styl b/src/vue-components/popover/popover.mat.styl
index 95800486292..92e6120ad79 100644
--- a/src/vue-components/popover/popover.mat.styl
+++ b/src/vue-components/popover/popover.mat.styl
@@ -1,7 +1,7 @@
 $popover-background   ?= white
 $popover-box-shadow   ?= $shadow-1
 
-.quasar-popover
+.q-popover
   position fixed
   box-shadow $popover-box-shadow
   background $popover-background
diff --git a/src/vue-components/progress-button/ProgressButton.vue b/src/vue-components/progress-button/ProgressButton.vue
index 6953dd0c3ed..e12299d5369 100644
--- a/src/vue-components/progress-button/ProgressButton.vue
+++ b/src/vue-components/progress-button/ProgressButton.vue
@@ -1,22 +1,22 @@
 <template>
-  <button class="quasar-progress-button" :class="{active, indeterminate}">
+  <button class="q-progress-button" :class="{active, indeterminate}">
     <span
       v-if="!indeterminate"
-      class="quasar-progress-button-filler"
-      :class="{'quasar-progress-button-dark-filler': darkFiller}"
+      class="q-progress-button-filler"
+      :class="{'q-progress-button-dark-filler': darkFiller}"
       :style="{width: computedPercentage}"
     ></span>
     <div
-      class="quasar-progress-button-content"
+      class="q-progress-button-content"
       :class="stateClass"
     >
-      <div class="quasar-progress-button-error">
+      <div class="q-progress-button-error">
         <i>{{ errorIcon }}</i>
       </div>
-      <div class="quasar-progress-button-label">
+      <div class="q-progress-button-label">
         <slot></slot>
       </div>
-      <div class="quasar-progress-button-success">
+      <div class="q-progress-button-success">
         <i>{{ successIcon }}</i>
       </div>
     </div>
@@ -53,12 +53,12 @@ export default {
     },
     stateClass () {
       if (this.percentage >= 100) {
-        return 'quasar-progress-button-complete'
+        return 'q-progress-button-complete'
       }
       if (this.percentage < 0) {
-        return 'quasar-progress-button-incomplete'
+        return 'q-progress-button-incomplete'
       }
-      return 'quasar-progress-button-default'
+      return 'q-progress-button-default'
     },
     computedPercentage () {
       if (this.percentage >= 100) {
diff --git a/src/vue-components/progress-button/progress-button.ios.styl b/src/vue-components/progress-button/progress-button.ios.styl
index 14921bf9875..7f33b78cf52 100644
--- a/src/vue-components/progress-button/progress-button.ios.styl
+++ b/src/vue-components/progress-button/progress-button.ios.styl
@@ -1,4 +1,4 @@
-.quasar-progress-button
+.q-progress-button
   overflow hidden
 
   &.active.indeterminate:before
@@ -10,19 +10,19 @@
     bottom 0
     background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)
     background-size 40px 40px
-    animation quasar-progress-stripes 2s linear infinite
+    animation q-progress-stripes 2s linear infinite
 
-.quasar-progress-button-content
+.q-progress-button-content
   transition all .3s
   transform translateY(0)
 
-  &.quasar-progress-button-complete
+  &.q-progress-button-complete
     transform translateY(-3.25rem)
-  &.quasar-progress-button-incomplete
+  &.q-progress-button-incomplete
     transform translateY(2.75rem)
 
-.quasar-progress-button-error,
-.quasar-progress-button-success
+.q-progress-button-error,
+.q-progress-button-success
   position absolute
   text-align center
   top 0
@@ -31,13 +31,13 @@
     min-height 1.275rem
     line-height 1.275rem
 
-.quasar-progress-button-error
+.q-progress-button-error
   transform translateX(-50%) translateY(-3rem)
 
-.quasar-progress-button-success
+.q-progress-button-success
   transform translateX(-50%) translateY(3rem)
 
-.quasar-progress-button-filler
+.q-progress-button-filler
   transition all .3s
   position absolute
   left 0
@@ -45,5 +45,5 @@
   bottom 0
   height 100%
   background rgba(255, 255, 255, .25)
-  &.quasar-progress-button-dark-filler
+  &.q-progress-button-dark-filler
     background rgba(0, 0, 0, .2)
diff --git a/src/vue-components/progress-button/progress-button.mat.styl b/src/vue-components/progress-button/progress-button.mat.styl
index 14921bf9875..7f33b78cf52 100644
--- a/src/vue-components/progress-button/progress-button.mat.styl
+++ b/src/vue-components/progress-button/progress-button.mat.styl
@@ -1,4 +1,4 @@
-.quasar-progress-button
+.q-progress-button
   overflow hidden
 
   &.active.indeterminate:before
@@ -10,19 +10,19 @@
     bottom 0
     background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)
     background-size 40px 40px
-    animation quasar-progress-stripes 2s linear infinite
+    animation q-progress-stripes 2s linear infinite
 
-.quasar-progress-button-content
+.q-progress-button-content
   transition all .3s
   transform translateY(0)
 
-  &.quasar-progress-button-complete
+  &.q-progress-button-complete
     transform translateY(-3.25rem)
-  &.quasar-progress-button-incomplete
+  &.q-progress-button-incomplete
     transform translateY(2.75rem)
 
-.quasar-progress-button-error,
-.quasar-progress-button-success
+.q-progress-button-error,
+.q-progress-button-success
   position absolute
   text-align center
   top 0
@@ -31,13 +31,13 @@
     min-height 1.275rem
     line-height 1.275rem
 
-.quasar-progress-button-error
+.q-progress-button-error
   transform translateX(-50%) translateY(-3rem)
 
-.quasar-progress-button-success
+.q-progress-button-success
   transform translateX(-50%) translateY(3rem)
 
-.quasar-progress-button-filler
+.q-progress-button-filler
   transition all .3s
   position absolute
   left 0
@@ -45,5 +45,5 @@
   bottom 0
   height 100%
   background rgba(255, 255, 255, .25)
-  &.quasar-progress-button-dark-filler
+  &.q-progress-button-dark-filler
     background rgba(0, 0, 0, .2)
diff --git a/src/vue-components/progress/Progress.vue b/src/vue-components/progress/Progress.vue
index 79fa32dd253..47c00b7acba 100644
--- a/src/vue-components/progress/Progress.vue
+++ b/src/vue-components/progress/Progress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="quasar-progress">
+  <div class="q-progress">
     <div :style="{width: model + '%'}"></div>
   </div>
 </template>
diff --git a/src/vue-components/progress/progress.ios.styl b/src/vue-components/progress/progress.ios.styl
index 4608bfde44f..f520638f139 100644
--- a/src/vue-components/progress/progress.ios.styl
+++ b/src/vue-components/progress/progress.ios.styl
@@ -5,7 +5,7 @@ $progress-border-radius        ?= $generic-border-radius
 $progress-margin               ?= .5rem 0 1rem 0
 
 
-.quasar-progress
+.q-progress
   position relative
   height 4px
   display block
@@ -26,7 +26,7 @@ $progress-margin               ?= .5rem 0 1rem 0
 
   &.animate
     > div
-      animation quasar-progress-stripes 2s linear infinite
+      animation q-progress-stripes 2s linear infinite
 
   &.indeterminate > div
     background $progress-default-track-color
@@ -41,9 +41,9 @@ $progress-margin               ?= .5rem 0 1rem 0
       will-change left, right
 
     &:before
-      animation quasar-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
+      animation q-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
     &:after
-      animation quasar-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
+      animation q-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
       animation-delay 1.15s
 
   &.stripe
@@ -55,10 +55,10 @@ $progress-margin               ?= .5rem 0 1rem 0
     &.{$name} > div
       background-color $color
 
-body.desktop .quasar-progress
+body.desktop .q-progress
   height $progress-track-desktop-height
 
-@keyframes quasar-progress-indeterminate
+@keyframes q-progress-indeterminate
   0%
     left -35%
     right 100%
@@ -69,7 +69,7 @@ body.desktop .quasar-progress
     left 100%
     right -90%
 
-@keyframes quasar-progress-indeterminate-short
+@keyframes q-progress-indeterminate-short
   0%
     left -200%
     right 100%
@@ -80,7 +80,7 @@ body.desktop .quasar-progress
     left 107%
     right -8%
 
-@keyframes quasar-progress-stripes
+@keyframes q-progress-stripes
   from
     background-position 40px 0
   to
diff --git a/src/vue-components/progress/progress.mat.styl b/src/vue-components/progress/progress.mat.styl
index 4608bfde44f..f520638f139 100644
--- a/src/vue-components/progress/progress.mat.styl
+++ b/src/vue-components/progress/progress.mat.styl
@@ -5,7 +5,7 @@ $progress-border-radius        ?= $generic-border-radius
 $progress-margin               ?= .5rem 0 1rem 0
 
 
-.quasar-progress
+.q-progress
   position relative
   height 4px
   display block
@@ -26,7 +26,7 @@ $progress-margin               ?= .5rem 0 1rem 0
 
   &.animate
     > div
-      animation quasar-progress-stripes 2s linear infinite
+      animation q-progress-stripes 2s linear infinite
 
   &.indeterminate > div
     background $progress-default-track-color
@@ -41,9 +41,9 @@ $progress-margin               ?= .5rem 0 1rem 0
       will-change left, right
 
     &:before
-      animation quasar-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
+      animation q-progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
     &:after
-      animation quasar-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
+      animation q-progress-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
       animation-delay 1.15s
 
   &.stripe
@@ -55,10 +55,10 @@ $progress-margin               ?= .5rem 0 1rem 0
     &.{$name} > div
       background-color $color
 
-body.desktop .quasar-progress
+body.desktop .q-progress
   height $progress-track-desktop-height
 
-@keyframes quasar-progress-indeterminate
+@keyframes q-progress-indeterminate
   0%
     left -35%
     right 100%
@@ -69,7 +69,7 @@ body.desktop .quasar-progress
     left 100%
     right -90%
 
-@keyframes quasar-progress-indeterminate-short
+@keyframes q-progress-indeterminate-short
   0%
     left -200%
     right 100%
@@ -80,7 +80,7 @@ body.desktop .quasar-progress
     left 107%
     right -8%
 
-@keyframes quasar-progress-stripes
+@keyframes q-progress-stripes
   from
     background-position 40px 0
   to
diff --git a/src/vue-components/radio/Radio.vue b/src/vue-components/radio/Radio.vue
index 7700541a536..a0bdae004c4 100644
--- a/src/vue-components/radio/Radio.vue
+++ b/src/vue-components/radio/Radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="quasar-radio" :class="{disabled: disable}">
+  <label class="q-radio" :class="{disabled: disable}">
     <input type="radio" v-model="model" :value="val" :disabled="disable">
     <div></div>
   </label>
diff --git a/src/vue-components/radio/radio.ios.styl b/src/vue-components/radio/radio.ios.styl
index 0fafdc6c160..600c16c38a4 100644
--- a/src/vue-components/radio/radio.ios.styl
+++ b/src/vue-components/radio/radio.ios.styl
@@ -3,7 +3,7 @@ $radio-picker-size    ?= 12px
 $radio-tick-thickness ?= 2px
 $radio-border         ?= 1px solid $form-darker-color
 
-.quasar-radio
+.q-radio
   display inline-block
   height $radio-size
   width $radio-size
diff --git a/src/vue-components/radio/radio.mat.styl b/src/vue-components/radio/radio.mat.styl
index c2d92718ea4..4946a2ade58 100644
--- a/src/vue-components/radio/radio.mat.styl
+++ b/src/vue-components/radio/radio.mat.styl
@@ -2,7 +2,7 @@ $radio-size         ?= $generic-input-size
 $radio-border-width ?= $generic-input-border-width
 
 
-.quasar-radio
+.q-radio
   display inline-block
   height $checkbox-size
   width $checkbox-size
diff --git a/src/vue-components/range/DoubleRange.vue b/src/vue-components/range/DoubleRange.vue
index 878e682e8eb..eef18905f7a 100644
--- a/src/vue-components/range/DoubleRange.vue
+++ b/src/vue-components/range/DoubleRange.vue
@@ -1,43 +1,43 @@
 <template>
   <div
-    class="quasar-range non-selectable"
+    class="q-range non-selectable"
     :class="{disabled: disable}"
     @mousedown.prevent="__setActive"
     @touchstart.prevent="__setActive"
     @touchend.prevent="__end"
     @touchmove.prevent="__update"
   >
-    <div ref="handle" class="quasar-range-handle-container">
-      <div class="quasar-range-track" ></div>
+    <div ref="handle" class="q-range-handle-container">
+      <div class="q-range-track" ></div>
       <div
         v-if="markers"
-        class="quasar-range-mark"
+        class="q-range-mark"
         v-for="n in ((max - min) / step + 1)"
         :style="{left: (n - 1) * 100 * step / (max - min) + '%'}"
       ></div>
       <div
-        class="quasar-range-track active-track"
+        class="q-range-track active-track"
         :class="{dragging, 'track-draggable': dragRange}"
         :style="{left: percentageMin * 100 + '%', width: activeTrackWidth}"
       ></div>
       <div
-        class="quasar-range-handle range-handle-min"
+        class="q-range-handle range-handle-min"
         :style="{left: percentageMin * 100 + '%'}"
         :class="{dragging, 'handle-at-minimum': value.min === min, undraggable: disableMin}"
       >
         <div
-          class="quasar-range-label"
+          class="q-range-label"
           :class="{'label-always': labelAlways}"
           v-if="label || labelAlways"
         >{{ value.min }}</div>
       </div>
       <div
-        class="quasar-range-handle range-handle-max"
+        class="q-range-handle range-handle-max"
         :style="{left: percentageMax * 100 + '%'}"
         :class="{dragging, 'handle-at-maximum': value.max === max, undraggable: disableMax}"
       >
         <div
-          class="quasar-range-label"
+          class="q-range-label"
           :class="{'label-always': labelAlways}"
           v-if="label || labelAlways"
         >{{ value.max }}</div>
diff --git a/src/vue-components/range/Range.vue b/src/vue-components/range/Range.vue
index d692be0e14e..9ef96a791c7 100644
--- a/src/vue-components/range/Range.vue
+++ b/src/vue-components/range/Range.vue
@@ -1,32 +1,32 @@
 <template>
   <div
-    class="quasar-range non-selectable"
+    class="q-range non-selectable"
     :class="{disabled: disable}"
     @mousedown.prevent="__setActive"
     @touchstart.prevent="__setActive"
     @touchend.prevent="__end"
     @touchmove.prevent="__update"
   >
-    <div ref="handle" class="quasar-range-handle-container">
-      <div class="quasar-range-track"></div>
+    <div ref="handle" class="q-range-handle-container">
+      <div class="q-range-track"></div>
       <div
         v-if="markers"
-        class="quasar-range-mark"
+        class="q-range-mark"
         v-for="n in ((max - min) / step + 1)"
         :style="{left: (n - 1) * 100 * step / (max - min) + '%'}"
       ></div>
       <div
-        class="quasar-range-track active-track"
+        class="q-range-track active-track"
         :style="{width: percentage}"
         :class="{'no-transition': dragging, 'handle-at-minimum': value === min}"
       ></div>
       <div
-        class="quasar-range-handle"
+        class="q-range-handle"
         :style="{left: percentage}"
         :class="{dragging, 'handle-at-minimum': value === min}"
       >
         <div
-          class="quasar-range-label"
+          class="q-range-label"
           :class="{'label-always': labelAlways}"
           v-if="label || labelAlways"
         >{{ value }}</div>
diff --git a/src/vue-components/range/range.ios.styl b/src/vue-components/range/range.ios.styl
index efe5f832adc..f7f924cd236 100644
--- a/src/vue-components/range/range.ios.styl
+++ b/src/vue-components/range/range.ios.styl
@@ -10,7 +10,7 @@ $range-handle-radius       ?= 50%
 $range-handle-box-shadow   ?= 0 1px 3px 1px rgba(0, 0, 0, .4)
 
 
-.quasar-range-track
+.q-range-track
   position absolute
   top 50%
   left 0
@@ -30,7 +30,7 @@ $range-handle-box-shadow   ?= 0 1px 3px 1px rgba(0, 0, 0, .4)
   &.handle-at-maximum
     background solid
 
-.quasar-range-mark
+.q-range-mark
   position absolute
   top 50%
   height $range-mark-height
@@ -38,13 +38,13 @@ $range-handle-box-shadow   ?= 0 1px 3px 1px rgba(0, 0, 0, .4)
   background $range-color
   transform translateX(-50%) translateY(-50%)
 
-.quasar-range-handle-container
+.q-range-handle-container
   position relative
   height 100%
   margin-left ($range-handle-size / 2)
   margin-right ($range-handle-size / 2)
 
-.quasar-range-label
+.q-range-label
   position relative
   top (- $range-handle-size / 1.5)
   left 0
@@ -64,7 +64,7 @@ $range-handle-box-shadow   ?= 0 1px 3px 1px rgba(0, 0, 0, .4)
     opacity 1
     transform translateY(-50%) scale(.7)
 
-.quasar-range-handle
+.q-range-handle
   position absolute
   top 50%
   transform translate3d(-50%, -50%, 0)
@@ -79,24 +79,24 @@ $range-handle-box-shadow   ?= 0 1px 3px 1px rgba(0, 0, 0, .4)
   &.dragging
     transform translate3d(-50%, -50%, 0)
     transition opacity .3s ease, transform .3s ease
-    .quasar-range-label
+    .q-range-label
       opacity 1
       transform translateY(-50%)
   &.undraggable
     background lighten($range-color, 20%)
     cursor pointer
 
-.quasar-range
+.q-range
   height $range-height
   width 100%
   cursor pointer
 
   for $name, $color in $colors
-    &.{$name} .quasar-range-track.active-track
+    &.{$name} .q-range-track.active-track
       background $color
 
   &.has-error
-    .quasar-range-track
+    .q-range-track
       background alpha($has-error, 50%)
-    .quasar-range-handle, .quasar-range-track.active-track
+    .q-range-handle, .q-range-track.active-track
       background lighten($has-error, 20%)
diff --git a/src/vue-components/range/range.mat.styl b/src/vue-components/range/range.mat.styl
index 2c9c49f0a17..8bb30280cc2 100644
--- a/src/vue-components/range/range.mat.styl
+++ b/src/vue-components/range/range.mat.styl
@@ -10,7 +10,7 @@ $range-handle-radius       ?= 50%
 
 
 
-.quasar-range-track
+.q-range-track
   position absolute
   top 50%
   left 0
@@ -30,7 +30,7 @@ $range-handle-radius       ?= 50%
   &.handle-at-maximum
     background solid
 
-.quasar-range-mark
+.q-range-mark
   position absolute
   top 50%
   height $range-mark-height
@@ -38,13 +38,13 @@ $range-handle-radius       ?= 50%
   background $range-color
   transform translateX(-50%) translateY(-50%)
 
-.quasar-range-handle-container
+.q-range-handle-container
   position relative
   height 100%
   margin-left ($range-handle-size / 2)
   margin-right ($range-handle-size / 2)
 
-.quasar-range-label
+.q-range-label
   position relative
   top - $range-handle-size * 0.75
   left -25%
@@ -73,10 +73,10 @@ $range-handle-radius       ?= 50%
     opacity 1
     transform translateY(-50%) scale(1)
 
-.quasar-range-handle.undraggable>.quasar-range-label
+.q-range-handle.undraggable>.q-range-label
   top (- $range-handle-size - ($range-handle-size * 0.75))
 
-.quasar-range-handle
+.q-range-handle
   position absolute
   top 50%
   transform translate3d(-50%, -50%, 0) scale(.67)
@@ -89,7 +89,7 @@ $range-handle-radius       ?= 50%
   &.dragging
     transform translate3d(-50%, -50%, 0) scale(1)
     transition opacity .3s ease, transform .3s ease
-    .quasar-range-label
+    .q-range-label
       opacity 1
       transform translateY(-50%) scale(1)
   &:not(.undraggable)
@@ -97,19 +97,19 @@ $range-handle-radius       ?= 50%
     &.handle-at-minimum
       background white
       border 2px solid $range-color
-      .quasar-range-label
+      .q-range-label
         color black
         &:before
           background $range-color
   &.undraggable
     background transparent
     &.handle-at-minimum
-      .quasar-range-label
+      .q-range-label
         color black
         &:before
           background $range-color
 
-.quasar-range-handle.undraggable:before
+.q-range-handle.undraggable:before
   content: ''
   display: block
   width 0
@@ -132,25 +132,25 @@ $range-handle-radius       ?= 50%
 .range-handle-max.handle-at-maximum.undraggable:before
     // border-right-color $range-color
 
-.quasar-range
+.q-range
   height $range-height
   width 100%
   cursor pointer
 
   for $name, $color in $colors
     &.{$name}
-      .quasar-range-track.active-track,
-      .quasar-range-handle:not(.handle-at-minimum)
+      .q-range-track.active-track,
+      .q-range-handle:not(.handle-at-minimum)
         background $color
-        .quasar-range-label
+        .q-range-label
           &:before
             background $color
           if luminosity($color) > .3
             color black
 
   &.has-error
-    .quasar-range-track
+    .q-range-track
       background alpha($has-error, 50%)
-    .quasar-range-track.active-track,
-    .quasar-range-handle:not(.handle-at-minimum)
+    .q-range-track.active-track,
+    .q-range-handle:not(.handle-at-minimum)
       background $has-error
diff --git a/src/vue-components/rating/Rating.vue b/src/vue-components/rating/Rating.vue
index d869a9fb2b7..cdfa078b211 100644
--- a/src/vue-components/rating/Rating.vue
+++ b/src/vue-components/rating/Rating.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="quasar-rating" :class="{disabled: disable}">
+  <div class="q-rating" :class="{disabled: disable}">
     <i
       v-for="index in max"
       :class="{active: (!mouseModel && model >= index) || (mouseModel && mouseModel >= index)}"
diff --git a/src/vue-components/rating/rating.ios.styl b/src/vue-components/rating/rating.ios.styl
index 58ad209a881..4223c990c4a 100644
--- a/src/vue-components/rating/rating.ios.styl
+++ b/src/vue-components/rating/rating.ios.styl
@@ -2,7 +2,7 @@ $rating-grade-color        ?= $grey-4
 $rating-active-grade-color ?= $yellow
 $rating-shadow             ?= $shadow-1
 
-.quasar-rating
+.q-rating
   i
     color $rating-grade-color
     text-shadow $rating-shadow
diff --git a/src/vue-components/rating/rating.mat.styl b/src/vue-components/rating/rating.mat.styl
index 58ad209a881..4223c990c4a 100644
--- a/src/vue-components/rating/rating.mat.styl
+++ b/src/vue-components/rating/rating.mat.styl
@@ -2,7 +2,7 @@ $rating-grade-color        ?= $grey-4
 $rating-active-grade-color ?= $yellow
 $rating-shadow             ?= $shadow-1
 
-.quasar-rating
+.q-rating
   i
     color $rating-grade-color
     text-shadow $rating-shadow
diff --git a/src/vue-components/search/Search.vue b/src/vue-components/search/Search.vue
index b6b06702d16..f0dc3ec94d1 100644
--- a/src/vue-components/search/Search.vue
+++ b/src/vue-components/search/Search.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="quasar-search"
-    :class="{'quasar-search-centered': centered, disabled: disable, readonly}"
+    class="q-search"
+    :class="{'q-search-centered': centered, disabled: disable, readonly}"
   >
-    <div class="quasar-search-input-container">
-      <button class="quasar-search-icon">
+    <div class="q-search-input-container">
+      <button class="q-search-icon">
         <i>{{ icon }}</i>
         <span v-show="$quasar.theme === 'ios' && this.value === '' && !hasText">{{placeholder}}</span>
       </button>
       <input
         type="text"
-        class="quasar-search-input no-style"
+        class="q-search-input no-style"
         :placeholder="$quasar.theme === 'mat' ? placeholder : ''"
         v-model="model"
         @focus="focus()"
@@ -19,7 +19,7 @@
         :readonly="readonly"
       >
       <button
-        class="quasar-search-clear"
+        class="q-search-clear"
         @click="clear()"
         :class="{hidden: this.model === ''}"
       >
diff --git a/src/vue-components/search/search.ios.styl b/src/vue-components/search/search.ios.styl
index 707049cc15a..e7690f120e9 100644
--- a/src/vue-components/search/search.ios.styl
+++ b/src/vue-components/search/search.ios.styl
@@ -1,10 +1,10 @@
-.quasar-search-input-container
+.q-search-input-container
   position relative
   flex-shrink 1
   width 100%
   overflow hidden
 
-.quasar-search-icon, .quasar-search-clear
+.q-search-icon, .q-search-clear
   position absolute
   top 0
   padding 0
@@ -14,16 +14,16 @@
   height 100%
   color $grey-5
 
-.quasar-search-icon
+.q-search-icon
   left 9px
   transition all 300ms ease
   pointer-events none
   width 0
   text-align center
-.quasar-search-clear
+.q-search-clear
   right 13px
 
-.quasar-search-input
+.q-search-input
   padding 0 35px
   height auto
   border-radius $generic-border-radius
@@ -37,7 +37,7 @@
   background rgba(0, 0, 0, .08)
   transition all 300ms ease
 
-.quasar-search
+.q-search
   display flex
   align-items center
   padding 3px 8px
@@ -47,24 +47,24 @@
 
   for $name, $color in $colors
     &.{$name}
-      .quasar-search-input
+      .q-search-input
         background active-color($color)
       if $name != 'light' && $name != 'white'
-        .quasar-search-input, .quasar-search-icon
+        .q-search-input, .q-search-icon
           color white
 
-  &.quasar-search-centered
-    .quasar-search-icon
+  &.q-search-centered
+    .q-search-icon
       width 100%
 
   &.has-error
     color opposite-non-color($has-error)
-    .quasar-search-input
+    .q-search-input
       background $has-error
 
-body.desktop .quasar-search
+body.desktop .q-search
   for $name, $color in $colors
-    &.{$name} .quasar-search-input:hover
+    &.{$name} .q-search-input:hover
       background light-active-color($color)
-  &.has-error .quasar-search-input:hover
+  &.has-error .q-search-input:hover
       background light-active-color($has-error)
diff --git a/src/vue-components/search/search.mat.styl b/src/vue-components/search/search.mat.styl
index 971097916e6..86f791ec9ef 100644
--- a/src/vue-components/search/search.mat.styl
+++ b/src/vue-components/search/search.mat.styl
@@ -1,9 +1,9 @@
-.quasar-search-input-container
+.q-search-input-container
   position relative
   flex-shrink 1
   width 100%
 
-.quasar-search-icon, .quasar-search-clear
+.q-search-icon, .q-search-clear
   position absolute
   top 0
   padding 0
@@ -12,13 +12,13 @@
   width 12px
   height 100%
 
-.quasar-search-icon
+.q-search-icon
   left 10px
   pointer-events none
-.quasar-search-clear
+.q-search-clear
   right 15px
 
-.quasar-search-input
+.q-search-input
   padding 0 45px
   height auto
   border-radius $generic-border-radius
@@ -32,7 +32,7 @@
   background white
   transition all .2s ease
 
-.quasar-search
+.q-search
   display flex
   align-items center
   padding 3px
@@ -46,7 +46,7 @@
     &.{$name}
       if $name != 'light' && $name != 'white'
         color white
-      .quasar-search-input
+      .q-search-input
         background active-color($color)
         if $name != 'light' && $name != 'white'
           color white
@@ -59,12 +59,12 @@
 
   &.has-error
     color opposite-non-color($has-error)
-    .quasar-search-input
+    .q-search-input
       background $has-error
 
-body.desktop .quasar-search
+body.desktop .q-search
   for $name, $color in $colors
-    &.{$name} .quasar-search-input:hover
+    &.{$name} .q-search-input:hover
       background light-active-color($color)
-  &.has-error .quasar-search-input:hover
+  &.has-error .q-search-input:hover
       background light-active-color($has-error)
diff --git a/src/vue-components/select/DialogSelect.vue b/src/vue-components/select/DialogSelect.vue
index 25c4476193f..459e7ab33c9 100644
--- a/src/vue-components/select/DialogSelect.vue
+++ b/src/vue-components/select/DialogSelect.vue
@@ -1,12 +1,12 @@
 <template>
-  <quasar-picker-textfield
+  <q-picker-textfield
     :disable="disable"
     :readonly="readonly"
     :label="label"
     :placeholder="placeholder"
     :value="actualValue"
     @click.native="pick()"
-  ></quasar-picker-textfield>
+  ></q-picker-textfield>
 </template>
 
 <script>
diff --git a/src/vue-components/select/Select.vue b/src/vue-components/select/Select.vue
index 99783274b88..f57c2af5823 100644
--- a/src/vue-components/select/Select.vue
+++ b/src/vue-components/select/Select.vue
@@ -1,23 +1,23 @@
 <template>
-  <quasar-picker-textfield
+  <q-picker-textfield
     :disable="disable"
     :readonly="readonly"
     :label="label"
     :placeholder="placeholder"
     :value="actualValue"
   >
-    <quasar-popover ref="popover" :disable="disable || readonly">
-      <div class="quasar-select-popover list highlight">
+    <q-popover ref="popover" :disable="disable || readonly">
+      <div class="q-select-popover list highlight">
         <label v-if="type === 'radio'" v-for="radio in options" class="item" @click="close">
           <div class="item-primary">
-            <quasar-radio v-model="model" :val="radio.value"></quasar-radio>
+            <q-radio v-model="model" :val="radio.value"></q-radio>
           </div>
           <div class="item-content" v-html="radio.label"></div>
         </label>
 
         <label v-if="type === 'checkbox'" v-for="(checkbox, index) in options" class="item">
           <div class="item-primary">
-            <quasar-checkbox :value="optModel[index]" @input="toggleValue(checkbox.value)"></quasar-checkbox>
+            <q-checkbox :value="optModel[index]" @input="toggleValue(checkbox.value)"></q-checkbox>
           </div>
           <div class="item-content" v-html="checkbox.label"></div>
         </label>
@@ -25,12 +25,12 @@
         <label v-if="type === 'toggle'" v-for="(toggle, index) in options" class="item">
           <div class="item-content has-secondary" v-html="toggle.label"></div>
           <div class="item-secondary">
-            <quasar-toggle :value="optModel[index]" @input="toggleValue(toggle.value)"></quasar-toggle>
+            <q-toggle :value="optModel[index]" @input="toggleValue(toggle.value)"></q-toggle>
           </div>
         </label>
       </div>
-    </quasar-popover>
-  </quasar-picker-textfield>
+    </q-popover>
+  </q-picker-textfield>
 </template>
 
 <script>
diff --git a/src/vue-components/select/select.ios.styl b/src/vue-components/select/select.ios.styl
index 9727b22f7f3..f2820c5c72e 100644
--- a/src/vue-components/select/select.ios.styl
+++ b/src/vue-components/select/select.ios.styl
@@ -1,10 +1,10 @@
-.quasar-select-container
+.q-select-container
   display inline-block
   vertical-align middle
 
-.quasar-select
+.q-select
   display inline-block
   height 2.1875rem
 
-.quasar-select-popover label
+.q-select-popover label
   white-space nowrap
diff --git a/src/vue-components/select/select.mat.styl b/src/vue-components/select/select.mat.styl
index 9727b22f7f3..f2820c5c72e 100644
--- a/src/vue-components/select/select.mat.styl
+++ b/src/vue-components/select/select.mat.styl
@@ -1,10 +1,10 @@
-.quasar-select-container
+.q-select-container
   display inline-block
   vertical-align middle
 
-.quasar-select
+.q-select
   display inline-block
   height 2.1875rem
 
-.quasar-select-popover label
+.q-select-popover label
   white-space nowrap
diff --git a/src/vue-components/slider/Slider.vue b/src/vue-components/slider/Slider.vue
index 994090fa1a6..7cf05a7e22b 100644
--- a/src/vue-components/slider/Slider.vue
+++ b/src/vue-components/slider/Slider.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="quasar-slider" :class="{fullscreen: inFullscreen}">
-    <div class="quasar-slider-inner">
+  <div class="q-slider" :class="{fullscreen: inFullscreen}">
+    <div class="q-slider-inner">
       <div
         ref="track"
-        class="quasar-slider-track"
+        class="q-slider-track"
         :class="{'with-arrows': arrows, 'with-toolbar': toolbar}"
         v-touch-pan.horizontal="__pan"
       >
@@ -11,21 +11,21 @@
       </div>
       <div
         v-if="arrows"
-        class="quasar-slider-left-button row items-center justify-center"
+        class="q-slider-left-button row items-center justify-center"
         :class="{hidden: slide === 0}"
       >
         <i @click="goToSlide(slide - 1)">keyboard_arrow_left</i>
       </div>
       <div
         v-if="arrows"
-        class="quasar-slider-right-button row items-center justify-center"
+        class="q-slider-right-button row items-center justify-center"
         :class="{hidden: slide === slidesNumber - 1}"
         @click="goToSlide(slide + 1)"
       >
         <i>keyboard_arrow_right</i>
       </div>
-      <div v-if="toolbar" class="quasar-slider-toolbar row items-center justify-end">
-        <div class="quasar-slider-dots auto row items-center justify-center">
+      <div v-if="toolbar" class="q-slider-toolbar row items-center justify-end">
+        <div class="q-slider-dots auto row items-center justify-center">
           <i
             v-if="dots"
             v-for="n in slidesNumber"
diff --git a/src/vue-components/slider/slider.ios.styl b/src/vue-components/slider/slider.ios.styl
index 979e649f071..f4344193daf 100644
--- a/src/vue-components/slider/slider.ios.styl
+++ b/src/vue-components/slider/slider.ios.styl
@@ -8,16 +8,16 @@ $slider-button-size      ?= 1.5rem
 $slider-dots-size        ?= .8rem
 
 
-.quasar-slider
+.q-slider
   overflow hidden
   &.fullscreen
     z-index $z-absolute
 
-.quasar-slider-inner
+.q-slider-inner
   position relative
   height 100%
 
-.quasar-slider-track
+.q-slider-track
   white-space nowrap
   padding 0
   margin 0
@@ -46,8 +46,8 @@ $slider-dots-size        ?= .8rem
     > div
       padding-bottom ($slider-padding + 1rem)
 
-.quasar-slider-left-button,
-.quasar-slider-right-button
+.q-slider-left-button,
+.q-slider-right-button
   position absolute
   top 0
   bottom 0
@@ -65,12 +65,12 @@ $slider-dots-size        ?= .8rem
     transition opacity .3s
     &:hover
       opacity $slider-opacity-active
-.quasar-slider-left-button
+.q-slider-left-button
   left 0
-.quasar-slider-right-button
+.q-slider-right-button
   right 0
 
-.quasar-slider-toolbar
+.q-slider-toolbar
   position absolute
   bottom 0
   left 0
@@ -83,5 +83,5 @@ $slider-dots-size        ?= .8rem
     cursor pointer
     margin 0 .5rem
     font-size $slider-button-size
-  .quasar-slider-dots i
+  .q-slider-dots i
     font-size $slider-dots-size
diff --git a/src/vue-components/slider/slider.mat.styl b/src/vue-components/slider/slider.mat.styl
index 979e649f071..f4344193daf 100644
--- a/src/vue-components/slider/slider.mat.styl
+++ b/src/vue-components/slider/slider.mat.styl
@@ -8,16 +8,16 @@ $slider-button-size      ?= 1.5rem
 $slider-dots-size        ?= .8rem
 
 
-.quasar-slider
+.q-slider
   overflow hidden
   &.fullscreen
     z-index $z-absolute
 
-.quasar-slider-inner
+.q-slider-inner
   position relative
   height 100%
 
-.quasar-slider-track
+.q-slider-track
   white-space nowrap
   padding 0
   margin 0
@@ -46,8 +46,8 @@ $slider-dots-size        ?= .8rem
     > div
       padding-bottom ($slider-padding + 1rem)
 
-.quasar-slider-left-button,
-.quasar-slider-right-button
+.q-slider-left-button,
+.q-slider-right-button
   position absolute
   top 0
   bottom 0
@@ -65,12 +65,12 @@ $slider-dots-size        ?= .8rem
     transition opacity .3s
     &:hover
       opacity $slider-opacity-active
-.quasar-slider-left-button
+.q-slider-left-button
   left 0
-.quasar-slider-right-button
+.q-slider-right-button
   right 0
 
-.quasar-slider-toolbar
+.q-slider-toolbar
   position absolute
   bottom 0
   left 0
@@ -83,5 +83,5 @@ $slider-dots-size        ?= .8rem
     cursor pointer
     margin 0 .5rem
     font-size $slider-button-size
-  .quasar-slider-dots i
+  .q-slider-dots i
     font-size $slider-dots-size
diff --git a/src/vue-components/spinner/spinner.ios.styl b/src/vue-components/spinner/spinner.ios.styl
index 65f6f734b70..e67108fe3ac 100644
--- a/src/vue-components/spinner/spinner.ios.styl
+++ b/src/vue-components/spinner/spinner.ios.styl
@@ -1,2 +1,2 @@
-.quasar-spinner
+.q-spinner
   vertical-align middle
diff --git a/src/vue-components/spinner/spinner.mat.styl b/src/vue-components/spinner/spinner.mat.styl
index 65f6f734b70..e67108fe3ac 100644
--- a/src/vue-components/spinner/spinner.mat.styl
+++ b/src/vue-components/spinner/spinner.mat.styl
@@ -1,2 +1,2 @@
-.quasar-spinner
+.q-spinner
   vertical-align middle
diff --git a/src/vue-components/spinner/svg-spinners/audio.vue b/src/vue-components/spinner/svg-spinners/audio.vue
index 0673915bd24..0a7f1c82e0d 100644
--- a/src/vue-components/spinner/svg-spinners/audio.vue
+++ b/src/vue-components/spinner/svg-spinners/audio.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1 0 0 -1 0 80)"><rect width="10" height="20" rx="3"><animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"/></rect><rect x="15" width="10" height="80" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"/></rect><rect x="30" width="10" height="50" rx="3"><animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"/></rect><rect x="45" width="10" height="30" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"/></rect></g></svg>
+  <svg class="q-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1 0 0 -1 0 80)"><rect width="10" height="20" rx="3"><animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"/></rect><rect x="15" width="10" height="80" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"/></rect><rect x="30" width="10" height="50" rx="3"><animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"/></rect><rect x="45" width="10" height="30" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"/></rect></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/ball.vue b/src/vue-components/spinner/svg-spinners/ball.vue
index 57e9e3bd2e8..a9f84dd0bb2 100644
--- a/src/vue-components/spinner/svg-spinners/ball.vue
+++ b/src/vue-components/spinner/svg-spinners/ball.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :stroke="color" :width="size" :height="size" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="5" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite"/><animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="27" cy="5" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite"/><animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="49" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite"/><animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite"/></circle></g></svg>
+  <svg class="q-spinner" :stroke="color" :width="size" :height="size" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="5" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite"/><animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="27" cy="5" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite"/><animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="49" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite"/><animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite"/></circle></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/bars.vue b/src/vue-components/spinner/svg-spinners/bars.vue
index 64d51bd63ca..b36b5a0a82f 100644
--- a/src/vue-components/spinner/svg-spinners/bars.vue
+++ b/src/vue-components/spinner/svg-spinners/bars.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg"><rect y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect><rect x="30" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect><rect x="60" width="15" height="140" rx="6"><animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect><rect x="90" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect><rect x="120" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect></svg>
+  <svg class="q-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg"><rect y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect><rect x="30" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect><rect x="60" width="15" height="140" rx="6"><animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect><rect x="90" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect><rect x="120" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"/><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"/></rect></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/circles.vue b/src/vue-components/spinner/svg-spinners/circles.vue
index eb6673cc1e5..9d716c442f5 100644
--- a/src/vue-components/spinner/svg-spinners/circles.vue
+++ b/src/vue-components/spinner/svg-spinners/circles.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg"><path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="-360 67 67" dur="2.5s" repeatCount="indefinite"/></path><path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="360 67 67" dur="8s" repeatCount="indefinite"/></path></svg>
+  <svg class="q-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 135 135" xmlns="http://www.w3.org/2000/svg"><path d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="-360 67 67" dur="2.5s" repeatCount="indefinite"/></path><path d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"><animateTransform attributeName="transform" type="rotate" from="0 67 67" to="360 67 67" dur="8s" repeatCount="indefinite"/></path></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/dots.vue b/src/vue-components/spinner/svg-spinners/dots.vue
index 9811e9ef7b9..744c0d30a91 100644
--- a/src/vue-components/spinner/svg-spinners/dots.vue
+++ b/src/vue-components/spinner/svg-spinners/dots.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="60" cy="15" r="9" fill-opacity=".3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from=".5" to=".5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"/></circle></svg>
+  <svg class="q-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="60" cy="15" r="9" fill-opacity=".3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from=".5" to=".5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"/><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"/></circle></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/facebook.vue b/src/vue-components/spinner/svg-spinners/facebook.vue
index 6489660c2e1..9811c3101d9 100644
--- a/src/vue-components/spinner/svg-spinners/facebook.vue
+++ b/src/vue-components/spinner/svg-spinners/facebook.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :width="size" :height="size" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><g transform="translate(20 50)"><rect x="-10" y="-30" width="20" height="60" :fill="color" opacity="0.6"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(50 50)"><rect x="-10" y="-30" width="20" height="60" :fill="color" opacity="0.8"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.1s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(80 50)"><rect x="-10" y="-30" width="20" height="60" :fill="color" opacity="0.9"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.2s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g></svg>
+  <svg class="q-spinner" :width="size" :height="size" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><g transform="translate(20 50)"><rect x="-10" y="-30" width="20" height="60" :fill="color" opacity="0.6"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(50 50)"><rect x="-10" y="-30" width="20" height="60" :fill="color" opacity="0.8"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.1s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(80 50)"><rect x="-10" y="-30" width="20" height="60" :fill="color" opacity="0.9"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.2s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/gears.vue b/src/vue-components/spinner/svg-spinners/gears.vue
index cc395d31efc..fafec105567 100644
--- a/src/vue-components/spinner/svg-spinners/gears.vue
+++ b/src/vue-components/spinner/svg-spinners/gears.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-20,-20)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" :fill="color"><animateTransform attributeName="transform" type="rotate" from="90 50 50" to="0 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g><g transform="translate(20,20) rotate(15 50 50)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" :fill="color"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="90 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g></svg>
+  <svg class="q-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-20,-20)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" :fill="color"><animateTransform attributeName="transform" type="rotate" from="90 50 50" to="0 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g><g transform="translate(20,20) rotate(15 50 50)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" :fill="color"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="90 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/grid.vue b/src/vue-components/spinner/svg-spinners/grid.vue
index 7af6b57f597..5e7979f0a8b 100644
--- a/src/vue-components/spinner/svg-spinners/grid.vue
+++ b/src/vue-components/spinner/svg-spinners/grid.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg"><circle cx="12.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5"><animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="52.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="52.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="92.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="92.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="12.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="52.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="92.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle></svg>
+  <svg class="q-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg"><circle cx="12.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5"><animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="52.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="52.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="92.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="92.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="12.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="52.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="92.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/></circle></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/hearts.vue b/src/vue-components/spinner/svg-spinners/hearts.vue
index f87b71ddea7..b5cea4e4c83 100644
--- a/src/vue-components/spinner/svg-spinners/hearts.vue
+++ b/src/vue-components/spinner/svg-spinners/hearts.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg"><path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.593-2.32 17.308 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"/></svg>
+  <svg class="q-spinner" :fill="color" :width="size" :height="size" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg"><path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.593-2.32 17.308 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"/></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"/></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/hourglass.vue b/src/vue-components/spinner/svg-spinners/hourglass.vue
index ccdce032470..951f0292c6c 100644
--- a/src/vue-components/spinner/svg-spinners/hourglass.vue
+++ b/src/vue-components/spinner/svg-spinners/hourglass.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :width="size" :height="size"  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" :stroke="color" stroke-width="5" stroke-miterlimit="10" d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z" class="glass"></path><clipPath id="uil-hourglass-clip1"><rect x="15" y="20" width="70" height="25" class="clip"><animate attributeName="height" from="25" to="0" dur="1s" repeatCount="indefinite" vlaues="25;0;0" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="20" to="45" dur="1s" repeatCount="indefinite" vlaues="20;45;45" keyTimes="0;0.5;1"></animate></rect></clipPath><clipPath id="uil-hourglass-clip2"><rect x="15" y="55" width="70" height="25" class="clip"><animate attributeName="height" from="0" to="25" dur="1s" repeatCount="indefinite" vlaues="0;25;25" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="80" to="55" dur="1s" repeatCount="indefinite" vlaues="80;55;55" keyTimes="0;0.5;1"></animate></rect></clipPath><path d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z" clip-path="url(#uil-hourglass-clip1)" :fill="color" class="sand"></path><path d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z" clip-path="url(#uil-hourglass-clip2)" :fill="color" class="sand"></path><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" repeatCount="indefinite" dur="1s" values="0 50 50;0 50 50;180 50 50" keyTimes="0;0.7;1"></animateTransform></g></svg>
+  <svg class="q-spinner" :width="size" :height="size"  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" :stroke="color" stroke-width="5" stroke-miterlimit="10" d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z" class="glass"></path><clipPath id="uil-hourglass-clip1"><rect x="15" y="20" width="70" height="25" class="clip"><animate attributeName="height" from="25" to="0" dur="1s" repeatCount="indefinite" vlaues="25;0;0" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="20" to="45" dur="1s" repeatCount="indefinite" vlaues="20;45;45" keyTimes="0;0.5;1"></animate></rect></clipPath><clipPath id="uil-hourglass-clip2"><rect x="15" y="55" width="70" height="25" class="clip"><animate attributeName="height" from="0" to="25" dur="1s" repeatCount="indefinite" vlaues="0;25;25" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="80" to="55" dur="1s" repeatCount="indefinite" vlaues="80;55;55" keyTimes="0;0.5;1"></animate></rect></clipPath><path d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z" clip-path="url(#uil-hourglass-clip1)" :fill="color" class="sand"></path><path d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z" clip-path="url(#uil-hourglass-clip2)" :fill="color" class="sand"></path><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" repeatCount="indefinite" dur="1s" values="0 50 50;0 50 50;180 50 50" keyTimes="0;0.7;1"></animateTransform></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/infinity.vue b/src/vue-components/spinner/svg-spinners/infinity.vue
index e72f07a6214..aa8f8d6d6df 100644
--- a/src/vue-components/spinner/svg-spinners/infinity.vue
+++ b/src/vue-components/spinner/svg-spinners/infinity.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><path d="M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z" fill="none" :stroke="color" stroke-width="8" stroke-dasharray='10.691205342610678 10.691205342610678' stroke-dashoffset="0"><animate attributeName="stroke-dashoffset" from="0" to="21.382410685221355" begin="0" dur="2s" repeatCount="indefinite" fill="freeze"></animate></path></svg>
+  <svg class="q-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><path d="M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z" fill="none" :stroke="color" stroke-width="8" stroke-dasharray='10.691205342610678 10.691205342610678' stroke-dashoffset="0"><animate attributeName="stroke-dashoffset" from="0" to="21.382410685221355" begin="0" dur="2s" repeatCount="indefinite" fill="freeze"></animate></path></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/ios.vue b/src/vue-components/spinner/svg-spinners/ios.vue
index 7f794b398f5..5bfcceef855 100644
--- a/src/vue-components/spinner/svg-spinners/ios.vue
+++ b/src/vue-components/spinner/svg-spinners/ios.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(0 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(30 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(60 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(90 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(120 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(150 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(180 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(210 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(240 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(270 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(300 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(330 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
+  <svg class="q-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(0 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(30 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(60 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(90 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(120 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(150 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(180 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(210 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(240 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(270 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(300 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' :fill='color' transform='rotate(330 50 50) translate(0 -30)'><animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/oval.vue b/src/vue-components/spinner/svg-spinners/oval.vue
index cbc40b3f400..c152606a6d4 100644
--- a/src/vue-components/spinner/svg-spinners/oval.vue
+++ b/src/vue-components/spinner/svg-spinners/oval.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :stroke="color" :width="size" :height="size" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></svg>
+  <svg class="q-spinner" :stroke="color" :width="size" :height="size" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle stroke-opacity=".5" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/pie.vue b/src/vue-components/spinner/svg-spinners/pie.vue
index f9c1dcb1efe..944f3692490 100644
--- a/src/vue-components/spinner/svg-spinners/pie.vue
+++ b/src/vue-components/spinner/svg-spinners/pie.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><path d="M0 50A50 50 0 0 1 50 0L50 50L0 50" :fill="color" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="0.8s" repeatCount="indefinite"></animateTransform></path><path d="M50 0A50 50 0 0 1 100 50L50 50L50 0" :fill="color" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.6s" repeatCount="indefinite"></animateTransform></path><path d="M100 50A50 50 0 0 1 50 100L50 50L100 50" :fill="color" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.4s" repeatCount="indefinite"></animateTransform></path><path d="M50 100A50 50 0 0 1 0 50L50 50L50 100" :fill="color" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3.2s" repeatCount="indefinite"></animateTransform></path></svg>
+  <svg class="q-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><path d="M0 50A50 50 0 0 1 50 0L50 50L0 50" :fill="color" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="0.8s" repeatCount="indefinite"></animateTransform></path><path d="M50 0A50 50 0 0 1 100 50L50 50L50 0" :fill="color" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.6s" repeatCount="indefinite"></animateTransform></path><path d="M100 50A50 50 0 0 1 50 100L50 50L100 50" :fill="color" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.4s" repeatCount="indefinite"></animateTransform></path><path d="M50 100A50 50 0 0 1 0 50L50 50L50 100" :fill="color" opacity="0.5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3.2s" repeatCount="indefinite"></animateTransform></path></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/puff.vue b/src/vue-components/spinner/svg-spinners/puff.vue
index d71e01ef211..72be49c2e02 100644
--- a/src/vue-components/spinner/svg-spinners/puff.vue
+++ b/src/vue-components/spinner/svg-spinners/puff.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :stroke="color" :width="size" :height="size" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-width="2"><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/></circle><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/></circle></g></svg>
+  <svg class="q-spinner" :stroke="color" :width="size" :height="size" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke-width="2"><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/></circle><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite"/></circle></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/radio.vue b/src/vue-components/spinner/svg-spinners/radio.vue
index ba8939a5b9a..f8c1d7f11a6 100644
--- a/src/vue-components/spinner/svg-spinners/radio.vue
+++ b/src/vue-components/spinner/svg-spinners/radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><g transform="scale(0.55)"><circle cx="30" cy="150" r="30" :fill="color"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></circle><path d="M90,150h30c0-49.7-40.3-90-90-90v30C63.1,90,90,116.9,90,150z" :fill="color"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0.1" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></path><path d="M150,150h30C180,67.2,112.8,0,30,0v30C96.3,30,150,83.7,150,150z" :fill="color"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0.2" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></path></g></svg>
+  <svg class="q-spinner" :width="size" :height="size" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"><g transform="scale(0.55)"><circle cx="30" cy="150" r="30" :fill="color"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></circle><path d="M90,150h30c0-49.7-40.3-90-90-90v30C63.1,90,90,116.9,90,150z" :fill="color"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0.1" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></path><path d="M150,150h30C180,67.2,112.8,0,30,0v30C96.3,30,150,83.7,150,150z" :fill="color"><animate attributeName="opacity" from="0" to="1" dur="1s" begin="0.2" repeatCount="indefinite" keyTimes="0;0.5;1" values="0;1;1"></animate></path></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/rings.vue b/src/vue-components/spinner/svg-spinners/rings.vue
index bbbd6b88d24..5cfdc0922c0 100644
--- a/src/vue-components/spinner/svg-spinners/rings.vue
+++ b/src/vue-components/spinner/svg-spinners/rings.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :stroke="color" :width="size" :height="size" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2"><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="1.5s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"/><animate attributeName="stroke-width" begin="1.5s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="3s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"/><animate attributeName="stroke-width" begin="3s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="22" cy="22" r="8"><animate attributeName="r" begin="0s" dur="1.5s" values="6;1;2;3;4;5;6" calcMode="linear" repeatCount="indefinite"/></circle></g></svg>
+  <svg class="q-spinner" :stroke="color" :width="size" :height="size" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2"><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="1.5s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"/><animate attributeName="stroke-width" begin="1.5s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"/><animate attributeName="stroke-opacity" begin="3s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"/><animate attributeName="stroke-width" begin="3s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"/></circle><circle cx="22" cy="22" r="8"><animate attributeName="r" begin="0s" dur="1.5s" values="6;1;2;3;4;5;6" calcMode="linear" repeatCount="indefinite"/></circle></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/spinner/svg-spinners/tail.vue b/src/vue-components/spinner/svg-spinners/tail.vue
index 50e8f863dfb..2bd6ad371d6 100644
--- a/src/vue-components/spinner/svg-spinners/tail.vue
+++ b/src/vue-components/spinner/svg-spinners/tail.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg class="quasar-spinner" :width="size" :height="size" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop :stop-color="color" stop-opacity="0" offset="0%"/><stop :stop-color="color" stop-opacity=".631" offset="63.146%"/><stop :stop-color="color" offset="100%"/></linearGradient></defs><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/></path><circle :fill="color" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/></circle></g></svg>
+  <svg class="q-spinner" :width="size" :height="size" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop :stop-color="color" stop-opacity="0" offset="0%"/><stop :stop-color="color" stop-opacity=".631" offset="63.146%"/><stop :stop-color="color" offset="100%"/></linearGradient></defs><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/></path><circle :fill="color" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/></circle></g></svg>
 </template>
 
 <script>
diff --git a/src/vue-components/stepper/Step.vue b/src/vue-components/stepper/Step.vue
index 03aeb3dbe5a..4ed1c70b8c8 100644
--- a/src/vue-components/stepper/Step.vue
+++ b/src/vue-components/stepper/Step.vue
@@ -12,7 +12,7 @@
       </span>
     </div>
     <div class="timeline-title text-bold" v-html="title"></div>
-    <quasar-transition name="slide">
+    <q-transition name="slide">
       <div
         class="timeline-content"
         v-show="stepper && step === stepper.currentStep"
@@ -35,7 +35,7 @@
           </button>
         </div>
       </div>
-    </quasar-transition>
+    </q-transition>
   </div>
 </template>
 
diff --git a/src/vue-components/stepper/Stepper.vue b/src/vue-components/stepper/Stepper.vue
index f3cdbaebb86..25db7f10dc9 100644
--- a/src/vue-components/stepper/Stepper.vue
+++ b/src/vue-components/stepper/Stepper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="quasar-stepper timeline primary">
+  <div class="q-stepper timeline primary">
     <slot></slot>
   </div>
 </template>
diff --git a/src/vue-components/tab/Tab.vue b/src/vue-components/tab/Tab.vue
index 27b9f04c710..28764a35288 100644
--- a/src/vue-components/tab/Tab.vue
+++ b/src/vue-components/tab/Tab.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="quasar-tab items-center justify-center"
+    class="q-tab items-center justify-center"
     :class="{active: isActive, hidden, disabled: disable, hideIcon: hide === 'icon', hideLabel: hide === 'label'}"
     @click="activate()"
   >
     <router-link v-if="route" ref="routerLink" :to="route" :replace="replace" :append="append" :exact="exact"></router-link>
-    <i v-if="icon" class="quasar-tabs-icon">{{icon}}</i>
-    <span class="quasar-tab-label">
+    <i v-if="icon" class="q-tabs-icon">{{icon}}</i>
+    <span class="q-tab-label">
       <slot></slot>
     </span>
   </div>
diff --git a/src/vue-components/tab/Tabs.vue b/src/vue-components/tab/Tabs.vue
index 36cc403eac3..0a3b89b7a67 100644
--- a/src/vue-components/tab/Tabs.vue
+++ b/src/vue-components/tab/Tabs.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="quasar-tabs row">
+  <div class="q-tabs row">
     <div ref="leftScroll" class="row items-center justify-center left-scroll">
       <i>chevron_left</i>
     </div>
-    <div ref="scroller" class="quasar-tabs-scroller row">
+    <div ref="scroller" class="q-tabs-scroller row">
       <slot></slot>
     </div>
     <div ref="rightScroll" class="row items-center justify-center right-scroll">
diff --git a/src/vue-components/tab/tabs.ios.styl b/src/vue-components/tab/tabs.ios.styl
index b4fae209b00..e3a2a90c016 100644
--- a/src/vue-components/tab/tabs.ios.styl
+++ b/src/vue-components/tab/tabs.ios.styl
@@ -14,10 +14,10 @@ $tabs-font-weight             ?= 400
 $tabs-label-margin            ?= 5px 0 0 0
 $tabs-label-font-size         ?= .7rem
 
-.quasar-tabs-scroller
+.q-tabs-scroller
   overflow hidden
 
-.quasar-tab
+.q-tab
   display flex
   flex-direction column
   min-height $tabs-min-height
@@ -27,9 +27,9 @@ $tabs-label-font-size         ?= .7rem
   white-space nowrap
   user-select none
 
-  .quasar-tabs-icon
+  .q-tabs-icon
     font-size $tabs-icon-font-size
-  .quasar-tabs-icon + .quasar-tab-label
+  .q-tabs-icon + .q-tab-label
     margin $tabs-label-margin
   &.active
     color $tabs-active-color
@@ -37,11 +37,11 @@ $tabs-label-font-size         ?= .7rem
     background $tabs-highlight-color
 
 @media only screen and (max-width $layout-medium-max)
-  .quasar-tabs:not(.scrollable)
-    .quasar-tabs-scroller, .quasar-tab
+  .q-tabs:not(.scrollable)
+    .q-tabs-scroller, .q-tab
       flex 1 1 auto
 
-.quasar-tabs
+.q-tabs
   min-height $tabs-min-height
   overflow hidden
   color $tabs-color
@@ -88,7 +88,7 @@ $tabs-label-font-size         ?= .7rem
       &.{$name}
         color composite-color($color)
         background $color
-        .quasar-tab
+        .q-tab
           &.active, &:active
             color $grey-8
           &:active
@@ -96,7 +96,7 @@ $tabs-label-font-size         ?= .7rem
         &.inverted
           color $color
           background composite-color($color)
-          .quasar-tab
+          .q-tab
             &.active, &:active
               color white
             &:active
@@ -109,18 +109,18 @@ $tabs-label-font-size         ?= .7rem
           color composite-color($color)
           background $color
 
-        &.inverted .quasar-tab
+        &.inverted .q-tab
           &.active, &:active
             color $color
           &:active
             background-color $color
-        &:not(.inverted) .quasar-tab
+        &:not(.inverted) .q-tab
           &.active, &:active
             color white
           &:active
             background white
 
-body.mobile .quasar-tabs-scroller
+body.mobile .q-tabs-scroller
   overflow-y hidden
   overflow-x auto
   -webkit-overflow-scrolling touch
diff --git a/src/vue-components/tab/tabs.mat.styl b/src/vue-components/tab/tabs.mat.styl
index 4d6c01854e4..0e3028b10c6 100644
--- a/src/vue-components/tab/tabs.mat.styl
+++ b/src/vue-components/tab/tabs.mat.styl
@@ -18,10 +18,10 @@ $tabs-text-transform          ?= uppercase
 $tabs-border-bottom           ?= 2px solid transparent
 $tabs-active-border-bottom    ?= 2px solid $tabs-active-color
 
-.quasar-tabs-scroller
+.q-tabs-scroller
   overflow hidden
 
-.quasar-tab
+.q-tab
   display flex
   flex-direction column
   min-height $tabs-min-height
@@ -31,9 +31,9 @@ $tabs-active-border-bottom    ?= 2px solid $tabs-active-color
   white-space nowrap
   user-select none
 
-  .quasar-tabs-icon
+  .q-tabs-icon
     font-size $tabs-icon-font-size
-  .quasar-tabs-icon + .quasar-tab-label
+  .q-tabs-icon + .q-tab-label
     margin $tabs-label-margin
   &.active
     color $tabs-active-color
@@ -45,22 +45,22 @@ $tabs-active-border-bottom    ?= 2px solid $tabs-active-color
   border-bottom $tabs-border-bottom
 
 @media only screen and (max-width $layout-small-max)
-  .quasar-tab
-    &.hideIcon .quasar-tabs-icon,
-    &.hideLabel .quasar-tab-label
+  .q-tab
+    &.hideIcon .q-tabs-icon,
+    &.hideLabel .q-tab-label
       display none !important
 
 @media only screen and (max-width $layout-medium-max)
-  .quasar-tabs:not(.scrollable)
-    .quasar-tabs-scroller, .quasar-tab
+  .q-tabs:not(.scrollable)
+    .q-tabs-scroller, .q-tab
       flex 1 1 auto
 
 @media only screen and (min-width $layout-big-min)
-  .quasar-tabs:not(.scrollable)
+  .q-tabs:not(.scrollable)
     padding-left $tabs-big-screen-side-padding
     padding-right $tabs-big-screen-side-padding
 
-.quasar-tabs
+.q-tabs
   min-height $tabs-min-height
   overflow hidden
   color $tabs-color
@@ -101,7 +101,7 @@ $tabs-active-border-bottom    ?= 2px solid $tabs-active-color
       &.{$name}
         color composite-color($color)
         background $color
-        .quasar-tab
+        .q-tab
           &.active, &:active
             color $grey-8
             border-bottom 2px solid $grey-8
@@ -110,7 +110,7 @@ $tabs-active-border-bottom    ?= 2px solid $tabs-active-color
         &.inverted
           color $color
           background composite-color($color)
-          .quasar-tab
+          .q-tab
             &.active, &:active
               color white
               border-bottom 2px solid white
@@ -124,20 +124,20 @@ $tabs-active-border-bottom    ?= 2px solid $tabs-active-color
           color composite-color($color)
           background $color
 
-        &.inverted .quasar-tab
+        &.inverted .q-tab
           &.active, &:active
             color $color
             border-bottom 2px solid $color
           &:active
             background-color $color
-        &:not(.inverted) .quasar-tab
+        &:not(.inverted) .q-tab
           &.active, &:active
             color white
             border-bottom 2px solid white
           &:active
             background white
 
-body.mobile .quasar-tabs-scroller
+body.mobile .q-tabs-scroller
   overflow-y hidden
   overflow-x auto
   will-change scroll-position
diff --git a/src/vue-components/toggle/Toggle.vue b/src/vue-components/toggle/Toggle.vue
index d7cf80271a2..edc439c4759 100644
--- a/src/vue-components/toggle/Toggle.vue
+++ b/src/vue-components/toggle/Toggle.vue
@@ -1,6 +1,6 @@
 <template>
   <label
-    class="quasar-toggle"
+    class="q-toggle"
     :class="{disabled: disable}"
     v-touch-swipe.horizontal="__toggle"
   >
diff --git a/src/vue-components/toggle/toggle.ios.styl b/src/vue-components/toggle/toggle.ios.styl
index 1599307b56e..c4eb25c9de2 100644
--- a/src/vue-components/toggle/toggle.ios.styl
+++ b/src/vue-components/toggle/toggle.ios.styl
@@ -13,7 +13,7 @@ $toggle-area-width      = ($toggle-width - $toggle-border-size)
 $toggle-area-height     = $toggle-height
 $toggle-area-active-left = ($toggle-width - $toggle-handle-size - 2 * $toggle-border-size)
 
-.quasar-toggle
+.q-toggle
   display inline-block
   height $toggle-height
   width $toggle-width
diff --git a/src/vue-components/toggle/toggle.mat.styl b/src/vue-components/toggle/toggle.mat.styl
index 0ca5dc2075c..3fa37394e3e 100644
--- a/src/vue-components/toggle/toggle.mat.styl
+++ b/src/vue-components/toggle/toggle.mat.styl
@@ -8,7 +8,7 @@ $toggle-handle-size      = $toggle-size
 $toggle-area-width       = $toggle-width
 $toggle-area-active-left = ($toggle-width - $toggle-handle-size)
 
-.quasar-toggle
+.q-toggle
   display inline-block
   height $toggle-height
   width $toggle-width
diff --git a/src/vue-components/tooltip/Tooltip.vue b/src/vue-components/tooltip/Tooltip.vue
index e466d1e0926..57088ff99b8 100644
--- a/src/vue-components/tooltip/Tooltip.vue
+++ b/src/vue-components/tooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="quasar-tooltip animate-scale" :style="transformCSS">
+  <span class="q-tooltip animate-scale" :style="transformCSS">
     <slot></slot>
   </span>
 </template>
diff --git a/src/vue-components/tooltip/tooltip.ios.styl b/src/vue-components/tooltip/tooltip.ios.styl
index 256b4033dcb..022b0832bac 100644
--- a/src/vue-components/tooltip/tooltip.ios.styl
+++ b/src/vue-components/tooltip/tooltip.ios.styl
@@ -4,7 +4,7 @@ $tooltip-box-shadow    ?= $shadow-1
 $tooltip-padding       ?= 10px
 $tooltip-border-radius ?= $generic-border-radius
 
-.quasar-tooltip
+.q-tooltip
   position fixed
   color $tooltip-color
   background $tooltip-background
diff --git a/src/vue-components/tooltip/tooltip.mat.styl b/src/vue-components/tooltip/tooltip.mat.styl
index 6f52fccca08..c4153fbdeb7 100644
--- a/src/vue-components/tooltip/tooltip.mat.styl
+++ b/src/vue-components/tooltip/tooltip.mat.styl
@@ -4,7 +4,7 @@ $tooltip-box-shadow    ?= $shadow-1
 $tooltip-padding       ?= 10px
 $tooltip-border-radius ?= $generic-border-radius
 
-.quasar-tooltip
+.q-tooltip
   position fixed
   color $tooltip-color
   background $tooltip-background
diff --git a/src/vue-components/tree/Tree.vue b/src/vue-components/tree/Tree.vue
index c3be0dab9f4..63ecbd3cc5c 100644
--- a/src/vue-components/tree/Tree.vue
+++ b/src/vue-components/tree/Tree.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="quasar-tree">
+  <div class="q-tree">
     <ul>
-      <quasar-tree-item
+      <q-tree-item
         v-for="item in model"
         :model="item"
         :contract-html="contractHtml"
         :expand-html="expandHtml"
-      ></quasar-tree-item>
+      ></q-tree-item>
     </ul>
   </div>
 </template>
diff --git a/src/vue-components/tree/TreeItem.vue b/src/vue-components/tree/TreeItem.vue
index 1ae1dd11f64..d85e21fc198 100644
--- a/src/vue-components/tree/TreeItem.vue
+++ b/src/vue-components/tree/TreeItem.vue
@@ -1,24 +1,24 @@
 <template>
-  <li class="quasar-tree-item">
+  <li class="q-tree-item">
     <div
-      :class="{'quasar-tree-expandable-item': isExpandable, 'quasar-tree-link': model.handler}"
+      :class="{'q-tree-expandable-item': isExpandable, 'q-tree-link': model.handler}"
       @click="toggle"
     >
       <i v-if="model.icon">{{model.icon}}</i>
-      <span class="quasar-tree-label">{{model.title}}</span>
+      <span class="q-tree-label">{{model.title}}</span>
       <span v-if="isExpandable" v-html="model.expanded ? contractHtml : expandHtml"></span>
     </div>
-    <quasar-transition name="slide">
+    <q-transition name="slide">
       <ul v-show="isExpandable && model.expanded">
-        <quasar-tree-item v-for="item in model.children" :model="item" :contract-html="contractHtml" :expand-html="expandHtml"></quasar-tree-item>
+        <q-tree-item v-for="item in model.children" :model="item" :contract-html="contractHtml" :expand-html="expandHtml"></q-tree-item>
       </ul>
-    </quasar-transition>
+    </q-transition>
   </li>
 </template>
 
 <script>
 export default {
-  name: 'quasar-tree-item',
+  name: 'q-tree-item',
   props: ['model', 'contract-html', 'expand-html'],
   methods: {
     toggle () {
diff --git a/src/vue-components/tree/tree.ios.styl b/src/vue-components/tree/tree.ios.styl
index 49f2e2005e2..4b3213b1902 100644
--- a/src/vue-components/tree/tree.ios.styl
+++ b/src/vue-components/tree/tree.ios.styl
@@ -4,7 +4,7 @@ $tree-label-border-radius        ?= $generic-border-radius
 $tree-highlight-color            ?= inherit
 $tree-highlight-background       ?= $tree-connector-color
 
-.quasar-tree
+.q-tree
   li
     margin 0
     list-style-type none
@@ -40,22 +40,22 @@ $tree-highlight-background       ?= $tree-connector-color
     &:after, &:before
       border 0
 
-.quasar-tree-expandable-item, .quasar-tree-link
+.q-tree-expandable-item, .q-tree-link
   display inline-block
   cursor pointer
-  .quasar-tree-label:active
+  .q-tree-label:active
     color $tree-highlight-color
     background $tree-highlight-background
 
-.quasar-tree-expandable-item span:nth-child(2) i
+.q-tree-expandable-item span:nth-child(2) i
   color $tree-connector-color
 
 body.desktop
-  .quasar-tree-expandable-item, .quasar-tree-link
-    .quasar-tree-label:hover
+  .q-tree-expandable-item, .q-tree-link
+    .q-tree-label:hover
       color $tree-highlight-color
       background $tree-highlight-background
 
-.quasar-tree-label
+.q-tree-label
   padding $tree-label-padding
   border-radius $tree-label-border-radius
diff --git a/src/vue-components/tree/tree.mat.styl b/src/vue-components/tree/tree.mat.styl
index 49f2e2005e2..4b3213b1902 100644
--- a/src/vue-components/tree/tree.mat.styl
+++ b/src/vue-components/tree/tree.mat.styl
@@ -4,7 +4,7 @@ $tree-label-border-radius        ?= $generic-border-radius
 $tree-highlight-color            ?= inherit
 $tree-highlight-background       ?= $tree-connector-color
 
-.quasar-tree
+.q-tree
   li
     margin 0
     list-style-type none
@@ -40,22 +40,22 @@ $tree-highlight-background       ?= $tree-connector-color
     &:after, &:before
       border 0
 
-.quasar-tree-expandable-item, .quasar-tree-link
+.q-tree-expandable-item, .q-tree-link
   display inline-block
   cursor pointer
-  .quasar-tree-label:active
+  .q-tree-label:active
     color $tree-highlight-color
     background $tree-highlight-background
 
-.quasar-tree-expandable-item span:nth-child(2) i
+.q-tree-expandable-item span:nth-child(2) i
   color $tree-connector-color
 
 body.desktop
-  .quasar-tree-expandable-item, .quasar-tree-link
-    .quasar-tree-label:hover
+  .q-tree-expandable-item, .q-tree-link
+    .q-tree-label:hover
       color $tree-highlight-color
       background $tree-highlight-background
 
-.quasar-tree-label
+.q-tree-label
   padding $tree-label-padding
   border-radius $tree-label-border-radius
diff --git a/src/vue-directives/touch-pan.js b/src/vue-directives/touch-pan.js
index ace235e93b2..6580b7b7748 100644
--- a/src/vue-directives/touch-pan.js
+++ b/src/vue-directives/touch-pan.js
@@ -20,16 +20,16 @@ function getDirection (mod) {
 }
 
 function updateClasses (el, dir, scroll) {
-  el.classList.add('quasar-touch')
+  el.classList.add('q-touch')
 
   if (!scroll) {
     if (dir.horizontal && !dir.vertical) {
-      el.classList.add('quasar-touch-y')
-      el.classList.remove('quasar-touch-x')
+      el.classList.add('q-touch-y')
+      el.classList.remove('q-touch-x')
     }
     else if (!dir.horizontal && dir.vertical) {
-      el.classList.add('quasar-touch-x')
-      el.classList.remove('quasar-touch-y')
+      el.classList.add('q-touch-x')
+      el.classList.remove('q-touch-y')
     }
   }
 }
diff --git a/src/vue-directives/touch-swipe.js b/src/vue-directives/touch-swipe.js
index de361095e49..acca0f4c066 100644
--- a/src/vue-directives/touch-swipe.js
+++ b/src/vue-directives/touch-swipe.js
@@ -31,15 +31,15 @@ function getDirection (mod) {
 }
 
 function updateClasses (el, dir) {
-  el.classList.add('quasar-touch')
+  el.classList.add('q-touch')
 
   if (dir.horizontal && !dir.vertical) {
-    el.classList.add('quasar-touch-y')
-    el.classList.remove('quasar-touch-x')
+    el.classList.add('q-touch-y')
+    el.classList.remove('q-touch-x')
   }
   else if (!dir.horizontal && dir.vertical) {
-    el.classList.add('quasar-touch-x')
-    el.classList.remove('quasar-touch-y')
+    el.classList.add('q-touch-x')
+    el.classList.remove('q-touch-y')
   }
 }
 
diff --git a/src/vue-install.js b/src/vue-install.js
index 39090bc5096..767efde8531 100644
--- a/src/vue-install.js
+++ b/src/vue-install.js
@@ -70,51 +70,51 @@ function registerDirectives (_Vue) {
 }
 
 function registerComponents (_Vue) {
-  _Vue.component('quasar-checkbox', Checkbox)
-  _Vue.component('quasar-chips', Chips)
-  _Vue.component('quasar-collapsible', Collapsible)
-  _Vue.component('quasar-context-menu', Platform.is.desktop ? ContextMenuDesktop : ContextMenuMobile)
-  _Vue.component('quasar-inline-datetime', theme === 'ios' ? InlineDatetimeIOS : InlineDatetimeMaterial)
-  _Vue.component('quasar-datetime', Datetime)
-  _Vue.component('quasar-drawer', Drawer)
-  _Vue.component('quasar-drawer-link', DrawerLink)
-  _Vue.component('quasar-fab', Fab)
-  _Vue.component('quasar-small-fab', SmallFab)
-  _Vue.component('quasar-gallery', Gallery)
-  _Vue.component('quasar-gallery-slider', GallerySlider)
-  _Vue.component('quasar-infinite-scroll', InfiniteScroll)
-  _Vue.component('quasar-knob', Knob)
-  _Vue.component('quasar-layout', Layout)
-  _Vue.component('quasar-toolbar-title', ToolbarTitle)
-  _Vue.component('quasar-modal', Modal)
-  _Vue.component('quasar-numeric', Numeric)
-  _Vue.component('quasar-pagination', Pagination)
-  _Vue.component('quasar-parallax', Parallax)
-  _Vue.component('quasar-picker-textfield', PickerTextfield)
-  _Vue.component('quasar-popover', Popover)
-  _Vue.component('quasar-progress', Progress)
-  _Vue.component('quasar-progress-button', ProgressButton)
-  _Vue.component('quasar-pull-to-refresh', PullToRefresh)
-  _Vue.component('quasar-radio', Radio)
-  _Vue.component('quasar-range', Range)
-  _Vue.component('quasar-double-range', DoubleRange)
-  _Vue.component('quasar-rating', Rating)
-  _Vue.component('quasar-search', Search)
-  _Vue.component('quasar-select', Select)
-  _Vue.component('quasar-dialog-select', DialogSelect)
-  _Vue.component('quasar-slider', Slider)
+  _Vue.component('q-checkbox', Checkbox)
+  _Vue.component('q-chips', Chips)
+  _Vue.component('q-collapsible', Collapsible)
+  _Vue.component('q-context-menu', Platform.is.desktop ? ContextMenuDesktop : ContextMenuMobile)
+  _Vue.component('q-inline-datetime', theme === 'ios' ? InlineDatetimeIOS : InlineDatetimeMaterial)
+  _Vue.component('q-datetime', Datetime)
+  _Vue.component('q-drawer', Drawer)
+  _Vue.component('q-drawer-link', DrawerLink)
+  _Vue.component('q-fab', Fab)
+  _Vue.component('q-small-fab', SmallFab)
+  _Vue.component('q-gallery', Gallery)
+  _Vue.component('q-gallery-slider', GallerySlider)
+  _Vue.component('q-infinite-scroll', InfiniteScroll)
+  _Vue.component('q-knob', Knob)
+  _Vue.component('q-layout', Layout)
+  _Vue.component('q-toolbar-title', ToolbarTitle)
+  _Vue.component('q-modal', Modal)
+  _Vue.component('q-numeric', Numeric)
+  _Vue.component('q-pagination', Pagination)
+  _Vue.component('q-parallax', Parallax)
+  _Vue.component('q-picker-textfield', PickerTextfield)
+  _Vue.component('q-popover', Popover)
+  _Vue.component('q-progress', Progress)
+  _Vue.component('q-progress-button', ProgressButton)
+  _Vue.component('q-pull-to-refresh', PullToRefresh)
+  _Vue.component('q-radio', Radio)
+  _Vue.component('q-range', Range)
+  _Vue.component('q-double-range', DoubleRange)
+  _Vue.component('q-rating', Rating)
+  _Vue.component('q-search', Search)
+  _Vue.component('q-select', Select)
+  _Vue.component('q-dialog-select', DialogSelect)
+  _Vue.component('q-slider', Slider)
   _Vue.component('spinner', Spinner)
-  _Vue.component('quasar-state', State)
-  _Vue.component('quasar-stepper', Stepper)
-  _Vue.component('quasar-step', Step)
-  _Vue.component('quasar-tab', Tab)
-  _Vue.component('quasar-tabs', Tabs)
-  _Vue.component('quasar-toggle', Toggle)
-  _Vue.component('quasar-tooltip', Tooltip)
-  _Vue.component('quasar-tree', Tree)
-  _Vue.component('quasar-video', Video)
+  _Vue.component('q-state', State)
+  _Vue.component('q-stepper', Stepper)
+  _Vue.component('q-step', Step)
+  _Vue.component('q-tab', Tab)
+  _Vue.component('q-tabs', Tabs)
+  _Vue.component('q-toggle', Toggle)
+  _Vue.component('q-tooltip', Tooltip)
+  _Vue.component('q-tree', Tree)
+  _Vue.component('q-video', Video)
 
-  _Vue.component('quasar-transition', Transition)
+  _Vue.component('q-transition', Transition)
 }
 
 export var Vue
diff --git a/src/vue-transitions/transition.js b/src/vue-transitions/transition.js
index dc68267ec9a..2a3ef4c7c82 100644
--- a/src/vue-transitions/transition.js
+++ b/src/vue-transitions/transition.js
@@ -24,7 +24,7 @@ export default {
     }
     var data = {
       props: {
-        name: 'quasar-transition',
+        name: 'q-transition',
         mode: 'out-in',
         appear: context.props.appear
       },