FURTHER CASTING

.vscode/settings.json

@@ -30,5 +30,10 @@
     ],
     "i18n-ally.sortKeys": true,
     "i18n-ally.keepFulfilled": true,
-    "i18n-ally.keystyle": "nested"
+    "i18n-ally.keystyle": "nested",
+
+    // unplugin-vue-router
+    // https://uvr.esm.is/introduction.html#setup
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.preferences.autoImportFileExcludePatterns": ["vue-router/auto$"]
 }

frontend/env.d.ts

@@ -2,6 +2,7 @@
 /// <reference types="vite-svg-loader" />
 /// <reference types="cypress" />
 /// <reference types="@histoire/plugin-vue/components" />
+/// <reference types="unplugin-vue-router/client" />
 
 interface ImportMetaEnv {
 	readonly VIKUNJA_API_URL?: string

frontend/eslint.config.js

@@ -27,7 +27,16 @@ export default [
 				'globals': ['RouterView', 'RouterLink', 'Icon', 'Notifications', 'Modal', 'Card'],
 			}],
 			'vue/custom-event-name-casing': ['error', 'camelCase'],
-			'vue/define-macros-order': 'error',
+			'vue/define-macros-order': ['error', {
+				'order': [
+					'definePage',
+					'defineOptions',
+					'defineProps',
+					'defineEmits',
+					'defineModel', // FIXME: move above defineProps
+					'defineSlots',
+				],
+			}],
 			'vue/match-component-file-name': ['error', {
 				'extensions': ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 				'shouldMatchCase': true,
@@ -84,5 +93,16 @@ export default [
 		// 	'cypress/*',
 		// ],
 	},
-
+	{
+		// unplugin-vue-router
+		// https://uvr.esm.is/guide/eslint.html#eslint
+		languageOptions: {
+			globals: {
+				'definePage': 'readonly',
+			},
+		},
+		settings: {
+			'import/core-modules': ['vue-router/auto-routes'],
+		},
+	},
 ]

frontend/package.json

@@ -100,6 +100,7 @@
     "tailwindcss": "3.4.17",
     "tippy.js": "6.3.7",
     "ufo": "1.5.4",
+    "unplugin-vue-router": "0.10.9",
     "vue": "3.5.13",
     "vue-advanced-cropper": "2.8.9",
     "vue-flatpickr-component": "11.0.5",

frontend/pnpm-lock.yaml

@@ -169,6 +169,9 @@ importers:
       ufo:
         specifier: 1.5.4
         version: 1.5.4
+      unplugin-vue-router:
+        specifier: 0.10.9
+        version: 0.10.9(rollup@4.30.1)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       vue:
         specifier: 3.5.13
         version: 3.5.13(typescript@5.7.3)
@@ -208,10 +211,10 @@ importers:
         version: 9.4.0
       '@histoire/plugin-screenshot':
         specifier: 0.17.17
-        version: 0.17.17(histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)))
+        version: 0.17.17(histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)))
       '@histoire/plugin-vue':
         specifier: 0.17.17
-        version: 0.17.17(histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)))(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.13(typescript@5.7.3))
+        version: 0.17.17(histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)))(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@tsconfig/node22':
         specifier: 22.0.0
         version: 22.0.0
@@ -238,7 +241,7 @@ importers:
         version: 8.20.0(eslint@9.18.0(jiti@1.21.6))(typescript@5.7.3)
       '@vitejs/plugin-vue':
         specifier: 5.2.1
-        version: 5.2.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.13(typescript@5.7.3))
+        version: 5.2.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/eslint-config-typescript':
         specifier: 14.3.0
         version: 14.3.0(eslint-plugin-vue@9.32.0(eslint@9.18.0(jiti@1.21.6)))(eslint@9.18.0(jiti@1.21.6))(typescript@5.7.3)
@@ -277,7 +280,7 @@ importers:
         version: 16.6.0
       histoire:
         specifier: 0.17.17
-        version: 0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+        version: 0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       postcss:
         specifier: 8.5.1
         version: 8.5.1
@@ -307,22 +310,22 @@ importers:
         version: 3.0.0
       vite:
         specifier: 6.0.7
-        version: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+        version: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
       vite-plugin-pwa:
         specifier: 0.21.1
-        version: 0.21.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
+        version: 0.21.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
       vite-plugin-sentry:
         specifier: 1.4.0
-        version: 1.4.0(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+        version: 1.4.0(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       vite-plugin-vue-devtools:
         specifier: 7.7.0
-        version: 7.7.0(rollup@4.30.1)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.13(typescript@5.7.3))
+        version: 7.7.0(rollup@4.30.1)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       vite-svg-loader:
         specifier: 5.1.0
         version: 5.1.0(vue@3.5.13(typescript@5.7.3))
       vitest:
         specifier: 3.0.2
-        version: 3.0.2(@types/node@22.10.7)(happy-dom@16.6.0)(jiti@1.21.6)(jsdom@20.0.3)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+        version: 3.0.2(@types/node@22.10.7)(happy-dom@16.6.0)(jiti@1.21.6)(jsdom@20.0.3)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
       vue-tsc:
         specifier: 2.2.0
         version: 2.2.0(typescript@5.7.3)
@@ -473,6 +476,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.26.5':
+    resolution: {integrity: sha512-SRJ4jYmXRqV1/Xc+TIVG84WjHBXKlxO9sHQnA2Pf12QQEAp1LOh6kDzNHXcUnbH1QI0FDoPPVOt+vyUDucxpaw==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9':
     resolution: {integrity: sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==}
     engines: {node: '>=6.9.0'}
@@ -889,6 +897,10 @@ packages:
     resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.26.5':
+    resolution: {integrity: sha512-L6mZmwFDK6Cjh1nRCLXpa6no13ZIioJDz7mdkzHv399pThrTa/k0nUlNaenOeh2kWu/iaOQYElEpKPUswUa9Vg==}
+    engines: {node: '>=6.9.0'}
+
   '@bufbuild/protobuf@2.2.2':
     resolution: {integrity: sha512-UNtPCbrwrenpmrXuRwn9jYpPoweNXj8X5sMvYgsqYyaH8jQ6LfUJSk3dJLnBK+6sfYPrF4iAIo5sd5HQ+tg75A==}
 
@@ -2552,6 +2564,15 @@ packages:
   '@volar/typescript@2.4.11':
     resolution: {integrity: sha512-2DT+Tdh88Spp5PyPbqhyoYavYCPDsqbHLFwcUI9K1NlY1YgUJvujGdrqUp0zWxnW7KWNTr3xSpMuv2WnaTKDAw==}
 
+  '@vue-macros/common@1.15.1':
+    resolution: {integrity: sha512-O0ZXaladWXwHplQnSjxLbB/G1KpdWCUNJPNYVHIxHonGex1BGpoB4fBZZLgddHgAiy18VZG/Iu5L0kwG+SV7JQ==}
+    engines: {node: '>=16.14.0'}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.2.25
+    peerDependenciesMeta:
+      vue:
+        optional: true
+
   '@vue/babel-helper-vue-transform-on@1.2.5':
     resolution: {integrity: sha512-lOz4t39ZdmU4DJAa2hwPYmKc8EsuGa2U0L9KaZaOJUt0UwQNjNA3AZTq6uEivhOKhhG1Wvy96SvYBoFmCg3uuw==}
 
@@ -2786,6 +2807,14 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-kit@1.3.2:
+    resolution: {integrity: sha512-gdvX700WVC6sHCJQ7bJGfDvtuKAh6Sa6weIZROxfzUZKP7BjvB8y0SMlM/o4omSQ3L60PQSJROBJsb0vEViVnA==}
+    engines: {node: '>=16.14.0'}
+
+  ast-walker-scope@0.6.2:
+    resolution: {integrity: sha512-1UWOyC50xI3QZkRuDj6PqDtpm1oHWtYs+NQGwqL/2R11eN3Q81PHAHPM0SWW3BNQm53UDwS//Jv8L4CCVLM1bQ==}
+    engines: {node: '>=16.14.0'}
+
   astral-regex@2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
@@ -3098,6 +3127,9 @@ packages:
   confbox@0.1.7:
     resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
   config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
@@ -4452,6 +4484,10 @@ packages:
       enquirer:
         optional: true
 
+  local-pkg@0.5.1:
+    resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
+    engines: {node: '>=14'}
+
   locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -4510,6 +4546,10 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  magic-string-ast@0.6.3:
+    resolution: {integrity: sha512-C9sgUzVZtUtzCBoMdYtwrIRQ4IucGRFGgdhkjL7PXsVfPYmTuWtewqzk7dlipaCMWH/gOYehW9rgMoa4Oebtpw==}
+    engines: {node: '>=16.14.0'}
+
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
@@ -4639,6 +4679,9 @@ packages:
   mlly@1.7.1:
     resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
 
+  mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -4919,8 +4962,8 @@ packages:
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
-  pathe@2.0.1:
+  pathe@2.0.2:
-    resolution: {integrity: sha512-6jpjMpOth5S9ITVu5clZ7NOgHNsv5vRQdheL9ztp2vZmM6fRbLvyua1tiBIL4lk8SAe3ARzeXEly6siXCjDHDw==}
+    resolution: {integrity: sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==}
 
   pathval@2.0.0:
     resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
@@ -4979,6 +5022,9 @@ packages:
   pkg-types@1.2.0:
     resolution: {integrity: sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==}
 
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
   possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -5639,6 +5685,9 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
   section-matter@1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -6184,10 +6233,22 @@ packages:
       html-webpack-plugin:
         optional: true
 
+  unplugin-vue-router@0.10.9:
+    resolution: {integrity: sha512-DXmC0GMcROOnCmN56GRvi1bkkG1BnVs4xJqNvucBUeZkmB245URvtxOfbo3H6q4SOUQQbLPYWd6InzvjRh363A==}
+    peerDependencies:
+      vue-router: ^4.4.0
+    peerDependenciesMeta:
+      vue-router:
+        optional: true
+
   unplugin@1.12.2:
     resolution: {integrity: sha512-bEqQxeC7rxtxPZ3M5V4Djcc4lQqKPgGe3mAWZvxcSmX5jhGxll19NliaRzQSQPrk4xJZSGniK3puLWpRuZN7VQ==}
     engines: {node: '>=14.0.0'}
 
+  unplugin@2.0.0-beta.1:
+    resolution: {integrity: sha512-2qzQo5LN2DmUZXkWDHvGKLF5BP0WN+KthD6aPnPJ8plRBIjv4lh5O07eYcSxgO2znNw9s4MNhEO1sB+JDllDbQ==}
+    engines: {node: '>=18.12.0'}
+
   untildify@4.0.0:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
     engines: {node: '>=8'}
@@ -6674,6 +6735,11 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  yaml@2.7.0:
+    resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
   yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
@@ -6900,6 +6966,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.0
 
+  '@babel/parser@7.26.5':
+    dependencies:
+      '@babel/types': 7.26.5
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.26.0)':
     dependencies:
       '@babel/core': 7.26.0
@@ -7427,6 +7497,11 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
+  '@babel/types@7.26.5':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
   '@bufbuild/protobuf@2.2.2': {}
 
   '@cliqz/adblocker-content@1.33.0':
@@ -8018,10 +8093,10 @@ snapshots:
     dependencies:
       '@hapi/hoek': 9.3.0
 
-  '@histoire/app@0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))':
+  '@histoire/app@0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))':
     dependencies:
-      '@histoire/controls': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@histoire/controls': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
-      '@histoire/shared': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@histoire/shared': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       '@histoire/vendors': 0.17.17
       '@types/flexsearch': 0.7.6
       flexsearch: 0.7.21
@@ -8029,7 +8104,7 @@ snapshots:
     transitivePeerDependencies:
       - vite
 
-  '@histoire/controls@0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))':
+  '@histoire/controls@0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))':
     dependencies:
       '@codemirror/commands': 6.6.0
       '@codemirror/lang-json': 6.0.1
@@ -8038,17 +8113,17 @@ snapshots:
       '@codemirror/state': 6.4.1
       '@codemirror/theme-one-dark': 6.1.2
       '@codemirror/view': 6.33.0
-      '@histoire/shared': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@histoire/shared': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       '@histoire/vendors': 0.17.17
     transitivePeerDependencies:
       - vite
 
-  '@histoire/plugin-screenshot@0.17.17(histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)))':
+  '@histoire/plugin-screenshot@0.17.17(histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)))':
     dependencies:
       capture-website: 2.4.1
       defu: 6.1.4
       fs-extra: 10.1.0
-      histoire: 0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      histoire: 0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       pathe: 1.1.2
     transitivePeerDependencies:
       - bufferutil
@@ -8056,21 +8131,21 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@histoire/plugin-vue@0.17.17(histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)))(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.13(typescript@5.7.3))':
+  '@histoire/plugin-vue@0.17.17(histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)))(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      '@histoire/controls': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@histoire/controls': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
-      '@histoire/shared': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@histoire/shared': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       '@histoire/vendors': 0.17.17
       change-case: 4.1.2
       globby: 13.2.2
