Replace all the Vuetify components to Wave UI ones.

Author: antoniandre

src/app.vue

@@ -1,21 +1,20 @@
 <template lang="pug">
-  v-app(:class="{ ready: ready }" v-scroll="onScroll")
-    v-container.px-0(fluid)
-      top-bar(:offset-top="offsetTop")
-      router-view
+w-app(:class="{ ready }" v-scroll="onScroll")
+  top-bar(:offset-top="offsetTop")
+  router-view
 
-    v-fab-transition
-      v-btn(color="primary" fixed bottom right fab v-show="!goTopHidden" small v-scroll-to="'#top'")
-        //- Width to prevent ugly first load animation when icon is not yet ready.
-        v-icon(color="white" size="26" style="width: 24px") keyboard_arrow_up
+  w-transition-twist
+    w-button(color="primary" fixed bottom right fab v-show="!goTopHidden" small v-scroll-to="'#top'")
+      //- Width to prevent ugly first load animation when icon is not yet ready.
+      w-icon(color="white" size="26" style="width: 24px") md keyboard_arrow_up
 
-    v-footer.px-0.py-2(color="white")
-      v-layout.max-widthed(wrap justify-center)
-        v-flex.xs12.sm6.text-center.text-sm-left.copyright.
-          Copyright © {{ (new Date()).getFullYear() }} Antoni André, all rights reserved.
-        v-flex.xs12.sm6.text-center.text-sm-right.made-with
-          .mb-1 This documentation is made with #[v-icon fab fa-vuejs], #[v-icon fab fa-html5], #[v-icon fab fa-css3], #[v-icon fab fa-sass] &amp; #[v-icon.heart favorite]
-          | View this project on #[a(href="https://github.com/antoniandre/vueper-slides" target="_blank") #[v-icon fab fa-github] Github].
+  footer.px-0.py-2(color="white")
+    w-flex.max-widthed(wrap justify-center)
+      .xs12.sm6.text-center.text-sm-left.copyright.
+        Copyright © {{ (new Date()).getFullYear() }} Antoni André, all rights reserved.
+      .xs12.sm6.text-center.text-sm-right.made-with
+        .mb-1 This documentation is made with #[w-icon fab fa-vuejs], #[w-icon fab fa-html5], #[w-icon fab fa-css3], #[w-icon fab fa-sass] &amp; #[w-icon.heart md favorite]
+        | View this project on #[a(href="https://github.com/antoniandre/vueper-slides" target="_blank") #[w-icon fab fa-github] Github].
 </template>
 
 <script>
@@ -55,7 +54,7 @@ $main-text: #888;
   height: 650px;
 }
 
-.v-card {box-shadow: none;}
+.w-card {box-shadow: none;}
 
 // FOOTER
 //=================================================//

src/components/highlight-message/index.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   component(:class="`highlight highlight--${type}`" :is="tag")
-    v-icon(v-if="!noIcon") {{ icon }}
+    w-icon(v-if="!noIcon") {{ icon }}
     slot
 </template>
 
@@ -58,7 +58,7 @@ export default {
     border-color: #f33 !important;
   }
 
-  > .v-icon {
+  > .w-icon {
     position: absolute;
     left: -10px;
     color: #fff !important;
@@ -70,10 +70,10 @@ export default {
     top: 0.5em;
   }
 
-  &--info > .v-icon {background: #09f !important;transform: rotate(180deg);}
-  &--success > .v-icon {background-color: #6c0 !important;}
-  &--error > .v-icon {background-color: #f33 !important;}
-  &--tips > .v-icon {background-color: #fd0 !important;transform: rotate(180deg);font-size: 14px;}
-  &--warning > .v-icon {background-color: #fa0 !important;}
+  &--info > .w-icon {background: #09f !important;transform: rotate(180deg);}
+  &--success > .w-icon {background-color: #6c0 !important;}
+  &--error > .w-icon {background-color: #f33 !important;}
+  &--tips > .w-icon {background-color: #fd0 !important;transform: rotate(180deg);font-size: 14px;}
+  &--warning > .w-icon {background-color: #fa0 !important;}
 }
 </style>

src/documentation/_typography.scss

@@ -4,7 +4,7 @@ body {
 }
 
 .application.theme--light,
-.application .theme--light.v-card, .theme--light .v-card {
+.application .theme--light.w-card, .theme--light .w-card {
   color: inherit;
 }
 
@@ -65,4 +65,4 @@ a {
 p b {
   color: $darker-text;
   font-weight: 500;
-}
+}

src/documentation/examples.scss

@@ -126,8 +126,8 @@
 
 .ex--arrows-and-bullets-4 {
   .vueperslides__bullets button {
-    .v-icon {position: relative;}
-    & .v-icon:before {
+    .w-icon {position: relative;}
+    & .w-icon:before {
       position: absolute;
       content: '';
       top: 0;
@@ -137,7 +137,7 @@
       transition: 0.3s;
       border-radius: 100%;
     }
-    &:focus .v-icon:before {
+    &:focus .w-icon:before {
       opacity: 0.4;
       box-shadow: 0 0 0 4px currentColor;
     }