Upgrade Vuejs to v3

web/package.json

@@ -16,21 +16,24 @@
     "core-js": "^3.40.0",
     "cron-parser": "^5.3.0",
     "dayjs": "^1.11.13",
-    "vue": "^2.6.14",
+    "mitt": "^3.0.1",
+    "vue": "^3.5.13",
     "vue-chartjs": "^4.0.0",
     "vue-codemirror": "^4.0.6",
-    "vue-i18n": "^8.18.2",
-    "vue-router": "^3.5.4",
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.3.0",
     "vue-virtual-scroll-list": "^2.3.5",
     "vuedraggable": "^2.24.3",
-    "vuetify": "^2.6.10"
+    "vuetify": "^3.7.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^5.0.6",
     "@vue/cli-plugin-eslint": "^5.0.6",
     "@vue/cli-plugin-router": "^5.0.6",
     "@vue/cli-plugin-unit-mocha": "^5.0.6",
     "@vue/cli-service": "^5.0.6",
+    "@vue/compat": "^3.5.13",
+    "@vue/compiler-sfc": "^3.5.13",
     "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/test-utils": "^2.0.0",
     "babel-eslint": "^10.1.0",
@@ -51,11 +54,9 @@
     "openai": "^4.65.0",
     "plugin-error": "^2.0.1",
     "prettier": "^3.4.2",
-    "sass": "~1.32.12",
+    "sass": "^1.62.0",
     "sass-loader": "^13.0.0",
     "through2": "^4.0.2",
-    "vue-cli-plugin-vuetify": "~2.5.0",
-    "vue-template-compiler": "^2.6.14",
-    "vuetify-loader": "^1.8.0"
+    "webpack-plugin-vuetify": "^3.0.3"
   }
 }

web/src/App.vue

@@ -907,8 +907,7 @@
   font-size: 1rem;
 }
 
-@import '~vuetify/src/styles/styles.sass';
-@media #{map-get($display-breakpoints, 'xl-only')} {
+@media (min-width: 1920px) and (max-width: 2559px) {
   .CenterToScreen {
     transform: translateX(-130px);
   }

web/src/assets/scss/main.scss

@@ -57,7 +57,7 @@ $mdi-font-path: "~@mdi/font/fonts";
   src: url("../fonts/Roboto-Black.ttf") format('truetype');
 }
 
-@import '~vuetify/src/styles/main';
+@import 'vuetify/styles';
 
 .v-application.theme--dark .v-overlay__scrim {
   background: #878787 !important;

web/src/components/IndeterminateProgressCircular.vue

@@ -95,7 +95,7 @@ export default {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     indeterminateTimer.removeListener(this.listenerId);
   },
 };

web/src/components/TaskDetails.vue

@@ -89,19 +89,19 @@
                 </tr>
                 <tr>
                   <td><b>{{ $t('created') }}</b></td>
-                  <td>{{ item.created | formatDate }}</td>
+                  <td>{{ $filters.formatDate(item.created) }}</td>
                 </tr>
                 <tr>
                   <td><b>{{ $t('started') }}</b></td>
-                  <td>{{ item.start | formatDate }}</td>
+                  <td>{{ $filters.formatDate(item.start) }}</td>
                 </tr>
                 <tr>
                   <td><b>{{ $t('end') }}</b></td>
-                  <td>{{ item.end | formatDate }}</td>
+                  <td>{{ $filters.formatDate(item.end) }}</td>
                 </tr>
                 <tr>
                   <td><b>{{ $t('duration') }}</b></td>
-                  <td>{{ [item.start, item.end] | formatMilliseconds }}</td>
+                  <td>{{ $filters.formatMilliseconds([item.start, item.end]) }}</td>
                 </tr>
                 </tbody>
               </template>

web/src/components/TaskLink.vue

@@ -36,8 +36,6 @@
 </template>
 <style lang="scss">
 