-      histoire: 0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      histoire: 0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       launch-editor: 2.8.1
       pathe: 1.1.2
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
 
-  '@histoire/shared@0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))':
+  '@histoire/shared@0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))':
     dependencies:
       '@histoire/vendors': 0.17.17
       '@types/fs-extra': 9.0.13
@@ -8078,7 +8153,7 @@ snapshots:
       chokidar: 3.6.0
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
 
   '@histoire/vendors@0.17.17': {}
 
@@ -8973,9 +9048,9 @@ snapshots:
       '@typescript-eslint/types': 8.20.0
       eslint-visitor-keys: 4.2.0
 
-  '@vitejs/plugin-vue@5.2.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
       vue: 3.5.13(typescript@5.7.3)
 
   '@vitest/expect@3.0.2':
@@ -8985,13 +9060,13 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.2(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))':
+  '@vitest/mocker@3.0.2(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))':
     dependencies:
       '@vitest/spy': 3.0.2
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
 
   '@vitest/pretty-format@3.0.2':
     dependencies:
@@ -9000,13 +9075,13 @@ snapshots:
   '@vitest/runner@3.0.2':
     dependencies:
       '@vitest/utils': 3.0.2
-      pathe: 2.0.1
+      pathe: 2.0.2
 
   '@vitest/snapshot@3.0.2':
     dependencies:
       '@vitest/pretty-format': 3.0.2
       magic-string: 0.30.17
-      pathe: 2.0.1
+      pathe: 2.0.2
 
   '@vitest/spy@3.0.2':
     dependencies:
@@ -9030,6 +9105,19 @@ snapshots:
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
+  '@vue-macros/common@1.15.1(rollup@4.30.1)(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@babel/types': 7.26.5
+      '@rollup/pluginutils': 5.1.3(rollup@4.30.1)
+      '@vue/compiler-sfc': 3.5.13
+      ast-kit: 1.3.2
+      local-pkg: 0.5.1
+      magic-string-ast: 0.6.3
+    optionalDependencies:
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - rollup
+
   '@vue/babel-helper-vue-transform-on@1.2.5': {}
 
   '@vue/babel-plugin-jsx@1.2.5(@babel/core@7.26.0)':
@@ -9097,14 +9185,14 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/devtools-core@7.7.0(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vue/devtools-core@7.7.0(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.0
       '@vue/devtools-shared': 7.7.0
       mitt: 3.0.1
       nanoid: 5.0.9
       pathe: 1.1.2
-      vite-hot-client: 0.2.4(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      vite-hot-client: 0.2.4(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - vite
@@ -9338,6 +9426,16 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-kit@1.3.2:
+    dependencies:
+      '@babel/parser': 7.26.5
+      pathe: 1.1.2
+
+  ast-walker-scope@0.6.2:
+    dependencies:
+      '@babel/parser': 7.26.1
+      ast-kit: 1.3.2
+
   astral-regex@2.0.0: {}
 
   async@3.2.6: {}
@@ -9669,6 +9767,8 @@ snapshots:
 
   confbox@0.1.7: {}
 
+  confbox@0.1.8: {}
+
   config-chain@1.1.13:
     dependencies:
       ini: 1.3.8
@@ -10752,12 +10852,12 @@ snapshots:
 
   highlight.js@11.11.1: {}
 
-  histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)):
+  histoire@0.17.17(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)):
     dependencies:
       '@akryum/tinypool': 0.3.1
-      '@histoire/app': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@histoire/app': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
-      '@histoire/controls': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@histoire/controls': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
-      '@histoire/shared': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@histoire/shared': 0.17.17(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       '@histoire/vendors': 0.17.17
       '@types/flexsearch': 0.7.6
       '@types/markdown-it': 12.2.3
@@ -10784,7 +10884,7 @@ snapshots:
       sade: 1.8.1
       shiki-es: 0.2.0
       sirv: 2.0.4
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
       vite-node: 0.34.7(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)
     transitivePeerDependencies:
       - '@types/node'
@@ -11237,6 +11337,11 @@ snapshots:
     optionalDependencies:
       enquirer: 2.4.1
 
+  local-pkg@0.5.1:
+    dependencies:
+      mlly: 1.7.4
+      pkg-types: 1.3.1
+
   locate-path@5.0.0:
     dependencies:
       p-locate: 4.1.0
@@ -11293,6 +11398,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  magic-string-ast@0.6.3:
+    dependencies:
+      magic-string: 0.30.17
+
   magic-string@0.25.9:
     dependencies:
       sourcemap-codec: 1.4.8
@@ -11423,6 +11532,13 @@ snapshots:
       pkg-types: 1.2.0
       ufo: 1.5.4
 
+  mlly@1.7.4:
+    dependencies:
+      acorn: 8.14.0
+      pathe: 2.0.2
+      pkg-types: 1.3.1
+      ufo: 1.5.4
+
   mri@1.2.0: {}
 
   mrmime@1.0.1: {}
@@ -11679,7 +11795,7 @@ snapshots:
 
   pathe@1.1.2: {}
 
-  pathe@2.0.1: {}
+  pathe@2.0.2: {}
 
   pathval@2.0.0: {}
 
@@ -11727,6 +11843,12 @@ snapshots:
       mlly: 1.7.1
       pathe: 1.1.2
 
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.4
+      pathe: 2.0.2
+
   possible-typed-array-names@1.0.0: {}
 
   postcss-attribute-case-insensitive@7.0.1(postcss@8.5.1):
@@ -12478,6 +12600,8 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
+  scule@1.3.0: {}
+
   section-matter@1.0.0:
     dependencies:
       extend-shallow: 2.0.1
@@ -13052,6 +13176,28 @@ snapshots:
       unplugin: 1.12.2
       webpack-sources: 3.2.3
 
+  unplugin-vue-router@0.10.9(rollup@4.30.1)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@babel/types': 7.26.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.30.1)
+      '@vue-macros/common': 1.15.1(rollup@4.30.1)(vue@3.5.13(typescript@5.7.3))
+      ast-walker-scope: 0.6.2
+      chokidar: 3.6.0
+      fast-glob: 3.3.3
+      json5: 2.2.3
+      local-pkg: 0.5.1
+      magic-string: 0.30.14
+      mlly: 1.7.4
+      pathe: 1.1.2
+      scule: 1.3.0
+      unplugin: 2.0.0-beta.1
+      yaml: 2.7.0
+    optionalDependencies:
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - rollup
+      - vue
+
   unplugin@1.12.2:
     dependencies:
       acorn: 8.12.1
@@ -13059,6 +13205,11 @@ snapshots:
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.6.2
 
+  unplugin@2.0.0-beta.1:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   untildify@4.0.0: {}
 
   upath@1.2.0: {}
@@ -13125,9 +13276,9 @@ snapshots:
       core-util-is: 1.0.2
       extsprintf: 1.3.0
 
-  vite-hot-client@0.2.4(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)):
+  vite-hot-client@0.2.4(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)):
     dependencies:
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
 
   vite-node@0.34.7(@types/node@22.10.7)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6):
     dependencies:
@@ -13148,13 +13299,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@3.0.2(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0):
+  vite-node@3.0.2(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0(supports-color@8.1.1)
       es-module-lexer: 1.6.0
-      pathe: 2.0.1
+      pathe: 2.0.2
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -13169,7 +13320,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-inspect@0.8.9(rollup@4.30.1)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)):
+  vite-plugin-inspect@0.8.9(rollup@4.30.1)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.3(rollup@4.30.1)
@@ -13180,47 +13331,47 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.0
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-pwa@0.21.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(workbox-build@7.3.0)(workbox-window@7.3.0):
+  vite-plugin-pwa@0.21.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(workbox-build@7.3.0)(workbox-window@7.3.0):
     dependencies:
       debug: 4.3.7
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.10
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
       workbox-build: 7.3.0
       workbox-window: 7.3.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-sentry@1.4.0(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)):
+  vite-plugin-sentry@1.4.0(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)):
     dependencies:
       '@sentry/cli': 2.33.1
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  vite-plugin-vue-devtools@7.7.0(rollup@4.30.1)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.13(typescript@5.7.3)):
+  vite-plugin-vue-devtools@7.7.0(rollup@4.30.1)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
-      '@vue/devtools-core': 7.7.0(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))(vue@3.5.13(typescript@5.7.3))
+      '@vue/devtools-core': 7.7.0(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue/devtools-kit': 7.7.0
       '@vue/devtools-shared': 7.7.0
       execa: 9.5.1
       sirv: 3.0.0
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
-      vite-plugin-inspect: 0.8.9(rollup@4.30.1)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      vite-plugin-inspect: 0.8.9(rollup@4.30.1)(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
-      vite-plugin-vue-inspector: 5.3.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      vite-plugin-vue-inspector: 5.3.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
       - supports-color
       - vue
 
-  vite-plugin-vue-inspector@5.3.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)):
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0)
@@ -13231,7 +13382,7 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.14
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -13252,7 +13403,7 @@ snapshots:
       sass-embedded: 1.83.4
       terser: 5.31.6
 
