refactor: upgrade to vue3 with compat mode 2

app/package.json

@@ -15,11 +15,12 @@
   "dependencies": {
     "@fontsource/fira-code": "^4.5.13",
     "@fontsource/firago": "^4.5.3",
+    "@vue/compat": "3.3.4",
     "bootstrap-vue": "^2.22.0",
     "date-fns": "^2.29.3",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
-    "vue": "^2.7.14",
+    "vue": "3.3.4",
     "vue-i18n": "^8.28.2",
     "vue-router": "^3.6.5",
     "vue-showdown": "^2.4.1",
@@ -27,12 +28,12 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "bootstrap": "^4.6.0",
     "eslint": "^8.36.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.10.0",
+    "eslint-plugin-vue": "^9.22.0",
     "popper.js": "^1.16.0",
     "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",

app/src/main.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { createApp, configureCompat } from 'vue'
 import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
 import VueShowdown from 'vue-showdown'
@@ -10,16 +10,26 @@ import i18n from './i18n'
 import { registerGlobalErrorHandlers } from './api'
 import { initDefaultLocales } from './i18n/helpers'
 
-Vue.config.productionTip = false
+const app = createApp({
+  ...App,
+})
+
+app.use(store)
+app.use(router)
+app.use(i18n)
+
+configureCompat({
+  MODE: 2,
+})
 
 // Styles are imported in `src/App.vue` <style>
-Vue.use(BootstrapVue, {
+app.use(BootstrapVue, {
   BSkeleton: { animation: 'none' },
   BAlert: { show: true },
   BBadge: { pill: true },
 })
 
-Vue.use(VueShowdown, {
+app.use(VueShowdown, {
   options: {
     emoji: true,
   },
@@ -27,7 +37,7 @@ Vue.use(VueShowdown, {
 
 // Ugly wrapper for `$bvModal.msgBoxConfirm` to set default i18n button titles
 // FIXME find or wait for a better way
-Vue.prototype.$askConfirmation = function (message, props) {
+app.config.globalProperties.$askConfirmation = function (message, props) {
   return this.$bvModal.msgBoxConfirm(message, {
     okTitle: this.$i18n.t('ok'),
     cancelTitle: this.$i18n.t('cancel'),
@@ -42,7 +52,11 @@ Vue.prototype.$askConfirmation = function (message, props) {
   })
 }
 
-Vue.prototype.$askMdConfirmation = function (markdown, props, ok = false) {
+app.config.globalProperties.$askMdConfirmation = function (
+  markdown,
+  props,
+  ok = false,
+) {
   const content = this.$createElement('vue-showdown', {
     props: { markdown, flavor: 'github', options: { headerLevelStart: 4 } },
   })
@@ -63,19 +77,12 @@ const globalComponentsModules = import.meta.glob(
 )
 Object.values(globalComponentsModules).forEach((module) => {
   const component = module.default
-  Vue.component(component.name, component)
+  app.component(component.name, component)
 })
 
 registerGlobalErrorHandlers()
 
 // Load default locales translations files and setup store data
 initDefaultLocales().then(() => {
-  const app = new Vue({
+  app.mount('#app')
-    store,
-    router,
-    i18n,
-    render: (h) => h(App),
-  })
-
-  app.$mount('#app')
 })

app/vite.config.js

@@ -1,7 +1,7 @@
 import { fileURLToPath, URL } from 'url'
 import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
-import vue from '@vitejs/plugin-vue2'
+import createVuePlugin from '@vitejs/plugin-vue'
 
 export default defineConfig(({ command, mode }) => {
   // Load env file based on `mode` in the current working directory.
@@ -15,6 +15,7 @@ export default defineConfig(({ command, mode }) => {
     },
     resolve: {
       alias: [
+        { find: 'vue', replacement: '@vue/compat' },
         // this is required for the SCSS modules imports with `~` (node_modules)
         { find: /^~(.*)$/, replacement: '$1' },
         {
@@ -33,7 +34,17 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
-    plugins: [vue()],
+    plugins: [
+      createVuePlugin({
+        template: {
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2,
+            },
+          },
+        },
+      }),
+    ],
     build: {
       rollupOptions: {
         output: {