-@import '~vuetify/src/styles/settings/_colors.scss';
-
 .task-link-with-tooltip {
   text-decoration: underline !important;
   text-decoration-style: dashed !important;
@@ -47,7 +45,7 @@
 a.task-link-with-tooltip {
   &:hover {
     text-decoration-style: solid !important;
-    text-decoration-color: map-deep-get($blue, 'darken-2') !important;
+    text-decoration-color: #1565c0 !important;
   }
 }
 

web/src/components/TaskList.vue

@@ -48,11 +48,11 @@
       </template>
 
       <template v-slot:item.start="{ item }">
-        {{ item.start | formatDate }}
+        {{ $filters.formatDate(item.start) }}
       </template>
 
       <template v-slot:item.end="{ item }">
-        {{ [item.start, item.end] | formatMilliseconds }}
+        {{ $filters.formatMilliseconds([item.start, item.end]) }}
       </template>
 
       <template v-slot:item.actions="{ item }">

web/src/components/TaskLogView.vue

@@ -30,13 +30,13 @@
 
         Started <span v-if="user">by <b>{{ user.name }}</b></span>
 
-        at <b>{{ item.start | formatDate }}</b>
+        at <b>{{ $filters.formatDate(item.start) }}</b>
       </span>
 
       <span class="ml-3 hidden-sm-and-down task-log-view__status_part">
         <v-icon
           small style="transform: translateY(-1px)">mdi-clock-outline</v-icon>
-        {{ [item.start, item.end] | formatMilliseconds }}
+        {{ $filters.formatMilliseconds([item.start, item.end]) }}
       </span>
     </div>
 
@@ -58,9 +58,9 @@
       >
         <div class="task-log-records__record" v-for="record in output" :key="record.id">
           <div class="task-log-records__time">
-            {{ record.time | formatTime }}
+            {{ $filters.formatTime(record.time) }}
           </div>
-          <div class="task-log-records__output" v-html="$options.filters.formatLog(record.output)">
+          <div class="task-log-records__output" v-html="$filters.formatLog(record.output)">
           </div>
         </div>
       </VirtualList>
@@ -130,8 +130,6 @@
 
 <style lang="scss">
 
-@import '~vuetify/src/styles/settings/_variables';
-
 $card-title-height: 68px;
 
 $task-log-message-offset: -18px;
@@ -347,7 +345,7 @@ export default {
     await this.loadData();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.outputInterval);
   },
 

web/src/components/TaskLogViewRecord.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="task-log-records__record">
     <div class="task-log-records__time">
-      {{ source.time | formatTime }}
+      {{ $filters.formatTime(source.time) }}
     </div>
-    <div class="task-log-records__output" v-html="$options.filters.formatLog(source.output)">
+    <div class="task-log-records__output" v-html="$filters.formatLog(source.output)">
     </div>
   </div>
 </template>

web/src/event-bus.js

@@ -1,4 +1,9 @@
-import Vue from 'vue';
-import i18n from '@/plugins/i18';
+import mitt from 'mitt';
 
-export default new Vue(i18n);
+const emitter = mitt();
+
+export default {
+  $on: emitter.on.bind(emitter),
+  $off: emitter.off.bind(emitter),
+  $emit: emitter.emit.bind(emitter),
+};

web/src/main.js

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import axios from 'axios';
 import { AnsiUp } from 'ansi_up';
 import { Line, Bar } from 'vue-chartjs/legacy';
@@ -39,78 +39,57 @@ convert.ansi_colors = [
 ];
 
 axios.defaults.baseURL = document.baseURI;
-Vue.config.productionTip = false;
-
-//
-// Dates
-//
-
-// install needed plugins:
-// npm install dayjs dayjs-plugin-relativeTime dayjs-plugin-localizedFormat dayjs-plugin-duration
 
 // extend Day.js
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(durationPlugin);
 
