feat(build): migrate to Vue 3 + bootstrap-vue-next

package.json

@@ -7,34 +7,31 @@
   "license": "MPL-2.0",
   "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "test": "jest",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
-    "lint_old": "eslint --ignore-path=.gitignore --ext .vue,.js,.ts ."
+    "lint": "eslint --ext .vue,.js,.ts src/"
   },
   "dependencies": {
     "@egjs/hammerjs": "^2.0.17",
-    "@fullcalendar/timegrid": "^5.10.1",
-    "@fullcalendar/vue": "^5.10.1",
+    "@fullcalendar/timegrid": "^6.1.15",
+    "@fullcalendar/vue3": "^6.1.15",
     "@pinia/testing": "^0.0.16",
-    "@types/chart.js": "^2.9.23",
     "@types/chrome": "0.0.89",
     "@types/color": "^3.0.1",
     "@types/d3": "^7.4",
     "@types/d3-hierarchy": "^3.1.0",
     "@types/jest": "^29",
     "@types/lodash": "^4.14.178",
     "@types/node": "^20.0",
-    "@vitejs/plugin-vue2": "^2.3.3",
+    "@vitejs/plugin-vue": "^5.2.1",
     "ajv": "^8.12.0",
     "ajv-keywords": "^5.1.0",
     "aw-client": "^0.3.7",
-    "bootstrap": "^4.6.1",
-    "bootstrap-vue": "^2.15.0",
-    "chart.js": "^3.8.0",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.25.0",
+    "chart.js": "^4.4.0",
     "color": "^4.0.0",
     "component-emitter": "^1.3.0",
     "core-js": "^3.19.3",
@@ -43,8 +40,6 @@
     "d3-scale-chromatic": "^3.0.0",
     "domain-browser": "^4.22.0",
     "dompurify": "^3.2.5",
-    "exports-loader": "^4.0.0",
-    "imports-loader": "^0.8.0",
     "jquery": "^3.5.1",
     "jsdom": "^21.1.1",
     "keycharm": "^0.3.1",
@@ -57,19 +52,16 @@
     "regenerator-runtime": "^0.14.1",
     "sass": "^1.44.0",
     "semver": "^7.6.0",
-    "style-loader": "^3.3.3",
     "typeface-varela-round": "0.0.54",
     "uuid": "^7.0.3",
     "vis-data": "^7.1.2",
     "vis-timeline": "^7.5.0",
     "vis-util": "^5.0.2",
     "vite": "^6.4.1",
-    "vue-awesome": "^3.5.1",
-    "vue-chartjs": "^4.1.0",
-    "vue-color": "^2.8.1",
+    "vue": "^3.5",
+    "vue-chartjs": "^5.3.1",
     "vue-d3-sunburst": "git+https://github.com/ErikBjare/Vue.D3.sunburst.git#patch-1",
-    "vue-datetime": "^1.0.0-beta.13",
-    "vuedraggable": "^2.24.3",
+    "vuedraggable": "^4.1.0",
     "weekstart": "^1.0.1",
     "xss": "^1.0.14"
   },
@@ -82,32 +74,22 @@
     "@babel/runtime": "^7.16.3",
     "@typescript-eslint/eslint-plugin": "^5.21",
     "@typescript-eslint/parser": "^5.21",
-    "@vue/cli-plugin-babel": "^5.0",
-    "@vue/cli-plugin-eslint": "^5.0",
-    "@vue/cli-plugin-pwa": "^5.0",
-    "@vue/cli-plugin-typescript": "^5.0",
-    "@vue/cli-plugin-unit-jest": "^5.0",
-    "@vue/cli-service": "^5.0",
-    "@vue/eslint-config-typescript": "^10.0",
-    "@vue/test-utils": "^1.3.0",
-    "@vue/vue2-jest": "^29.2.4",
+    "@vue/eslint-config-typescript": "^11.0",
+    "@vue/test-utils": "^2.4.6",
     "babel-loader": "^9.1.3",
     "babel-plugin-lodash": "^3.3.4",
     "connect-history-api-fallback": "^2.0.0",
