Bump to vue 3

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
     - name: Set up Node
       uses: actions/setup-node@v6
       with:
-        node-version: '20.x'
+        node-version: '22.x'
         cache: 'yarn'
     - name: Install dependencies
       run: yarn install
@@ -43,9 +43,23 @@ jobs:
     - name: Set up Node
       uses: actions/setup-node@v6
       with:
-        node-version: '20.x'
+        node-version: '22.x'
         cache: 'yarn'
     - name: Install dependencies
       run: yarn install
     - name: Lint
       run: yarn run lint --no-fix --max-warnings 0 --format stylish
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - name: Set up Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: '22.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install
+      - name: Check types
+        run: yarn run type-check
+

env.d.ts

@@ -0,0 +1,2 @@
+// This is defined by vite at build time
+declare let __APPLICATION_VERSION__: string;

eslint.config.ts

@@ -0,0 +1,56 @@
+import { globalIgnores } from "eslint/config";
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import globals from "globals";
+import prettier from "@vue/eslint-config-prettier";
+import vue from "eslint-plugin-vue";
+import vueParser from "vue-eslint-parser";
+import vuetify from "eslint-plugin-vuetify";
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+} from "@vue/eslint-config-typescript";
+
+export default defineConfigWithVueTs(
+  {
+    name: "app/files-to-lint",
+    files: ["**/*.{vue,ts}"],
+  },
+  globalIgnores(["**/dist/**", "eslint.config.ts"]),
+  eslint.configs.recommended,
+  {
+    files: ["**/*.vue"],
+    languageOptions: {
+      parser: vueParser,
+    },
+  },
+  tseslint.configs.strict,
+  tseslint.configs.stylistic,
+  ...vue.configs["flat/recommended"],
+  ...vuetify.configs["flat/recommended"],
+  vueTsConfigs.recommended,
+  prettier,
+  {
+    rules: {
+      curly: "error",
+      "no-console": "error",
+      "no-debugger": "error",
+      "no-invalid-this": "error",
+      "require-await": "error",
+      "vue/multi-word-component-names": "off",
+      "@typescript-eslint/explicit-function-return-type": [
+        "error",
+        { allowHigherOrderFunctions: false },
+      ],
+      "@typescript-eslint/explicit-module-boundary-types": "error",
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/no-non-null-assertion": "off",
+    },
+    languageOptions: {
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+);

flake.nix

@@ -35,7 +35,7 @@
             inherit pname version;
             src = pkgs.lib.cleanSourceWith { filter = name: type: !(builtins.elem name [ ".github" "flake.lock" "flake.nix" ]); src = ./.; name = "${pname}-${version}-source"; };
 
-            nativeBuildInputs = [ (pkgs.yarn.override { nodejs = pkgs.nodejs_20; }) ];
+            nativeBuildInputs = [ (pkgs.yarn.override { nodejs = pkgs.nodejs_22; }) ];
 
             configurePhase = ''
               cp -r ${deps}/node_modules/ .
@@ -60,7 +60,7 @@
             packages = with pkgs; [
               nixpkgs-fmt
               yarn2nix
-              (yarn.override { nodejs = nodejs_20; })
+              (yarn.override { nodejs = nodejs_22; })
             ];
           };
         };

index.html

@@ -12,6 +12,6 @@
       <strong>We're sorry but Accentor doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="main"></div>
-    <script type="module" src="src/main.js"></script>
+    <script type="module" src="src/main.ts"></script>
   </body>
 </html>

package.json

@@ -2,43 +2,56 @@
   "name": "accentor",
   "version": "0.34.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "lint": "eslint --ext .js,.vue src",
-    "preview": "vite preview"
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "@accentor/api-client-js": "^0.23.5",
+    "@accentor/api-client-js": "^0.23.6",
     "@mdi/font": "^7.4.47",
     "@mdi/svg": "^7.4.47",
-    "@vueuse/core": "^11.3.0",
+    "@unhead/vue": "^2.1.1",
+    "@vueuse/core": "^14.1.0",
     "fetch-retry": "^6.0.0",
     "gsap": "^3.14.2",
     "localforage": "^1.10.0",
