feat: route nprogress

src/main.postcss

@@ -32,17 +32,31 @@ html.dark {
   }
 }
 
+#nprogress {
+  pointer-events: none;
+
+  .bar {
+    @apply bg-teal-600 opacity-75;
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+  }
+}
+
 .btn {
-  @apply
-    px-4 py-1 rounded inline-block
+  @apply px-4 py-1 rounded inline-block
     bg-teal-600 text-white cursor-pointer
     hover:bg-teal-700
     disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
 }
 
 .icon-btn {
-  @apply
-    inline-block cursor-pointer select-none
+  @apply inline-block cursor-pointer select-none
     opacity-75 transition duration-200 ease-in-out
     hover:opacity-100 hover:text-teal-600;
 }

src/plugins/router.ts

@@ -1,7 +1,9 @@
 import { App } from 'vue'
-// import routes generated by Voie
 import { createRouter, createWebHistory } from 'vue-router'
+// import routes generated by Voie
 import routes from 'voie-pages'
+// progress bar
+import NProgress from 'nprogress'
 
 export default (app: App) => {
   const router = createRouter({
@@ -9,5 +11,8 @@ export default (app: App) => {
     routes,
   })
 
+  router.beforeEach(() => { NProgress.start() })
+  router.afterEach(() => { NProgress.done() })
+
   app.use(router)
 }