-    "copy-webpack-plugin": "^5.1.1",
     "crypto-js": "^4.1.1",
     "css-loader": "^6.7.3",
     "eslint": "^7.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-jest": "^23.18",
     "eslint-plugin-prettier": "^3.1",
-    "eslint-plugin-vue": "^8.0",
+    "eslint-plugin-vue": "^9.0",
     "eventsource-polyfill": "^0.9.6",
     "express": "^5.1.0",
     "file-loader": "^6.2",
     "function-bind": "^1.0.2",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^5.5.0",
     "http-proxy-middleware": "^3.0.5",
     "jest": "^29",
     "jest-environment-jsdom": "^29",
@@ -123,34 +105,20 @@
     "sass-loader": "^8.0.2",
     "shelljs": "^0.8.5",
     "ts-jest": "^29",
-    "ts-loader": "^9.5",
     "tslint": "^5.20.1",
     "typescript": "^5.2",
     "url-loader": "^4.1",
     "vite-plugin-pwa": "^1.0.0",
-    "vue": "^2.7",
-    "vue-cli-plugin-pug": "^2.0.0",
     "vue-eslint-parser": "^9.3",
-    "vue-hot-reload-api": "^2.3.4",
-    "vue-loader": "^17.0",
-    "vue-router": "^3.5.3",
-    "vue-style-loader": "^4.1.0",
-    "webpack": "^5.99",
-    "webpack-dev-middleware": "^7.1.1",
-    "webpack-hot-middleware": "^2.22.2",
-    "webpack-merge": "^5.8.0"
+    "vue-router": "^4.4.5",
+    "style-loader": "^3.3.3"
   },
   "overrides": {
-    "@vue/cli-plugin-unit-jest": {
-      "ts-jest": "$ts-jest",
-      "@vue/vue2-jest": "$@vue/vue2-jest"
-    },
     "editorconfig": {
       "minimatch": "^9.0.7"
     },
     "filelist": {
       "minimatch": "^5.1.8"
-    },
-    "webpack-dev-server": "^5.2.1"
+    }
   }
 }

src/components/Footer.vue

@@ -51,7 +51,7 @@ import { mapState } from 'pinia';
 import { useServerStore } from '~/stores/server';
 
 export default {
-  name: 'Footer',
+  name: 'AwFooter',
   computed: {
     ...mapState(useServerStore, ['info']),
   },

src/components/Header.vue

@@ -128,7 +128,7 @@ import { useBucketsStore } from '~/stores/buckets';
 import { IBucket } from '~/util/interfaces';
 
 export default {
-  name: 'Header',
+  name: 'AwHeader',
   data() {
     return {
       activityViews: null,

src/components/IconPlaceholder.vue

@@ -0,0 +1,22 @@
+<template>
+  <!-- Placeholder for vue-awesome icon (Vue 2 only). Replace with Vue 3 icon library. -->
+  <span class="icon-placeholder" :data-icon="name"></span>
+</template>
+
+<script>
+// vue-awesome is Vue 2 only. This is a placeholder component used during the Vue 3 migration.
+// TODO: Replace with a Vue 3-compatible icon library (e.g. @fortawesome/vue-fontawesome or unplugin-icons)
+export default {
+  name: 'IconPlaceholder',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    scale: {
+      type: [Number, String],
+      default: 1,
+    },
+  },
+};
+</script>

src/components/QueryOptions.vue

@@ -14,11 +14,11 @@ div
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import moment from 'moment';
 import { useBucketsStore } from '~/stores/buckets';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'QueryOptions',
   props: {
     queryOptions: {

src/components/SelectCategories.vue

@@ -27,12 +27,12 @@ b-form-tags#tags-component-select(
 </template>
 
 <script lang="typescript">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { useCategoryStore } from '~/stores/categories';
 
 const SEP = " > ";
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       value: [],

src/components/SelectCategoriesOrPattern.vue

@@ -16,12 +16,12 @@ div
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { useCategoryStore } from '~/stores/categories';
 
 const SEP = ' > ';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'SelectCategoriesOrPattern',
   props: {
     filterCategories: {