feat: route nprogress

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.2",
     "@vueuse/core": "^4.0.0-rc.4",
+    "nprogress": "^0.2.0",
     "vue": "^3.0.3",
     "vue-i18n": "9.0.0-beta.8",
     "vue-router": "^4.0.0-rc.6"
@@ -15,6 +16,7 @@
     "@antfu/eslint-config-vue": "^0.4.3",
     "@iconify/json": "^1.1.266",
     "@purge-icons/generated": "^0.4.1",
+    "@types/nprogress": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@vue/compiler-sfc": "^3.0.3",
     "@vuedx/typescript-plugin-vue": "^0.2.3",
@@ -29,7 +31,7 @@
     "vite-plugin-md": "^0.1.2",
     "vite-plugin-purge-icons": "^0.4.5",
     "vite-plugin-pwa": "^0.1.7",
-    "vite-plugin-voie": "^0.4.0",
+    "vite-plugin-voie": "npm:@knightly/vite-plugin-voie@pr11",
     "voie-pages": "^0.4.0"
   },
   "pnpm": {

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 dependencies:
   '@iconify/iconify': 2.0.0-rc.2
   '@vueuse/core': 4.0.0-rc.4_vue@3.0.3
+  nprogress: 0.2.0
   vue: 3.0.3
   vue-i18n: 9.0.0-beta.8_vue@3.0.3
   vue-router: 4.0.0-rc.6_vue@3.0.3
@@ -8,6 +9,7 @@ devDependencies:
   '@antfu/eslint-config-vue': 0.4.3_eslint@7.14.0+typescript@4.1.2
   '@iconify/json': 1.1.266
   '@purge-icons/generated': 0.4.1
+  '@types/nprogress': 0.2.0
   '@typescript-eslint/eslint-plugin': 4.9.0_eslint@7.14.0+typescript@4.1.2
   '@vue/compiler-sfc': 3.0.3_vue@3.0.3
   '@vuedx/typescript-plugin-vue': 0.2.3_vue@3.0.3
@@ -22,7 +24,7 @@ devDependencies:
   vite-plugin-md: 0.1.2_@vue+compiler-sfc@3.0.3
   vite-plugin-purge-icons: 0.4.5
   vite-plugin-pwa: 0.1.7
-  vite-plugin-voie: 0.4.0_cc5f94e7f7ee5c93fc7acbfd4f2beeeb
+  vite-plugin-voie: /@knightly/vite-plugin-voie/0.2.0-knightly-pr11.202012021126_cc5f94e7f7ee5c93fc7acbfd4f2beeeb
   voie-pages: 0.4.0_vue@3.0.3
 lockfileVersion: 5.2
 overrides:
@@ -1098,6 +1100,27 @@ packages:
     dev: true
     resolution:
       integrity: sha512-I8S9lChQATaRroMGccdOQkFbBtMt4C2V/PQGiSjDq9yzdyqDCrPNN9X1qM4FoQt84zfW/+JMHIgShi42E+SXeA==
+  /@knightly/vite-plugin-voie/0.2.0-knightly-pr11.202012021126_cc5f94e7f7ee5c93fc7acbfd4f2beeeb:
+    dependencies:
+      fast-glob: 3.2.4
+      vite: 1.0.0-rc.13
+      voie-pages: /@knightly/voie-pages/0.2.0-knightly-pr11.202012021126_vue@3.0.3
+      vue-router: 4.0.0-rc.6_vue@3.0.3
+    dev: true
+    peerDependencies:
+      vite: ^1.0.0-rc.4
+      vue: '*'
+      vue-router: ^4.0.0-beta.4
+    resolution:
+      integrity: sha512-bPzG/g8VbSioVMpWtOBWfCiukcMxLncA1jAe2FHcaGPooHz3T8028ATsMnLTCSFJpNdjJlc9SQAlu7DSCoxW6g==
+  /@knightly/voie-pages/0.2.0-knightly-pr11.202012021126_vue@3.0.3:
+    dependencies:
+      vue-router: 4.0.0-rc.6_vue@3.0.3
+    dev: true
+    peerDependencies:
+      vue: '*'
+    resolution:
+      integrity: sha512-FwTt7Ym8o5mdiMOytbiY78Z17gPiNCKL92lnpvyf4bqLgGz0LbFM8lEoYPFiDvRN0MfPjwGpXX3Hzdx4PmgWSw==
   /@koa/cors/3.1.0:
     dependencies:
       vary: 1.1.2
@@ -1417,6 +1440,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
+  /@types/nprogress/0.2.0:
+    dev: true
+    resolution:
+      integrity: sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
   /@types/parse-json/4.0.0:
     dev: true
     resolution:
@@ -4220,6 +4247,10 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  /nprogress/0.2.0:
+    dev: false
+    resolution:
+      integrity: sha1-y480xTIT2JVyP8urkH6UIq28r7E=
   /num2fraction/1.2.2:
     dev: true
     resolution:
@@ -5677,19 +5708,6 @@ packages:
     dev: true
     resolution:
       integrity: sha512-S5Hc1x/rcfb6cgKjlW7yxSTv1er6fquzGZt/+xC1wavSBa7Qf6wdf6QzYiYdwmUom5yUSDEawc2gEYgq5SsZFg==
-  /vite-plugin-voie/0.4.0_cc5f94e7f7ee5c93fc7acbfd4f2beeeb:
-    dependencies:
-      fast-glob: 3.2.4
-      vite: 1.0.0-rc.13
-      voie-pages: 0.4.0_vue@3.0.3
-      vue-router: 4.0.0-rc.6_vue@3.0.3
-    dev: true
-    peerDependencies:
-      vite: ^1.0.0-rc.4
-      vue: '*'
-      vue-router: ^4.0.0-beta.4
-    resolution:
-      integrity: sha512-X1JQc3mWfCDd847PV3w6KhfqlvNlLVwImsrYlBNvRR8KpwdxmG2ZywqyqKsw4rUIMsk7jHHb19G3NxbUbW77uA==
   /vite/1.0.0-rc.13:
     dependencies:
       '@babel/parser': 7.12.7
@@ -6071,6 +6089,7 @@ specifiers:
   '@iconify/iconify': ^2.0.0-rc.2
   '@iconify/json': ^1.1.266
   '@purge-icons/generated': ^0.4.1
+  '@types/nprogress': ^0.2.0
   '@typescript-eslint/eslint-plugin': ^4.9.0
   '@vue/compiler-sfc': ^3.0.3
   '@vuedx/typescript-plugin-vue': ^0.2.3
@@ -6078,6 +6097,7 @@ specifiers:
   autoprefixer: ^10.0.4
   cross-env: ^7.0.2
   eslint: ^7.14.0
+  nprogress: ^0.2.0
   postcss-nested: ^5.0.1
   tailwindcss: ^2.0.1
   typescript: ^4.1.2
@@ -6086,7 +6106,7 @@ specifiers:
   vite-plugin-md: ^0.1.2
   vite-plugin-purge-icons: ^0.4.5
   vite-plugin-pwa: ^0.1.7
-  vite-plugin-voie: ^0.4.0
+  vite-plugin-voie: 'npm:@knightly/vite-plugin-voie@pr11'
   voie-pages: ^0.4.0
   vue: ^3.0.3
   vue-i18n: 9.0.0-beta.8

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
+  @apply px-4 py-1 rounded inline-block
-    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
+  @apply inline-block cursor-pointer select-none
-    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)
 }