-  vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0):
+  vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0):
     dependencies:
       esbuild: 0.24.2
       postcss: 8.5.1
@@ -13264,12 +13415,12 @@ snapshots:
       sass: 1.80.6
       sass-embedded: 1.83.4
       terser: 5.31.6
-      yaml: 2.5.0
+      yaml: 2.7.0
 
-  vitest@3.0.2(@types/node@22.10.7)(happy-dom@16.6.0)(jiti@1.21.6)(jsdom@20.0.3)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0):
+  vitest@3.0.2(@types/node@22.10.7)(happy-dom@16.6.0)(jiti@1.21.6)(jsdom@20.0.3)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0):
     dependencies:
       '@vitest/expect': 3.0.2
-      '@vitest/mocker': 3.0.2(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0))
+      '@vitest/mocker': 3.0.2(vite@6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0))
       '@vitest/pretty-format': 3.0.2
       '@vitest/runner': 3.0.2
       '@vitest/snapshot': 3.0.2
@@ -13279,14 +13430,14 @@ snapshots:
       debug: 4.4.0(supports-color@8.1.1)
       expect-type: 1.1.0
       magic-string: 0.30.17
-      pathe: 2.0.1
+      pathe: 2.0.2
       std-env: 3.8.0
       tinybench: 2.9.0
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite: 6.0.7(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
-      vite-node: 3.0.2(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.5.0)
+      vite-node: 3.0.2(@types/node@22.10.7)(jiti@1.21.6)(sass-embedded@1.83.4)(sass@1.80.6)(terser@5.31.6)(yaml@2.7.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.10.7
@@ -13643,6 +13794,8 @@ snapshots:
 
   yaml@2.5.0: {}
 
+  yaml@2.7.0: {}
+
   yargs-parser@18.1.3:
     dependencies:
       camelcase: 5.3.1

frontend/src/components/home/ContentAuth.vue

@@ -37,7 +37,7 @@
 					v-slot="{ Component }"
 					:route="routeWithModal"
 				>
-					<keep-alive :include="['project.view']">
+					<keep-alive :include="['project']">
 						<component :is="Component" />
 					</keep-alive>
 				</RouterView>

frontend/src/components/home/ProjectsNavigationItem.vue

@@ -15,7 +15,7 @@
 				/>
 			</BaseButton>
 			<BaseButton
-				:to="{ name: 'project.index', params: { projectId: project.id} }"
+				:to="{ name: 'project', params: { projectId: project.id} }"
 				class="list-menu-link"
 				:class="{'router-link-exact-active': currentProject?.id === project.id}"
 			>

frontend/src/components/misc/keyboard-shortcuts/shortcuts.ts

@@ -62,7 +62,7 @@ export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
 	},
 	{
 		title: 'project.kanban.title',
-		available: (route) => route.name === 'project.view',
+		available: (route) => route.name === 'project',
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.task.done',

frontend/src/components/project/ProjectSettingsDropdown.vue

@@ -103,7 +103,7 @@
 				{{ $t('project.webhooks.title') }}
 			</DropdownItem>
 			<DropdownItem
-				:to="{ name: 'project.createFromParent', params: { parentProjectId: project.id } }"
+				:to="{ name: 'project.create', params: { parentProjectId: project.id } }"
 				icon="layer-group"
 			>
 				{{ $t('menu.createProject') }}

frontend/src/components/project/ProjectWrapper.vue

@@ -23,7 +23,7 @@
 					:key="view.id"
 					class="switch-view-button"
 					:class="{'is-active': view.id === viewId}"
-					:to="{ name: 'project.view', params: { projectId, viewId: view.id } }"
+					:to="{ name: 'project', params: { projectId, viewId: view.id } }"
 				>
 					{{ getViewTitle(view) }}
 				</BaseButton>

frontend/src/components/project/partials/ProjectCard.vue

@@ -37,7 +37,7 @@
 			:aria-label="project.title"
 			:title="textOnlyDescription"
 			:to="{
-				name: 'project.index',
+				name: 'project',
 				params: { projectId: project.id}
 			}"
 		/>

frontend/src/components/project/views/ProjectGantt.vue

@@ -86,7 +86,7 @@ import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import TaskForm from '@/components/tasks/TaskForm.vue'
 
 import {createAsyncComponent} from '@/helpers/createAsyncComponent'
-import {useGanttFilters} from '../../../views/project/helpers/useGanttFilters'
+import {useGanttFilters} from '@/composables/useGanttFilters'
 import {RIGHTS} from '@/constants/rights'
 
 import type {DateISO} from '@/types/DateISO'

frontend/src/components/quick-actions/QuickActions.vue

@@ -449,7 +449,7 @@ async function doAction(type: ACTION_TYPE, item: DoAction) {
 		case ACTION_TYPE.PROJECT:
 			closeQuickActions()
 			await router.push({
-				name: 'project.index',
+				name: 'project',
 				params: {projectId: (item as DoAction<IProject>).id},
 			})
 			break

frontend/src/components/tasks/GanttChart.vue

@@ -54,7 +54,7 @@ import {parseKebabDate} from '@/helpers/time/parseKebabDate'
 
 import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask'
 import type {DateISO} from '@/types/DateISO'
-import type {GanttFilters} from '@/views/project/helpers/useGanttFilters'
+import type {GanttFilters} from '@/composables/useGanttFilters'
 
 import {
 	extendDayjs,

frontend/src/components/tasks/partials/SingleTaskInProject.vue

@@ -28,7 +28,7 @@
 					<RouterLink
 						v-if="showProject && typeof project !== 'undefined'"
 						v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
-						:to="{ name: 'project.index', params: { projectId: task.projectId } }"
+						:to="{ name: 'project', params: { projectId: task.projectId } }"
 						class="task-project mr-1"
 						:class="{'mr-2': task.hexColor !== ''}"
 						@click.stop
@@ -139,7 +139,7 @@
 			<RouterLink
 				v-if="showProjectSeparately"
 				v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
-				:to="{ name: 'project.index', params: { projectId: task.projectId } }"
+				:to="{ name: 'project', params: { projectId: task.projectId } }"
 				class="task-project"
 				@click.stop
 			>

frontend/src/composables/useGanttFilters.ts

@@ -5,7 +5,7 @@ import {isoToKebabDate} from '@/helpers/time/isoToKebabDate'
 import {parseDateProp} from '@/helpers/time/parseDateProp'
 import {parseBooleanProp} from '@/helpers/time/parseBooleanProp'
 import {useRouteFilters} from '@/composables/useRouteFilters'
-import {useGanttTaskList} from './useGanttTaskList'
+import {useGanttTaskList} from '@/composables/useGanttTaskList'
 
 import type {IProject} from '@/modelTypes/IProject'
 import type {TaskFilterParams} from '@/services/taskCollection'
@@ -72,7 +72,7 @@ function ganttFiltersToRoute(filters: GanttFilters): RouteLocationRaw {
 	}
 
 	return {
-		name: 'project.view',
+		name: 'project',
 		params: {
 			projectId: filters.projectId,
 			viewId: filters.viewId,
@@ -104,7 +104,7 @@ export function useGanttFilters(route: Ref<RouteLocationNormalized>, viewId: Ref
 		ganttGetDefaultFilters,
 		ganttRouteToFilters,
 		ganttFiltersToRoute,
-		['project.view'],
+		['project'],
 	)
 
 	const {

frontend/src/composables/useRouteWithModal.ts

@@ -72,7 +72,7 @@ export function useRouteWithModal() {
 			}
 
 			const newRoute = {
-				name: 'project.view',
+				name: 'project',
 				params: {
 					projectId: baseStore.currentProject?.id,
 					viewId,

frontend/src/helpers/migrators.ts

@@ -1,9 +1,9 @@
-import wunderlistIcon from './icons/wunderlist.jpg'
+import wunderlistIcon from '@/assets/migrators/wunderlist.jpg'
-import todoistIcon from './icons/todoist.svg?url'
+import todoistIcon from '@/assets/migrators/todoist.svg?url'
-import trelloIcon from './icons/trello.svg?url'
+import trelloIcon from '@/assets/migrators/trello.svg?url'
-import microsoftTodoIcon from './icons/microsoft-todo.svg?url'
+import microsoftTodoIcon from '@/assets/migrators/microsoft-todo.svg?url'
-import vikunjaFileIcon from './icons/vikunja-file.png?url'
+import vikunjaFileIcon from '@/assets/migrators/vikunja-file.png?url'
-import tickTickIcon from './icons/ticktick.svg?url'
+import tickTickIcon from '@/assets/migrators/ticktick.svg?url'
 
 export interface Migrator {
 	id: string

frontend/src/main.ts

@@ -73,26 +73,26 @@ setLanguage(browserLanguage).then(() => {
 		error(err)
 	}
 
-	if (import.meta.env.DEV) {
+	// if (import.meta.env.DEV) {
-		app.config.warnHandler = (msg) => {
+	// 	app.config.warnHandler = (msg) => {
-			error(msg)
+	// 		error(msg)
-			throw msg
+	// 		throw msg
-		}
+	// 	}
 
-		// https://stackoverflow.com/a/52076738/15522256
+	// 	// https://stackoverflow.com/a/52076738/15522256
-		window.addEventListener('error', (err) => {
+	// 	window.addEventListener('error', (err) => {
-			error(err)
+	// 		error(err)
-			throw err
+	// 		throw err
-		})
+	// 	})
 
 
-		window.addEventListener('unhandledrejection', (err) => {
+	// 	window.addEventListener('unhandledrejection', (err) => {
-			// event.promise contains the promise object
+	// 		// event.promise contains the promise object
-			// event.reason contains the reason for the rejection
+	// 		// event.reason contains the reason for the rejection
-			error(err)
+	// 		error(err)
-			throw err
+	// 		throw err
-		})
+	// 	})
-	}
+	// }
 
 	app.config.globalProperties.$message = {
 		error,

frontend/src/pages/(home).vue

@@ -58,7 +58,7 @@
 import {ref, computed} from 'vue'
 
 import Message from '@/components/misc/Message.vue'
-import ShowTasks from '@/views/tasks/ShowTasks.vue'
+import ShowTasks from '@/components/tasks/ShowTasks.vue'
 import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
 import AddTask from '@/components/tasks/AddTask.vue'
 
@@ -73,6 +73,8 @@ import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 import {useTaskStore} from '@/stores/tasks'
 
+definePage({ name: 'home' })
+
 const salutation = useDaytimeSalutation()
 
 const baseStore = useBaseStore()

frontend/src/pages/[[...path]]+.vue

@@ -8,5 +8,13 @@
 <script setup lang="ts">
 import {useTitle} from '@/composables/useTitle'
 
+// regarding the name of this component, see
+// https://github.com/posva/unplugin-vue-router/issues/412#issuecomment-2150643118
+definePage({
+	name: 'not-found',
+})
+
+defineOptions({ name: 'NotFound' })
+
 useTitle(() => '404')
 </script>

frontend/src/pages/[[auth]]/get-password-reset.vue

@@ -71,6 +71,11 @@ import PasswordResetModel from '@/models/passwordReset'
 import PasswordResetService from '@/services/passwordReset'
 import Message from '@/components/misc/Message.vue'
 
+definePage({
+	name: 'user.password-reset.request',
+	meta: { title: 'user.auth.resetPassword' },
+})
+
 const passwordResetService = shallowReactive(new PasswordResetService())
 const passwordReset = ref(new PasswordResetModel())
 const errorMsg = ref('')

frontend/src/pages/[[auth]]/login.vue

@@ -161,6 +161,11 @@ import {useConfigStore} from '@/stores/config'
 
 import {useTitle} from '@/composables/useTitle'
 
+definePage({
+	name: 'user.login',
+	meta: { title: 'user.auth.login' },
+})
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => t('user.auth.login'))
 

frontend/src/pages/[[auth]]/password-reset.vue

@@ -58,6 +58,11 @@ import PasswordResetService from '@/services/passwordReset'
 import Message from '@/components/misc/Message.vue'
 import Password from '@/components/input/Password.vue'
 
+definePage({
+	name: 'user.password-reset.reset',
+	meta: { title: 'user.auth.resetPassword' },
+})
+
 const credentials = reactive({
 	password: '',
 })

frontend/src/pages/[[auth]]/register.vue

@@ -117,7 +117,7 @@
 
 <script setup lang="ts">
 import {useDebounceFn} from '@vueuse/core'
-import {computed, onBeforeMount, reactive, ref, toRaw} from 'vue'
+import {computed, reactive, ref, toRaw} from 'vue'
 import {useI18n} from 'vue-i18n'
 
 import router from '@/router'
@@ -129,18 +129,22 @@ import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'
 import {validatePassword} from '@/helpers/validatePasswort'
 
+definePage({
+	name: 'user.register',
+	meta: { title: 'user.auth.createAccount' },
+	beforeEnter() {
+		const authStore = useAuthStore()
+
+		if (authStore.authenticated) {
+			router.push({ name: 'home' })
+		}
+	},
+})
+
 const {t} = useI18n()
 const authStore = useAuthStore()
 const configStore = useConfigStore()
 
-// FIXME: use the `beforeEnter` hook of vue-router
-// Check if the user is already logged in, if so, redirect them to the homepage
-onBeforeMount(() => {
-	if (authStore.authenticated) {
-		router.push({name: 'home'})
-	}
-})
-
 const credentials = reactive({
 	username: '',
 	email: '',

frontend/src/pages/about.vue

@@ -32,6 +32,8 @@ import {computed} from 'vue'
 
 import {useConfigStore} from '@/stores/config'
 
+definePage({ name: 'about' })
+
 const configStore = useConfigStore()
 const apiVersion = computed(() => configStore.version)
 </script>

frontend/src/pages/auth/openid/[provider].vue

@@ -34,6 +34,8 @@ import {useRedirectToLastVisited} from '@/composables/useRedirectToLastVisited'
 
 import {useAuthStore} from '@/stores/auth'
 
+definePage({ name: 'openid.auth' })
+
 const {t} = useI18n({useScope: 'global'})
 
 const route = useRoute()

frontend/src/pages/filters/[projectId]/settings/delete.vue

@@ -14,9 +14,21 @@
 </template>
 
 <script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
 import type {IProject} from '@/modelTypes/IProject'
 import {useSavedFilter} from '@/services/savedFilter'
 
+definePage({
+	name: 'filter.settings.delete',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'filter.settings.delete'>
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
+
 const props = defineProps<{
 	projectId: IProject['id'],
 }>()

frontend/src/pages/filters/[projectId]/settings/edit.vue

@@ -69,6 +69,8 @@
 </template>
 
 <script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
 import Editor from '@/components/input/AsyncEditor'
 import CreateEdit from '@/components/misc/CreateEdit.vue'
 import Filters from '@/components/project/partials/Filters.vue'
@@ -77,6 +79,16 @@ import {useSavedFilter} from '@/services/savedFilter'
 
 import type {IProject} from '@/modelTypes/IProject'
 
+definePage({
+	name: 'filter.settings.edit',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'filter.settings.edit'>
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
+
 const props = defineProps<{
 	projectId: IProject['id'],
 }>()

frontend/src/pages/filters/new.vue

@@ -88,6 +88,11 @@ import Filters from '@/components/project/partials/Filters.vue'
 
 import {useSavedFilter} from '@/services/savedFilter'
 
+definePage({
+	name: 'filters.create',
+	meta: { showAsModal: true },
+})
+
 const {
 	filter,
 	filters,

frontend/src/pages/labels/(labels).vue

@@ -149,6 +149,8 @@ import {useLabelStore} from '@/stores/labels'
 
 import { useTitle } from '@/composables/useTitle'
 
+definePage({ name: 'labels.index' })
+
 const {t} = useI18n({useScope: 'global'})
 
 const labelEditLabel = ref<ILabel>(new LabelModel())

frontend/src/pages/labels/new.vue

@@ -54,6 +54,8 @@ import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
 import {getRandomColorHex} from '@/helpers/color/randomColor'
 
+definePage({ name: 'labels.create' })
+
 const router = useRouter()
 
 const {t} = useI18n({useScope: 'global'})

frontend/src/pages/migrate/[service].vue

@@ -110,16 +110,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-export default {
-	beforeRouteEnter(to) {
-		if (MIGRATORS[to.params.service as string] === undefined) {
-			return {name: 'not-found'}
-		}
-	},
-}
-</script>
-
 <script setup lang="ts">
 import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
@@ -133,11 +123,24 @@ import AbstractMigrationFileService from '@/services/migrator/abstractMigrationF
 import {formatDateLong} from '@/helpers/time/formatDate'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 
-import {MIGRATORS, type Migrator} from './migrators'
+import {MIGRATORS, type Migrator} from '@/helpers/migrators'
 import {useTitle} from '@/composables/useTitle'
 import {useProjectStore} from '@/stores/projects'
 import {getErrorText} from '@/message'
 
+definePage({
+	name: 'migrate.service',
+	props: route => ({
+		service: route.params.service as string,
+		code: route.query.code as string,
+	}),
+	beforeEnter(to) {
+		if (MIGRATORS[to.params.service as string] === undefined) {
+			return {name: 'not-found'}
+		}
+	},
+})
+
 const props = defineProps<{
 	service: string,
 	code?: string,

frontend/src/pages/projects/(projects).vue

@@ -48,6 +48,8 @@ import {useStorage} from '@vueuse/core'
 
 import {useProjectStore} from '@/stores/projects'
 
+definePage({ name: 'projects.index' })
+
 const {t} = useI18n()
 const projectStore = useProjectStore()
 

frontend/src/pages/projects/[[parentProjectId]]/new.vue

@@ -52,6 +52,7 @@
 
 <script setup lang="ts">
 import {ref, reactive, shallowReactive, watch} from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import ProjectService from '@/services/project'
@@ -65,6 +66,16 @@ import {useProjectStore} from '@/stores/projects'
 import ProjectSearch from '@/components/tasks/partials/ProjectSearch.vue'
 import type {IProject} from '@/modelTypes/IProject'
 
+definePage({
+	name: 'project.create',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.create'>
+		return { parentProjectId: Number(castedRoute.params.parentProjectId) }
+	},
+})
+
 const props = defineProps<{
 	parentProjectId?: number,
 }>()

frontend/src/pages/projects/[projectId]/[[viewId]].vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {computed, ref, shallowReactive, watch, watchEffect} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
+import {useRoute, useRouter, type RouteLocationNormalizedLoaded} from 'vue-router'
 
 import {useBaseStore} from '@/stores/base'
 import {useProjectStore} from '@/stores/projects'
 import {useAuthStore} from '@/stores/auth'
 
-import {saveProjectView} from '@/helpers/projectView'
+import {getProjectViewId, saveProjectView} from '@/helpers/projectView'
 import ProjectService from '@/services/project'
 
 import ProjectList from '@/components/project/views/ProjectList.vue'
@@ -17,16 +17,50 @@ import ProjectKanban from '@/components/project/views/ProjectKanban.vue'
 import {DEFAULT_PROJECT_VIEW_SETTINGS} from '@/modelTypes/IProjectView'
 import {saveProjectToHistory} from '@/modules/projectHistory'
 
+definePage({
+	name: 'project',
+	// beforeEnter(to) {
+	// 	if (to.name !== 'project') {
+	// 		throw new Error()
+	// 	}
+
+	// 	const projectId = Number(to.params?.projectId)
+	// 	const viewIdFromRoute = Number(to.params?.viewId)
+
+	// 	const newViewid = getProjectViewId(projectId) ?? 0
+
+	// 	if (!viewIdFromRoute || viewIdFromRoute !== newViewid) {
+	// 		return {
+	// 			name: 'project',
+	// 			replace: true,
+	// 			params: {
+	// 				projectId,
+	// 				viewId: newViewid,
+	// 			},
+	// 		}
+	// 	}
+	// },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project'>
+		return {
+			projectId: Number(castedRoute.params.projectId),
+			viewId: castedRoute.params.viewId ? parseInt(castedRoute.params.viewId): undefined,
+		}
+	},
+})
+
 const props = defineProps<{
 	projectId: number,
-	viewId: number,
+	viewId?: number,
 }>()
 
 const router = useRouter()
+const route = useRoute()
+
 const baseStore = useBaseStore()
 const projectStore = useProjectStore()
 const authStore = useAuthStore()
-const route = useRoute()
 
 const currentProject = computed(() => projectStore.projects[props.projectId])
 
@@ -82,7 +116,7 @@ watch(
 )
 
 function redirectToDefaultViewIfNecessary() {
-	if (props.viewId === 0 || !currentView.value) {
+	if (props.viewId === undefined || props.viewId === 0 || !currentView.value) {
 		// Ideally, we would do that in the router redirect, but the projects (and therefore, the views) 
 		// are not always loaded then.
 
@@ -100,7 +134,7 @@ function redirectToDefaultViewIfNecessary() {
 
 		if (view) {
 			router.replace({
-				name: 'project.view',
+				name: 'project',
 				params: {
 					projectId: props.projectId,
 					viewId: view.id,
@@ -121,10 +155,9 @@ watch(
 	redirectToDefaultViewIfNecessary,
 )
 
-watchEffect(() => saveProjectToHistory({id: props.projectId}))
+// using a watcher instead of beforeEnter because beforeEnter is not called when only the viewId changes
 watchEffect(() => saveProjectView(props.projectId, props.viewId))
-
+watchEffect(() => saveProjectToHistory({id: props.projectId}))
-watchEffect(() => baseStore.setCurrentProjectViewId(props.viewId))
 </script>
 
 <template>

frontend/src/pages/projects/[projectId]/info.vue

@@ -25,6 +25,12 @@ import {computed} from 'vue'
 import DOMPurify from 'dompurify'
 import {useProjectStore} from '@/stores/projects'
 
+definePage({
+	name: 'project.info',
+	meta: { showAsModal: true },
+	props: route => ({ projectId: Number(route.params.projectId as string) }),
+})
+
 const props = defineProps<{
 	projectId: number
 }>()

frontend/src/pages/projects/[projectId]/settings/archive.vue

@@ -19,7 +19,7 @@ export default {name: 'ProjectSettingArchive'}
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {useRouter, useRoute} from 'vue-router'
+import {useRouter, type RouteLocationNormalizedLoaded} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import {success} from '@/message'
@@ -28,12 +28,28 @@ import {useTitle} from '@/composables/useTitle'
 import {useBaseStore} from '@/stores/base'
 import {useProjectStore} from '@/stores/projects'
 
+import type { IProject } from '@/modelTypes/IProject'
+
+definePage({
+	name: 'project.settings.archive',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.settings.archive'>
+
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
+
+const props = defineProps<{
+	projectId: IProject['id'],
+}>()
+
 const {t} = useI18n({useScope: 'global'})
 const projectStore = useProjectStore()
 const router = useRouter()
-const route = useRoute()
 
-const project = computed(() => projectStore.projects[route.params.projectId])
+const project = computed(() => projectStore.projects[props.projectId])
 useTitle(() => t('project.archive.title', {project: project.value.title}))
 
 async function archiveProject() {

frontend/src/pages/projects/[projectId]/settings/background.vue

@@ -112,7 +112,7 @@ export default { name: 'ProjectSettingBackground' }
 <script setup lang="ts">
 import {ref, computed, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useRoute, useRouter} from 'vue-router'
+import {useRouter, type RouteLocationNormalizedLoaded} from 'vue-router'
 import {useDebounceFn} from '@vueuse/core'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -133,11 +133,26 @@ import {useTitle} from '@/composables/useTitle'
 import CreateEdit from '@/components/misc/CreateEdit.vue'
 import {success} from '@/message'
 
+import type { IProject } from '@/modelTypes/IProject'
+
+definePage({
+	name: 'project.settings.background',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.settings.background'>
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
+
+const props = defineProps<{
+	projectId: IProject['id'],
+}>()
+
 const SEARCH_DEBOUNCE = 300
 
 const {t} = useI18n({useScope: 'global'})
 const baseStore = useBaseStore()
-const route = useRoute()
 const router = useRouter()
 
 useTitle(() => t('project.background.title'))
@@ -200,7 +215,7 @@ async function setBackground(backgroundId: string) {
 
 	const project = await backgroundService.update({
 		id: backgroundId,
-		projectId: route.params.projectId,
+		projectId: props.projectId,
 	})
 	await baseStore.handleSetCurrentProject({project, forceUpdate: true})
 	projectStore.setProject(project)
@@ -214,7 +229,7 @@ async function uploadBackground() {
 	}
 
 	const project = await backgroundUploadService.value.create(
-		route.params.projectId,
+		props.projectId,
 		backgroundUploadInput.value?.files[0],
 	)
 	await baseStore.handleSetCurrentProject({project, forceUpdate: true})

frontend/src/pages/projects/[projectId]/settings/delete.vue

@@ -33,35 +33,50 @@
 
 <script setup lang="ts">
 import {computed, ref, watchEffect} from 'vue'
+import {useRouter, type RouteLocationNormalizedLoaded} from 'vue-router'
 import {useTitle} from '@/composables/useTitle'
 import {useI18n} from 'vue-i18n'
-import {useRoute, useRouter} from 'vue-router'
 import {success} from '@/message'
 import Loading from '@/components/misc/Loading.vue'
 import {useProjectStore} from '@/stores/projects'
 import TaskService from '@/services/task'
 
+import type { IProject } from '@/modelTypes/IProject'
+
+definePage({
+	name: 'project.settings.delete',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.settings.delete'>
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
+
+const props = defineProps<{
+	projectId: IProject['id'],
+}>()
+
 const {t} = useI18n({useScope: 'global'})
 const projectStore = useProjectStore()
-const route = useRoute()
 const router = useRouter()
 
 const totalTasks = ref<number | null>(null)
 
-const project = computed(() => projectStore.projects[route.params.projectId])
+const project = computed(() => projectStore.projects[props.projectId])
 const projectIdsToDelete = ref<number[]>([])
 
 watchEffect(
 	async () => {
-		if (!route.params.projectId) {
+		if (!props.projectId) {
 			return
 		}
 
 		projectIdsToDelete.value = projectStore
-			.getChildProjects(parseInt(route.params.projectId))
+			.getChildProjects(props.projectId)
 			.map(p => p.id)
 
-		projectIdsToDelete.value.push(parseInt(route.params.projectId))
+		projectIdsToDelete.value.push(props.projectId)
 
 		const taskService = new TaskService()
 		await taskService.getAll({}, {filter: `project in ${projectIdsToDelete.value.join(',')}`})

frontend/src/pages/projects/[projectId]/settings/duplicate.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import {ref, watch} from 'vue'
-import {useRoute} from 'vue-router'
+import {type RouteLocationNormalizedLoaded} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import CreateEdit from '@/components/misc/CreateEdit.vue'
@@ -24,13 +24,26 @@ import {useTitle} from '@/composables/useTitle'
 import {useProject, useProjectStore} from '@/stores/projects'
 import type {IProject} from '@/modelTypes/IProject'
 
+definePage({
+	name: 'project.settings.duplicate',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.settings.duplicate'>
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
+
+const props = defineProps<{
+	projectId: IProject['id'],
+}>()
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => t('project.duplicate.title'))
 
-const route = useRoute()
 const projectStore = useProjectStore()
 
-const {project, isLoading, duplicateProject} = useProject(route.params.projectId)
+const {project, isLoading, duplicateProject} = useProject(() => props.projectId)
 
 const parentProject = ref<IProject | null>(null)
 watch(

frontend/src/pages/projects/[projectId]/settings/edit.vue

@@ -84,7 +84,7 @@ export default {name: 'ProjectSettingEdit'}
 
 <script setup lang="ts">
 import {watch, ref} from 'vue'
-import {useRouter} from 'vue-router'
+import {useRoute, useRouter, type RouteLocationNormalizedLoaded} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
@@ -101,6 +101,16 @@ import {useProject} from '@/stores/projects'
 import {useTitle} from '@/composables/useTitle'
 import {RIGHTS} from '@/constants/rights'
 
+definePage({
+	name: 'project.settings.edit',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.settings.edit'>
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
+
 const props = defineProps<{
 	projectId: IProject['id'],
 }>()

frontend/src/pages/projects/[projectId]/settings/share.vue

@@ -32,7 +32,7 @@ export default {name: 'ProjectSettingShare'}
 
 <script lang="ts" setup>
 import {ref, computed, watchEffect} from 'vue'
-import {useRoute} from 'vue-router'
+import {useRoute, type RouteLocationNormalizedLoaded} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import {useTitle} from '@vueuse/core'
 
@@ -48,6 +48,16 @@ import userTeam from '@/components/sharing/UserTeam.vue'
 import {useBaseStore} from '@/stores/base'
 import {useConfigStore} from '@/stores/config'
 
+definePage({
+	name: 'project.settings.share',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.settings.share'>
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
+
 const {t} = useI18n({useScope: 'global'})
 
 const project = ref<IProject>()

frontend/src/pages/projects/[projectId]/settings/views.vue

@@ -15,6 +15,17 @@ import ProjectModel from '@/models/project'
 import Message from '@/components/misc/Message.vue'
 import draggable from 'zhyswan-vuedraggable'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+definePage({
+	name: 'project.settings.views',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.settings.views'>
+		return { projectId: Number(castedRoute.params.projectId) }
+	},
+})
 
 const props = defineProps<{
 	projectId: number

frontend/src/pages/projects/[projectId]/settings/webhooks.vue

@@ -3,8 +3,8 @@ export default {name: 'ProjectSettingWebhooks'}
 </script>
 
 <script lang="ts" setup>
-import {ref, computed, watchEffect} from 'vue'
+import {ref, watchEffect} from 'vue'
-import {useRoute} from 'vue-router'
+import type {RouteLocationNormalizedLoaded} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import {useTitle} from '@vueuse/core'
 
@@ -25,6 +25,20 @@ import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
 import {success} from '@/message'
 import {isValidHttpUrl} from '@/helpers/isValidHttpUrl'
 
+definePage({
+	name: 'project.settings.webhooks',
+	meta: { showAsModal: true },
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'project.settings.webhooks'>
+		return { projectId: parseInt(castedRoute.params.projectId, 2) }
+	},
+})
+
+const props = defineProps<{
+	projectId: number
+}>()
+
 const {t} = useI18n({useScope: 'global'})
 
 const project = ref<IProject>()
@@ -40,13 +54,7 @@ async function loadProject(projectId: number) {
 	await loadWebhooks()
 }
 
-const route = useRoute()
+watchEffect(() => props.projectId !== undefined && loadProject(props.projectId))
-const projectId = computed(() => route.params.projectId !== undefined
-	? parseInt(route.params.projectId as string)
-	: undefined,
-)
-
-watchEffect(() => projectId.value !== undefined && loadProject(projectId.value))
 
 const webhooks = ref<IWebhook[]>()
 const webhookService = new WebhookService()

frontend/src/pages/share/[share]/auth.vue

@@ -55,6 +55,8 @@ import {useBaseStore} from '@/stores/base'
 import {useAuthStore} from '@/stores/auth'
 import {useRedirectToLastVisited} from '@/composables/useRedirectToLastVisited'
 
+definePage({ name: 'link-share.auth' })
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(t('sharing.authenticating'))
 const {getLastVisitedRoute} = useRedirectToLastVisited()
@@ -106,7 +108,7 @@ function useAuth() {
 			}
 
 			return router.push({
-				name: 'project.index',
+				name: 'project',
 				params: {
 					projectId, 
 				},

frontend/src/pages/task/[id].vue

@@ -35,7 +35,7 @@
 					</a>
 					<RouterLink 
 						v-else
-						:to="{ name: 'project.index', params: { projectId: p.id } }"
+						:to="{ name: 'project', params: { projectId: p.id } }"
 					>
 						{{ getProjectTitle(p) }}
 					</RouterLink>
@@ -586,7 +586,7 @@
 
 <script lang="ts" setup>
 import {ref, reactive, shallowReactive, computed, watch, nextTick, onMounted, onBeforeUnmount} from 'vue'
-import {useRouter, type RouteLocation} from 'vue-router'
+import {useRouter, type RouteLocation, type RouteLocationNormalizedLoaded} from 'vue-router'
 import {storeToRefs} from 'pinia'
 import {useI18n} from 'vue-i18n'
 import {unrefElement} from '@vueuse/core'
@@ -644,6 +644,16 @@ import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
 import type {Action as MessageAction} from '@/message'
 
+definePage({
+	name: 'task.detail',
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'task.detail'>
+
+		return { taskId: Number(castedRoute.params.id) }
+	},
+})
+
 const props = defineProps<{
 	taskId: ITask['id'],
 	backdropView?: RouteLocation['fullPath'],
@@ -876,7 +886,7 @@ const showDeleteModal = ref(false)
 async function deleteTask() {
 	await taskStore.delete(task.value)
 	success({message: t('task.detail.deleteSuccess')})
-	router.push({name: 'project.index', params: {projectId: task.value.projectId}})
+	router.push({name: 'project', params: {projectId: task.value.projectId}})
 }
 
 async function toggleTaskDone() {

frontend/src/pages/tasks/by/upcoming.vue

@@ -0,0 +1,27 @@
+<template>
+	<ShowTasks v-bind="props" />
+</template>
+
+<script setup lang="ts">
+import {parseDateOrString} from '@/helpers/time/parseDateOrString'
+import {getNextWeekDate} from '@/helpers/time/getNextWeekDate'
+
+import ShowTasks from '@/components/tasks/ShowTasks.vue'
+
+definePage({
+	name: 'tasks.range',
+	props: route => ({
+		dateFrom: parseDateOrString(route.query.from as string, new Date()),
+		dateTo: parseDateOrString(route.query.to as string, getNextWeekDate()),
+		showNulls: route.query.showNulls === 'true',
+		showOverdue: route.query.showOverdue === 'true',
+	}),
+})
+
+const props = defineProps<{
+	dateFrom?: Date | string,
+	dateTo?: Date | string,
+	showNulls?: boolean,
+	showOverdue?: boolean,
+}>()
+</script>

frontend/src/pages/teams/(teams).vue

@@ -46,6 +46,8 @@ import { useI18n } from 'vue-i18n'
 import TeamService from '@/services/team'
 import { useTitle } from '@/composables/useTitle'
 
+definePage({ name: 'teams.index' })
+
 const { t } = useI18n({useScope: 'global'})
 useTitle(() => t('team.title'))
 

frontend/src/pages/teams/[id]/edit.vue

@@ -260,7 +260,7 @@
 <script lang="ts" setup>
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useRoute, useRouter} from 'vue-router'
+import {useRouter, type RouteLocationNormalizedLoaded} from 'vue-router'
 
 import Editor from '@/components/input/AsyncEditor'
 import FancyCheckbox from '@/components/input/FancyCheckbox.vue'
@@ -282,9 +282,22 @@ import type {ITeam} from '@/modelTypes/ITeam'
 import type {IUser} from '@/modelTypes/IUser'
 import type {ITeamMember} from '@/modelTypes/ITeamMember'
 
+definePage({
+	name: 'teams.edit',
+	props: route => {
+		// https://github.com/posva/unplugin-vue-router/discussions/513#discussioncomment-10695660
+		const castedRoute = route as RouteLocationNormalizedLoaded<'teams.edit'>
+
+		return { id: Number(castedRoute.params.id) }
+	},
+})
+
+const props = defineProps<{
+	teamId: ITeam['id'],
+}>()
+
 const authStore = useAuthStore()
 const configStore = useConfigStore()
-const route = useRoute()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
 
@@ -302,7 +315,6 @@ const teamMemberService = ref<TeamMemberService>(new TeamMemberService())
 const userService = ref<UserService>(new UserService())
 
 const team = ref<ITeam>()
-const teamId = computed(() => Number(route.params.id))
 const memberToDelete = ref<ITeamMember>()
 const newMember = ref<IUser>()
 const foundUsers = ref<IUser[]>()
@@ -318,7 +330,7 @@ const title = ref('')
 loadTeam()
 
 async function loadTeam() {
-	team.value = await teamService.value.get({id: teamId.value})
+	team.value = await teamService.value.get({id: props.teamId})
 	title.value = t('team.edit.title', {team: team.value?.name})
 	useTitle(() => title.value)
 }
@@ -343,7 +355,7 @@ async function deleteTeam() {
 async function deleteMember() {
 	try {
 		await teamMemberService.value.delete({
-			teamId: teamId.value,
+			teamId: props.teamId,
 			username: memberToDelete.value.username,
 		})
 		success({message: t('team.edit.deleteUser.success')})
@@ -360,7 +372,7 @@ async function addUser() {
 		return
 	}
 	await teamMemberService.value.create({
-		teamId: teamId.value,
+		teamId: props.teamId,
 		username: newMember.value.username,
 	})
 	newMember.value = null
@@ -371,7 +383,7 @@ async function addUser() {
 async function toggleUserType(member: ITeamMember) {
 	// FIXME: direct manipulation
 	member.admin = !member.admin
-	member.teamId = teamId.value
+	member.teamId = props.teamId
 	const r = await teamMemberService.value.update(member)
 	for (const tm in team.value.members) {
 		if (team.value.members[tm].id === member.id) {
@@ -399,7 +411,7 @@ async function findUser(query: string) {
 async function leave() {
 	try {
 		await teamMemberService.value.delete({
-			teamId: teamId.value,
+			teamId: props.teamId,
 			username: userInfo.value.username,
 		})
 		success({message: t('team.edit.leave.success')})

frontend/src/pages/teams/new.vue

@@ -74,6 +74,11 @@ import {success} from '@/message'
 
 import {useConfigStore} from '@/stores/config'
 
+definePage({
+	name: 'teams.create',
+	meta: { showAsModal: true },
+})
+
 const {t} = useI18n()
 const title = computed(() => t('team.create.title'))
 useTitle(title)

frontend/src/pages/user/export/download.vue

@@ -47,6 +47,8 @@ import {ref, computed, reactive} from 'vue'
 import DataExportService from '@/services/dataExport'
 import {useAuthStore} from '@/stores/auth'
 
+definePage({ name: 'user.export.download' })
+
 const dataExportService = reactive(new DataExportService())
 const password = ref('')
 const errPasswordRequired = ref(false)

frontend/src/pages/user/settings.vue

@@ -32,6 +32,11 @@ import { useConfigStore } from '@/stores/config'
 import { useAuthStore } from '@/stores/auth'
 import {useRoute} from 'vue-router'
 
+definePage({
+	name: 'user.settings',
+	redirect: {name: 'user.settings.general'},
+})
+
 const { t } = useI18n({useScope: 'global'})
 useTitle(() => t('user.settings.title'))
 

frontend/src/pages/user/settings/api-tokens.vue

@@ -14,6 +14,8 @@ import {useI18n} from 'vue-i18n'
 import Message from '@/components/misc/Message.vue'
 import type {IApiToken} from '@/modelTypes/IApiToken'
 
+definePage({ name: 'user.settings.apiTokens' })
+
 const service = new ApiTokenService()
 const tokens = ref<IApiToken[]>([])
 const apiDocsUrl = window.API_URL + '/docs'

frontend/src/pages/user/settings/avatar.vue

@@ -81,6 +81,8 @@ import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 
+definePage({ name: 'user.settings.avatar' })
+
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 

frontend/src/pages/user/settings/caldav.vue

@@ -114,6 +114,8 @@ import type {ICaldavToken} from '@/modelTypes/ICaldavToken'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
 
+definePage({ name: 'user.settings.caldav' })
+
 const copy = useCopyToClipboard()
 
 const {t} = useI18n({useScope: 'global'})

frontend/src/pages/user/settings/data-export.vue

@@ -58,6 +58,8 @@ import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 
+definePage({ name: 'user.settings.data-export' })
+
 const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 

frontend/src/pages/user/settings/deletion.vue

@@ -126,6 +126,8 @@ import {success} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'
 
+definePage({ name: 'user.settings.deletion' })
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.deletion.title')} - ${t('user.settings.title')}`)
 

frontend/src/pages/user/settings/email-update.vue

@@ -62,6 +62,8 @@ import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
 import {useAuthStore} from '@/stores/auth'
 
+definePage({ name: 'user.settings.email-update' })
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.updateEmailTitle')} - ${t('user.settings.title')}`)
 

frontend/src/pages/user/settings/general.vue

@@ -239,6 +239,8 @@ import type {IUserSettings} from '@/modelTypes/IUserSettings'
 import {isSavedFilter} from '@/services/savedFilter'
 import {DEFAULT_PROJECT_VIEW_SETTINGS} from '@/modelTypes/IProjectView'
 
+definePage({ name: 'user.settings.general' })
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.general.title')} - ${t('user.settings.title')}`)
 

frontend/src/pages/user/settings/migrate.vue

@@ -24,10 +24,12 @@
 import {computed} from 'vue'
 import {useI18n} from 'vue-i18n'
 
-import {MIGRATORS} from './migrators'
+import {MIGRATORS} from '@/helpers/migrators'
 import {useTitle} from '@/composables/useTitle'
 import {useConfigStore} from '@/stores/config'
 
+definePage({ name: 'migrate.start' })
+
 const {t} = useI18n({useScope: 'global'})
 
 useTitle(() => t('migrate.title'))

frontend/src/pages/user/settings/password-update.vue

@@ -83,6 +83,8 @@ import {useTitle} from '@/composables/useTitle'
 import {success, error} from '@/message'
 import {useAuthStore} from '@/stores/auth'
 
+definePage({ name: 'user.settings.password-update' })
+
 const passwordUpdateService = shallowReactive(new PasswordUpdateService())
 const passwordUpdate = reactive(new PasswordUpdateModel())
 const passwordConfirm = ref('')

frontend/src/pages/user/settings/totp.vue

@@ -110,6 +110,8 @@ import {useTitle} from '@/composables/useTitle'
 import {useConfigStore} from '@/stores/config'
 import type {ITotp} from '@/modelTypes/ITotp'
 
+definePage({ name: 'user.settings.totp' })
+
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => `${t('user.settings.totp.title')} - ${t('user.settings.title')}`)
 

frontend/src/router/index.ts

@@ -1,75 +1,13 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, type RouteLocation } from 'vue-router'
-import type { RouteLocation } from 'vue-router'
+import { routes, handleHotUpdate } from 'vue-router/auto-routes'
+
 import {saveLastVisited} from '@/helpers/saveLastVisited'
 
-import {getProjectViewId} from '@/helpers/projectView'
-import {parseDateOrString} from '@/helpers/time/parseDateOrString'
-import {getNextWeekDate} from '@/helpers/time/getNextWeekDate'
 import {LINK_SHARE_HASH_PREFIX} from '@/constants/linkShareHash'
 
 import {useAuthStore} from '@/stores/auth'
 import {useBaseStore} from '@/stores/base'
 
-import HomeComponent from '@/views/Home.vue'
-import NotFoundComponent from '@/views/404.vue'
-const About = () => import('@/views/About.vue')
-// User Handling
-import LoginComponent from '@/views/user/Login.vue'
-import RegisterComponent from '@/views/user/Register.vue'
-import OpenIdAuth from '@/views/user/OpenIdAuth.vue'
-const DataExportDownload = () => import('@/views/user/DataExportDownload.vue')
-// Tasks
-import UpcomingTasksComponent from '@/views/tasks/ShowTasks.vue'
-import LinkShareAuthComponent from '@/views/sharing/LinkSharingAuth.vue'
-const TaskDetailView = () => import('@/views/tasks/TaskDetailView.vue')
-
-// Team Handling
-const ListTeamsComponent = () => import('@/views/teams/ListTeams.vue')
-// Label Handling
-const ListLabelsComponent = () => import('@/views/labels/ListLabels.vue')
-const NewLabelComponent = () => import('@/views/labels/NewLabel.vue')
-// Migration
-const MigrationComponent = () => import('@/views/migrate/Migration.vue')
-const MigrationHandlerComponent = () => import('@/views/migrate/MigrationHandler.vue')
-// Project View
-import ProjectView from '@/views/project/ProjectView.vue'
-const ProjectInfo = () => import('@/views/project/ProjectInfo.vue')
-
-// Project Settings
-const ListProjects = () => import('@/views/project/ListProjects.vue')
-const ProjectSettingEdit = () => import('@/views/project/settings/ProjectSettingsEdit.vue')
-const ProjectSettingBackground = () => import('@/views/project/settings/ProjectSettingsBackground.vue')
-const ProjectSettingDuplicate = () => import('@/views/project/settings/ProjectSettingsDuplicate.vue')
-const ProjectSettingShare = () => import('@/views/project/settings/ProjectSettingsShare.vue')
-const ProjectSettingWebhooks = () => import('@/views/project/settings/ProjectSettingsWebhooks.vue')
-const ProjectSettingDelete = () => import('@/views/project/settings/ProjectSettingsDelete.vue')
-const ProjectSettingArchive = () => import('@/views/project/settings/ProjectSettingsArchive.vue')
-const ProjectSettingViews = () =>  import('@/views/project/settings/ProjectSettingsViews.vue')
-
-// Saved Filters
-const FilterNew = () => import('@/views/filters/FilterNew.vue')
-const FilterEdit = () => import('@/views/filters/FilterEdit.vue')
-const FilterDelete = () => import('@/views/filters/FilterDelete.vue')
-
-const PasswordResetComponent = () => import('@/views/user/PasswordReset.vue')
-const GetPasswordResetComponent = () => import('@/views/user/RequestPasswordReset.vue')
-const UserSettingsComponent = () => import('@/views/user/Settings.vue')
-const UserSettingsAvatarComponent = () => import('@/views/user/settings/Avatar.vue')
-const UserSettingsCaldavComponent = () => import('@/views/user/settings/Caldav.vue')
-const UserSettingsDataExportComponent = () => import('@/views/user/settings/DataExport.vue')
-const UserSettingsDeletionComponent = () => import('@/views/user/settings/Deletion.vue')
-const UserSettingsEmailUpdateComponent = () => import('@/views/user/settings/EmailUpdate.vue')
-const UserSettingsGeneralComponent = () => import('@/views/user/settings/General.vue')
-const UserSettingsPasswordUpdateComponent = () => import('@/views/user/settings/PasswordUpdate.vue')
-const UserSettingsTOTPComponent = () => import('@/views/user/settings/TOTP.vue')
-const UserSettingsApiTokensComponent = () => import('@/views/user/settings/ApiTokens.vue')
-
-// Project Handling
-const NewProjectComponent = () => import('@/views/project/NewProject.vue')
-
-const EditTeamComponent = () => import('@/views/teams/EditTeam.vue')
-const NewTeamComponent = () =>  import('@/views/teams/NewTeam.vue')
-
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
 	scrollBehavior(to, from, savedPosition) {
@@ -87,148 +25,7 @@ const router = createRouter({
 		return {left: 0, top: 0}
 	},
 	routes: [
-		{
+		...routes,
-			path: '/',
-			name: 'home',
-			component: HomeComponent,
-		},
-		{
-			path: '/:pathMatch(.*)*',
-			name: 'not-found',
-			component: NotFoundComponent,
-		},
-		// if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
-		{
-			path: '/:pathMatch(.*)',
-			name: 'bad-not-found',
-			component: NotFoundComponent,
-		},
-		{
-			path: '/login',
-			name: 'user.login',
-			component: LoginComponent,
-			meta: {
-				title: 'user.auth.login',
-			},
-		},
-		{
-			path: '/get-password-reset',
-			name: 'user.password-reset.request',
-			component: GetPasswordResetComponent,
-			meta: {
-				title: 'user.auth.resetPassword',
-			},
-		},
-		{
-			path: '/password-reset',
-			name: 'user.password-reset.reset',
-			component: PasswordResetComponent,
-			meta: {
-				title: 'user.auth.resetPassword',
-			},
-		},
-		{
-			path: '/register',
-			name: 'user.register',
-			component: RegisterComponent,
-			meta: {
-				title: 'user.auth.createAccount',
-			},
-		},
-		{
-			path: '/user/settings',
-			name: 'user.settings',
-			component: UserSettingsComponent,
-			redirect: {name: 'user.settings.general'},
-			children: [
-				{
-					path: '/user/settings/avatar',
-					name: 'user.settings.avatar',
-					component: UserSettingsAvatarComponent,
-				},
-				{
-					path: '/user/settings/caldav',
-					name: 'user.settings.caldav',
-					component: UserSettingsCaldavComponent,
-				},
-				{
-					path: '/user/settings/data-export',
-					name: 'user.settings.data-export',
-					component: UserSettingsDataExportComponent,
-				},
-				{
-					path: '/user/settings/deletion',
-					name: 'user.settings.deletion',
-					component: UserSettingsDeletionComponent,
-				},
-				{
-					path: '/user/settings/email-update',
-					name: 'user.settings.email-update',
-					component: UserSettingsEmailUpdateComponent,
-				},
-				{
-					path: '/user/settings/general',
-					name: 'user.settings.general',
-					component: UserSettingsGeneralComponent,
-				},
-				{
-					path: '/user/settings/password-update',
-					name: 'user.settings.password-update',
-					component: UserSettingsPasswordUpdateComponent,
-				},
-				{
-					path: '/user/settings/totp',
-					name: 'user.settings.totp',
-					component: UserSettingsTOTPComponent,
-				},
-				{
-					path: '/user/settings/api-tokens',
-					name: 'user.settings.apiTokens',
-					component: UserSettingsApiTokensComponent,
-				},
-				{
-					path: '/user/settings/migrate',
-					name: 'migrate.start',
-					component: MigrationComponent,
-				},
-				{
-					path: '/migrate/:service',
-					name: 'migrate.service',
-					component: MigrationHandlerComponent,
-					props: route => ({
-						service: route.params.service as string,
-						code: route.query.code as string,
-					}),
-				},
-			],
-		},
-		{
-			path: '/user/export/download',
-			name: 'user.export.download',
-			component: DataExportDownload,
-		},
-		{
-			path: '/share/:share/auth',
-			name: 'link-share.auth',
-			component: LinkShareAuthComponent,
-		},
-		{
-			path: '/tasks/:id',
-			name: 'task.detail',
-			component: TaskDetailView,
-			props: route => ({ taskId: Number(route.params.id as string) }),
-		},
-		{
-			path: '/tasks/by/upcoming',
-			name: 'tasks.range',
-			component: UpcomingTasksComponent,
-			props: route => ({
-				dateFrom: parseDateOrString(route.query.from as string, new Date()),
-				dateTo: parseDateOrString(route.query.to as string, getNextWeekDate()),
-				showNulls: route.query.showNulls === 'true',
-				showOverdue: route.query.showOverdue === 'true',
-			}),
-		},
 		{
 			// Redirect old list routes to the respective project routes
 			// see: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
@@ -242,201 +39,14 @@ const router = createRouter({
 				}
 			},
 		},
-		{
-			path: '/projects',
-			name: 'projects.index',
-			component: ListProjects,
-		},
-		{
-			path: '/projects/new',
-			name: 'project.create',
-			component: NewProjectComponent,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:parentProjectId/new',
-			name: 'project.createFromParent',
-			component: NewProjectComponent,
-			props: route => ({ parentProjectId: Number(route.params.parentProjectId as string) }),
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:projectId/settings/edit',
-			name: 'project.settings.edit',
-			component: ProjectSettingEdit,
-			props: route => ({ projectId: Number(route.params.projectId as string) }),
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:projectId/settings/background',
-			name: 'project.settings.background',
-			component: ProjectSettingBackground,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:projectId/settings/duplicate',
-			name: 'project.settings.duplicate',
-			component: ProjectSettingDuplicate,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:projectId/settings/share',
-			name: 'project.settings.share',
-			component: ProjectSettingShare,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:projectId/settings/webhooks',
-			name: 'project.settings.webhooks',
-			component: ProjectSettingWebhooks,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:projectId/settings/delete',
-			name: 'project.settings.delete',
-			component: ProjectSettingDelete,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:projectId/settings/archive',
-			name: 'project.settings.archive',
-			component: ProjectSettingArchive,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/projects/:projectId/settings/views',
-			name: 'project.settings.views',
-			component: ProjectSettingViews,
-			meta: {
-				showAsModal: true,
-			},
-			props: route => ({ projectId: Number(route.params.projectId as string) }),
-		},
-		{
-			path: '/projects/:projectId/settings/edit',
-			name: 'filter.settings.edit',
-			component: FilterEdit,
-			meta: {
-				showAsModal: true,
-			},
-			props: route => ({ projectId: Number(route.params.projectId as string) }),
-		},
-		{
-			path: '/projects/:projectId/settings/delete',
-			name: 'filter.settings.delete',
-			component: FilterDelete,
-			meta: {
-				showAsModal: true,
-			},
-			props: route => ({ projectId: Number(route.params.projectId as string) }),
-		},
-		{
-			path: '/projects/:projectId/info',
-			name: 'project.info',
-			component: ProjectInfo,
-			meta: {
-				showAsModal: true,
-			},
-			props: route => ({ projectId: Number(route.params.projectId as string) }),
-		},
-		{
-			path: '/projects/:projectId',
-			name: 'project.index',
-			redirect(to) {
-				const viewId = getProjectViewId(Number(to.params.projectId as string))
-
-				if (viewId) {
-					console.debug('Replaced list view with', viewId)
-				}
-
-				return {
-					name: 'project.view',
-					params: {
-						projectId: parseInt(to.params.projectId as string),
-						viewId: viewId ?? 0,
-					},
-				}
-			},
-		},
-		{
-			path: '/projects/:projectId/:viewId',
-			name: 'project.view',
-			component: ProjectView,
-			props: route => ({ 
-				projectId: parseInt(route.params.projectId as string),
-				viewId: route.params.viewId ? parseInt(route.params.viewId as string): undefined,
-			}),
-		},
-		{
-			path: '/teams',
-			name: 'teams.index',
-			component: ListTeamsComponent,
-		},
-		{
-			path: '/teams/new',
-			name: 'teams.create',
-			component: NewTeamComponent,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/teams/:id/edit',
-			name: 'teams.edit',
-			component: EditTeamComponent,
-		},
-		{
-			path: '/labels',
-			name: 'labels.index',
-			component: ListLabelsComponent,
-		},
-		{
-			path: '/labels/new',
-			name: 'labels.create',
-			component: NewLabelComponent,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/filters/new',
-			name: 'filters.create',
-			component: FilterNew,
-			meta: {
-				showAsModal: true,
-			},
-		},
-		{
-			path: '/auth/openid/:provider',
-			name: 'openid.auth',
-			component: OpenIdAuth,
-		},
-		{
-			path: '/about',
-			name: 'about',
-			component: About,
-		},
 	],
 })
 
+// Update routes at runtime without reloading the page
+if (import.meta.hot) { 
+	handleHotUpdate(router) 
+}
+
 export async function getAuthForRoute(to: RouteLocation, authStore) {
 	if (authStore.authUser || authStore.authLinkShare) {
 		return

frontend/src/services/savedFilter.ts

@@ -87,7 +87,7 @@ export function useSavedFilter(projectId?: MaybeRefOrGetter<IProject['id']>) {
 	async function createFilter() {
 		filter.value = await filterService.create(filter.value)
 		await projectStore.loadAllProjects()
-		router.push({name: 'project.index', params: {projectId: getProjectId(filter.value)}})
+		router.push({name: 'project', params: {projectId: getProjectId(filter.value)}})
 	}
 
 	async function saveFilter() {

frontend/src/stores/config.ts

@@ -6,7 +6,7 @@ import {HTTPFactory} from '@/helpers/fetcher'
 import {objectToCamelCase} from '@/helpers/case'
 
 import type {IProvider} from '@/types/IProvider'
-import type {MIGRATORS} from '@/views/migrate/migrators'
+import type {MIGRATORS} from '@/helpers/migrators'
 import {InvalidApiUrlProvidedError} from '@/helpers/checkAndSetApiUrl'
 
 export interface ConfigState {

frontend/src/stores/projects.ts

@@ -150,7 +150,7 @@ export const useProjectStore = defineStore('project', () => {
 			const createdProject = await projectService.create(project)
 			setProject(createdProject)
 			router.push({
-				name: 'project.index',
+				name: 'project',
 				params: { projectId: createdProject.id },
 			})
 			return createdProject
@@ -315,7 +315,7 @@ export function useProject(projectId: MaybeRefOrGetter<IProject['id']>) {
 
 		projectStore.setProject(duplicate.duplicatedProject)
 		success({message: t('project.duplicate.success')})
-		router.push({name: 'project.index', params: {projectId: duplicate.duplicatedProject.id}})
+		router.push({name: 'project', params: {projectId: duplicate.duplicatedProject.id}})
 	}
 
 	return {

frontend/tsconfig.app.json

@@ -6,7 +6,9 @@
     "src/**/*",
     "src/**/*.vue",
     "src/**/*.json",
-    "tailwind.config.js"
+    "tailwind.config.js",
+    // https://uvr.esm.is/introduction.html#setup
+    "./typed-router.d.ts"
   ],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {

frontend/typed-router.d.ts

@@ -0,0 +1,66 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    'user.password-reset.request': RouteRecordInfo<'user.password-reset.request', '/:auth?/get-password-reset', { auth?: ParamValueZeroOrOne<true> }, { auth?: ParamValueZeroOrOne<false> }>,
+    'user.login': RouteRecordInfo<'user.login', '/:auth?/login', { auth?: ParamValueZeroOrOne<true> }, { auth?: ParamValueZeroOrOne<false> }>,
+    'user.password-reset.reset': RouteRecordInfo<'user.password-reset.reset', '/:auth?/password-reset', { auth?: ParamValueZeroOrOne<true> }, { auth?: ParamValueZeroOrOne<false> }>,
+    'user.register': RouteRecordInfo<'user.register', '/:auth?/register', { auth?: ParamValueZeroOrOne<true> }, { auth?: ParamValueZeroOrOne<false> }>,
+    'not-found': RouteRecordInfo<'not-found', '/:path(.*)*', { path?: ParamValueZeroOrMore<true> }, { path?: ParamValueZeroOrMore<false> }>,
+    'home': RouteRecordInfo<'home', '/(home)', Record<never, never>, Record<never, never>>,
+    'about': RouteRecordInfo<'about', '/about', Record<never, never>, Record<never, never>>,
+    'openid.auth': RouteRecordInfo<'openid.auth', '/auth/openid/:provider', { provider: ParamValue<true> }, { provider: ParamValue<false> }>,
+    'filter.settings.delete': RouteRecordInfo<'filter.settings.delete', '/filters/:projectId/settings/delete', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'filter.settings.edit': RouteRecordInfo<'filter.settings.edit', '/filters/:projectId/settings/edit', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'filters.create': RouteRecordInfo<'filters.create', '/filters/new', Record<never, never>, Record<never, never>>,
+    'labels.index': RouteRecordInfo<'labels.index', '/labels/(labels)', Record<never, never>, Record<never, never>>,
+    'labels.create': RouteRecordInfo<'labels.create', '/labels/new', Record<never, never>, Record<never, never>>,
+    'migrate.service': RouteRecordInfo<'migrate.service', '/migrate/:service', { service: ParamValue<true> }, { service: ParamValue<false> }>,
+    'project.create': RouteRecordInfo<'project.create', '/projects/:parentProjectId?/new', { parentProjectId?: ParamValueZeroOrOne<true> }, { parentProjectId?: ParamValueZeroOrOne<false> }>,
+    'project': RouteRecordInfo<'project', '/projects/:projectId/:viewId?', { projectId: ParamValue<true>, viewId?: ParamValueZeroOrOne<true> }, { projectId: ParamValue<false>, viewId?: ParamValueZeroOrOne<false> }>,
+    'project.info': RouteRecordInfo<'project.info', '/projects/:projectId/info', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'project.settings.archive': RouteRecordInfo<'project.settings.archive', '/projects/:projectId/settings/archive', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'project.settings.background': RouteRecordInfo<'project.settings.background', '/projects/:projectId/settings/background', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'project.settings.delete': RouteRecordInfo<'project.settings.delete', '/projects/:projectId/settings/delete', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'project.settings.duplicate': RouteRecordInfo<'project.settings.duplicate', '/projects/:projectId/settings/duplicate', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'project.settings.edit': RouteRecordInfo<'project.settings.edit', '/projects/:projectId/settings/edit', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'project.settings.share': RouteRecordInfo<'project.settings.share', '/projects/:projectId/settings/share', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'project.settings.views': RouteRecordInfo<'project.settings.views', '/projects/:projectId/settings/views', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'project.settings.webhooks': RouteRecordInfo<'project.settings.webhooks', '/projects/:projectId/settings/webhooks', { projectId: ParamValue<true> }, { projectId: ParamValue<false> }>,
+    'projects.index': RouteRecordInfo<'projects.index', '/projects/(projects)', Record<never, never>, Record<never, never>>,
+    'link-share.auth': RouteRecordInfo<'link-share.auth', '/share/:share/auth', { share: ParamValue<true> }, { share: ParamValue<false> }>,
+    'task.detail': RouteRecordInfo<'task.detail', '/task/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'tasks.range': RouteRecordInfo<'tasks.range', '/tasks/by/upcoming', Record<never, never>, Record<never, never>>,
+    'teams.edit': RouteRecordInfo<'teams.edit', '/teams/:id/edit', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'teams.index': RouteRecordInfo<'teams.index', '/teams/(teams)', Record<never, never>, Record<never, never>>,
+    'teams.create': RouteRecordInfo<'teams.create', '/teams/new', Record<never, never>, Record<never, never>>,
+    'user.export.download': RouteRecordInfo<'user.export.download', '/user/export/download', Record<never, never>, Record<never, never>>,
+    'user.settings': RouteRecordInfo<'user.settings', '/user/settings', Record<never, never>, Record<never, never>>,
+    'user.settings.apiTokens': RouteRecordInfo<'user.settings.apiTokens', '/user/settings/api-tokens', Record<never, never>, Record<never, never>>,
+    'user.settings.avatar': RouteRecordInfo<'user.settings.avatar', '/user/settings/avatar', Record<never, never>, Record<never, never>>,
+    'user.settings.caldav': RouteRecordInfo<'user.settings.caldav', '/user/settings/caldav', Record<never, never>, Record<never, never>>,
+    'user.settings.data-export': RouteRecordInfo<'user.settings.data-export', '/user/settings/data-export', Record<never, never>, Record<never, never>>,
+    'user.settings.deletion': RouteRecordInfo<'user.settings.deletion', '/user/settings/deletion', Record<never, never>, Record<never, never>>,
+    'user.settings.email-update': RouteRecordInfo<'user.settings.email-update', '/user/settings/email-update', Record<never, never>, Record<never, never>>,
+    'user.settings.general': RouteRecordInfo<'user.settings.general', '/user/settings/general', Record<never, never>, Record<never, never>>,
+    'migrate.start': RouteRecordInfo<'migrate.start', '/user/settings/migrate', Record<never, never>, Record<never, never>>,
+    'user.settings.password-update': RouteRecordInfo<'user.settings.password-update', '/user/settings/password-update', Record<never, never>, Record<never, never>>,
+    'user.settings.totp': RouteRecordInfo<'user.settings.totp', '/user/settings/totp', Record<never, never>, Record<never, never>>,
+  }
+}

frontend/vite.config.ts

@@ -16,6 +16,7 @@ import postcssPresetEnv from 'postcss-preset-env'
 import postcssEasingGradients from 'postcss-easing-gradients'
 import tailwindcss from 'tailwindcss'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import VueRouter from 'unplugin-vue-router/vite'
 
 const pathSrc = fileURLToPath(new URL('./src', import.meta.url)).replaceAll('\\', '/')
 
@@ -100,6 +101,22 @@ export default defineConfig(({mode}) => {
 			},
 		},
 		plugins: [
+			VueRouter({
+				// FIXME: use dynamic imports for these components
+				importMode: (filePath) => {
+					const syncImports = [
+						pathSrc + '/pages/[[auth]]/register.vue',
+						pathSrc + '/pages/share/[share]/auth.vue',
+					]
+
+					if (syncImports.includes(filePath)) {
+						console.log('sync')
+						return 'sync'
+					}
+
+					return 'async'
+				},
+			}),
 			vue({
 				script: {
 					propsDestructure: true,