-    "pinia": "2.3.1",
+    "pinia": "^3.0.4",
     "roboto-fontface": "^0.10.0",
-    "vue": "^2.7.16",
-    "vue-global-events": "^1.2.1",
-    "vue-i18n": "^8.28.2",
-    "vue-meta": "^2.4.0",
-    "vue-router": "^3.6.5",
-    "vuedraggable": "^2.24.3",
-    "vuetify": "^2.7.2"
+    "vue": "^3.5.26",
+    "vue-global-events": "^3.0.1",
+    "vue-i18n": "^11.0.1",
+    "vue-router": "^4.6.4",
+    "vuedraggable": "^4.1.0",
+    "vuetify": "^3.11.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.3.4",
-    "@vue/eslint-config-prettier": "^9.0.0",
+    "@eslint/js": "^9.39.2",
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^22.13.14",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.8.1",
     "autoprefixer": "^10.4.23",
-    "eslint": "^8.57.1",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-vue": "^9.32.0",
-    "eslint-plugin-vuetify": "^1.1.0",
+    "eslint-plugin-vue": "^10.6.2",
+    "eslint-plugin-vuetify": "^2.5.3",
+    "globals": "^16.5.0",
+    "jiti": "^2.6.1",
     "prettier": "^3.8.1",
     "sass": "^1.97.3",
-    "unplugin-vue-components": "^30.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.51.0",
     "vite": "7.3.1",
-    "vue-template-compiler": "^2.7.16"
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vite-plugin-vuetify": "^2.1.2",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.2.1"
   }
 }

scss/settings.scss

@@ -0,0 +1,4 @@
+@use "vuetify/settings" with (
+  $button-text-letter-spacing: 0,
+  $list-item-icon-opacity: 1,
+);

src/Root.vue

@@ -1,72 +1,37 @@
 <template>
   <VApp>
-    <router-view />
+    <Suspense>
+      <RouterView />
+      <template #fallback>
+        <VIcon>mdi-refresh mdi-spin</VIcon>
+      </template>
+    </Suspense>
   </VApp>
 </template>
 
-<script>
-export default {
-  name: "Root",
-  metaInfo: {
-    title: "Main",
-    titleTemplate: "%s | Accentor",
-  },
-};
+<script setup lang="ts">
+import { useHead } from "@unhead/vue";
+
+useHead({ title: "Main" });
 </script>
 
 <style lang="scss">
-@import "vuetify/src/styles/styles.sass";
-
 // Additional resets
 a {
   text-decoration: none;
-}
-
-// Component styles with global scope
-.actions {
-  .actions__button {
-    margin: 4px 8px 4px 0;
-  }
-}
-.actions--wide {
-  .actions__button {
-    margin: 8px 16px 8px 0;
-  }
-}
-
-@media (min-width: map-get($grid-breakpoints, "sm")) {
-  .actions--sm-wide {
-    .actions__button {
-      margin: 8px 16px 8px 0;
-    }
-  }
-}
-
-.button-group {
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow:
-    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-
-  &__button {
-    margin: 0;
-    border-radius: 0;
-  }
+  color: rgb(var(--v-theme-primary));
 }
 
 // Additional utility classes
 .break-word {
   word-break: break-word;
 }
 
-.white-space-nowrap {
-  white-space: nowrap;
+.no-break-word {
+  word-break: keep-all;
 }
 
-// Temporary fix until https://github.com/vuetifyjs/vuetify/issues/13678 is resolved
-.v-data-footer {
-  justify-content: flex-end;
+.white-space-nowrap {
+  white-space: nowrap;
 }
 </style>

src/api.js → src/api.ts

@@ -1,6 +1,6 @@
 import { createApiClient } from "@accentor/api-client-js";
 
-let url;
+let url: string;
 if (import.meta.env.VITE_API_URL !== undefined) {
   url = import.meta.env.VITE_API_URL;
 } else if (import.meta.env.PROD) {