feat: Fixed a lot of regressions

I updated vue and vuetify before to a new major version without fixing the breaking changes apparently.

This code layout now matches with the recommended way of doing Vue and Vuetify.

Author: dploeger

ccc-client/package-lock.json

@@ -7,22 +7,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.7.4",
+    "axios": "1.8.2",
     "@mdi/font": "7.0.96",
     "roboto-fontface": "*",
-    "vue": "^3.4.35",
-    "vuetify": "^3.6.14",
+    "vue": "^3.5.13",
+    "vuetify": "^3.8.1",
     "vue-markdown-render": "^2.0.1"
   },
   "devDependencies": {
     "@babel/types": "^7.21.4",
     "@types/node": "^18.15.0",
     "@types/markdown-it": "^13.0.1",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.2.3",
     "typescript": "^5.0.0",
-    "unplugin-fonts": "^1.0.3",
-    "vite": "^4.5.2",
-    "vite-plugin-vuetify": "^1.0.0",
+    "unplugin-fonts": "^1.3.1",
+    "vite": "^6.2.5",
+    "vite-plugin-vuetify": "^2.1.1",
     "vue-tsc": "^1.2.0",
     "miragejs": "^0.1.47",
     "lorem-ipsum": "^2.0.8"

ccc-client/package.json

@@ -1,15 +1,13 @@
 <template>
   <v-app>
-    <v-main>
-      <v-container class="fill-height" fluid>
-        <v-row align="center" justify="center">
-          <v-col cols="12" sm="8" md="8">
-            <Startup v-if="status === 'INIT'"/>
-            <MainScreen v-if="status === 'INITIALIZED'"/>
-          </v-col>
-        </v-row>
-      </v-container>
-      <v-footer absolute>
+    <v-layout ref="app">
+      <v-main class="d-flex align-center justify-center">
+        <v-container>
+          <Progress v-if="status === 'INIT'"/>
+          <MainScreen v-if="status === 'INITIALIZED'"/>
+        </v-container>
+      </v-main>
+      <v-footer app>
         <v-sheet class="text-body-2 w-100">
           <v-container fluid>
             <v-row dense>
@@ -23,49 +21,35 @@
           </v-container>
         </v-sheet>
       </v-footer>
-    </v-main>
+    </v-layout>
   </v-app>
 </template>
 
-<script lang="ts">
-import Vue, { defineComponent } from 'vue';
-import Progress from '@/components/Progress.vue';
+<script setup lang="ts">
+import { onMounted, onUnmounted, Ref, ref } from 'vue';
 import * as axios from 'axios';
 import MainScreen from '@/components/MainScreen.vue';
-import logoUrl from './assets/logo.svg?url';
+import logoUrlImport from './assets/logo.svg?url';
+import Progress from '@/components/Progress.vue';
 
-let status: string = 'INIT';
-let loadStatusInterval: NodeJS.Timer | null = null;
+const status = ref('');
+const loadStatusInterval: Ref<NodeJS.Timer | null> = ref(null);
+const logoUrl = ref(logoUrlImport);
 
-export default defineComponent({
-  components: { MainScreen, Startup: Progress },
-  data() {
-    return {
-      status,
-      loadStatusInterval,
-      logoUrl,
-    };
-  },
-  created() {
-    this.loadStatusInterval = setInterval(this.loadStatus.bind(this), 3000);
-    this.loadStatus();
-  },
-  methods: {
-    beforeDestroy() {
-      if (this.loadStatusInterval) {
-        clearInterval(loadStatusInterval as NodeJS.Timer);
-      }
-      this.loadStatusInterval = null;
-    },
-    loadStatus() {
-      axios.default.get('/api/status')
-        .then(
-          (backendStatus) => {
-            this.status = backendStatus.data.status;
-          },
-        );
-    },
-  },
+async function loadStatus() {
+  const backendStatus = await axios.default.get('/api/status');
+  status.value = backendStatus.data.status;
+}
+
+onMounted(async () => {
+  loadStatusInterval.value = setInterval(loadStatus.bind(this), 3000);
+  await loadStatus();
 });
 
+onUnmounted(() => {
+  if (loadStatusInterval.value) {
+    clearInterval(loadStatusInterval.value as NodeJS.Timer);
+  }
+  loadStatusInterval.value = null;
+});
 </script>

ccc-client/src/App.vue

@@ -45,45 +45,29 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { onMounted, Ref, ref } from 'vue';
 import * as axios from 'axios';
 import VueMarkdown from 'vue-markdown-render';
-import logoUrl from '../assets/logo.svg?url';
+import logoUrlImport from '../assets/logo.svg?url';
 
 interface Feature {
   Icon: string;
   Title: string;
   Description: string;
 }
 
-export default defineComponent({
-  components: {
-    VueMarkdown,
-  },
-  data() {
-    const features: Feature[] = [];
+const features: Ref<Feature[]> = ref([])
+const logoUrl = ref(logoUrlImport)
 
-    return {
-      features,
-      logoUrl,
-    };
-  },
-  mounted() {
-    axios.default.get('/api/features')
-        .then(
-            (backendFeatures) => {
-              this.features = backendFeatures.data;
-            },
-        );
-  },
-  methods: {
-    async copyCommand(command: string) {
-      await navigator.clipboard.writeText(command);
-    },
-  },
-});
+async function copyCommand(command: string) {
+  await navigator.clipboard.writeText(command)
+}
 
+onMounted(async () => {
+  const backendFeatures = await axios.default.get('/api/features')
+  features.value = backendFeatures.data
+})
 </script>
 
 <style scoped>