-Vue.filter('formatDate2', (value) => (value
-  ? dayjs(String(value)).format('LL')
-  : '—'));
-
-// formatDate: “from now” if today, else localized date+time
-Vue.filter('formatDate', (value) => {
-  if (!value) return '—';
-  const date = dayjs(value);
-  const now = dayjs();
-
-  if (now.isSame(date, 'day')) {
-    return `${date.fromNow()} (${date.format('HH:mm')})`;
-  }
-  return date.format('L HH:mm');
-});
-
-// formatTime: localized time with seconds
-Vue.filter('formatTime', (value) => (value ? dayjs(String(value)).format('LTS') : '—'));
-
-// formatLog: unchanged (ANSI → HTML)
-Vue.filter('formatLog', (value) => (value ? convert.ansi_to_html(String(value)) : value));
-
-// formatMilliseconds: humanize a duration or a start/end pair
-Vue.filter('formatMilliseconds', (value) => {
-  if (value == null || value === '') return '—';
-
-  let ms;
-
-  if (typeof value === 'string') {
-    ms = parseInt(value, 10);
-  } else if (typeof value === 'number') {
-    ms = value;
-  } else if (Array.isArray(value)) {
-    if (value.length !== 2) {
-      throw new Error('formatMilliseconds: invalid value format');
+const app = createApp(App);
+
+// global filter replacements
+app.config.globalProperties.$filters = {
+  formatDate2: (value) => (value ? dayjs(String(value)).format('LL') : '—'),
+  formatDate: (value) => {
+    if (!value) return '—';
+    const date = dayjs(value);
+    const now = dayjs();
+    if (now.isSame(date, 'day')) {
+      return `${date.fromNow()} (${date.format('HH:mm')})`;
     }
-    const [startRaw, endRaw] = value;
-    if (startRaw == null || startRaw === '') return '—';
-    const start = dayjs(startRaw);
-    const end = endRaw == null || endRaw === '' ? dayjs() : dayjs(endRaw);
-    ms = end.valueOf() - start.valueOf();
-  } else {
-    throw new Error('formatMilliseconds: unsupported value type');
-  }
-
-  return dayjs.duration(ms).humanize();
-});
-
-//
-// -------------
-//
-
-Vue.component('LineChartGenerator', Line);
-Vue.component('BarChartGenerator', Bar);
-
-new Vue({
-  router,
-  vuetify,
-  i18n,
-  render: (h) => h(App),
-}).$mount('#app');
+    return date.format('L HH:mm');
+  },
+  formatTime: (value) => (value ? dayjs(String(value)).format('LTS') : '—'),
+  formatLog: (value) => (value ? convert.ansi_to_html(String(value)) : value),
+  formatMilliseconds: (value) => {
+    if (value == null || value === '') return '—';
+    let ms;
+    if (typeof value === 'string') {
+      ms = parseInt(value, 10);
+    } else if (typeof value === 'number') {
+      ms = value;
+    } else if (Array.isArray(value)) {
+      if (value.length !== 2) {
+        throw new Error('formatMilliseconds: invalid value format');
+      }
+      const [startRaw, endRaw] = value;
+      if (startRaw == null || startRaw === '') return '—';
+      const start = dayjs(startRaw);
+      const end = endRaw == null || endRaw === '' ? dayjs() : dayjs(endRaw);
+      ms = end.valueOf() - start.valueOf();
+    } else {
+      throw new Error('formatMilliseconds: unsupported value type');
+    }
+    return dayjs.duration(ms).humanize();
+  },
+};
+
+// register legacy components from vue-chartjs if needed
+app.component('LineChartGenerator', Line);
+app.component('BarChartGenerator', Bar);
+
+app
+  .use(router)
+  .use(vuetify)
+  .use(i18n)
+  .mount('#app');

web/src/plugins/i18.js

@@ -1,18 +1,18 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
+import { createI18n } from 'vue-i18n';
 import { messages } from '../lang';
 
-Vue.use(VueI18n);
-
 let locale = localStorage.getItem('lang');
 
 if (!locale) {
   locale = navigator.language.replace('-', '_').toLocaleLowerCase();
 }
 
-export default new VueI18n({
+const i18n = createI18n({
+  legacy: true,
   fallbackLocale: 'en',
   locale,
   messages,
   silentFallbackWarn: true,
 });
+
+export default i18n;