From f66a59df580eb3448f39831661b8fd05dc3f453a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 3 Mar 2024 18:08:10 +0100
Subject: [PATCH 01/30] refactor: upgrade to vue3 with compat mode 2

---
 app/package.json   |  7 ++++---
 app/src/main.js    | 37 ++++++++++++++++++++++---------------
 app/vite.config.js | 15 +++++++++++++--
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/app/package.json b/app/package.json
index 9fc872c67..a68da12fe 100644
--- a/app/package.json
+++ b/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",
diff --git a/app/src/main.js b/app/src/main.js
index 7230e309d..e0d35cecd 100644
--- a/app/src/main.js
+++ b/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({
-    store,
-    router,
-    i18n,
-    render: (h) => h(App),
-  })
-
-  app.$mount('#app')
+  app.mount('#app')
 })
diff --git a/app/vite.config.js b/app/vite.config.js
index ec1ead654..ae7739956 100644
--- a/app/vite.config.js
+++ b/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: {

From 74e08afff9d78bd941b0014613d232c6157f4d10 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:26:54 +0100
Subject: [PATCH 02/30] refactor: upgrade to vue-router4

---
 app/package.json                    |  2 +-
 app/src/App.vue                     | 11 ++++++-----
 app/src/components/RoutableTabs.vue | 23 ++++++++++++-----------
 app/src/router/index.js             | 12 ++++--------
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/package.json b/app/package.json
index a68da12fe..2ae083bb5 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,7 +22,7 @@
     "simple-evaluate": "^1.4.6",
     "vue": "3.3.4",
     "vue-i18n": "^8.28.2",
-    "vue-router": "^3.6.5",
+    "vue-router": "^4.3.0",
     "vue-showdown": "^2.4.1",
     "vuelidate": "^0.7.7",
     "vuex": "^3.6.2"
diff --git a/app/src/App.vue b/app/src/App.vue
index b45efeb98..c4da25557 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -6,7 +6,6 @@
         <BNavbarBrand
           :to="{ name: 'home' }"
           :disabled="waiting"
-          exact
           exact-active-class="active"
         >
           <span v-if="theme">
@@ -45,10 +44,12 @@
       <main id="main">
         <!-- The `key` on RouterView make sure that if a link points to a page that
         use the same component as the previous one, it will be refreshed -->
-        <Transition v-if="transitions" :name="transitionName">
-          <RouterView class="animated" :key="routerKey" />
-        </Transition>
-        <RouterView v-else class="static" :key="routerKey" />
+        <RouterView v-slot="{ Component }" :key="routerKey">
+          <Transition v-if="transitions" :name="transitionName">
+            <Component :is="Component" class="animated" />
+          </Transition>
+          <Component v-else :is="Component" class="static" />
+        </RouterView>
       </main>
     </ViewLockOverlay>
 
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index dfeff852b..651446241 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -6,7 +6,6 @@
           v-for="route in routes"
           :key="route.text"
           :to="route.to"
-          exact
           exact-active-class="active"
         >
           <YIcon v-if="route.icon" :iname="route.icon" />
@@ -16,16 +15,18 @@
     </BCardHeader>
 
     <!-- Bind extra props to the child view and forward child events to parent -->
-    <RouterView v-bind="$attrs" v-on="$listeners">
-      <template #tab-top>
-        <slot name="tab-top" />
-      </template>
-      <template #tab-before>
-        <slot name="tab-before" />
-      </template>
-      <template #tab-after>
-        <slot name="tab-after" />
-      </template>
+    <RouterView v-slot="{ Component }">
+      <Component v-bind="$attrs" v-on="$listeners" :is="Component">
+        <template #tab-top>
+          <slot name="tab-top" />
+        </template>
+        <template #tab-before>
+          <slot name="tab-before" />
+        </template>
+        <template #tab-after>
+          <slot name="tab-after" />
+        </template>
+      </Component>
     </RouterView>
   </BCard>
 </template>
diff --git a/app/src/router/index.js b/app/src/router/index.js
index dcb547344..8af04f874 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -1,13 +1,9 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from './routes'
 import store from '@/store'
 
-Vue.use(VueRouter)
-
-const router = new VueRouter({
-  // mode: 'history', // this allow all routes to be real ones (without '#')
-  base: import.meta.env.BASE_URL,
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
 
   scrollBehavior(to, from, savedPosition) {
@@ -22,7 +18,7 @@ const router = new VueRouter({
         setTimeout(() => resolve(savedPosition), 0)
       })
     } else {
-      return savedPosition || { x: 0, y: 0 }
+      return savedPosition || { left: 0, top: 0 }
     }
   },
 })

From dd9ae21472a3f236c33ba5217c93f3d9136f7b49 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:28:55 +0100
Subject: [PATCH 03/30] refactor: upgrade to vuex4

---
 app/package.json       | 3 +--
 app/src/store/index.js | 7 ++-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/package.json b/app/package.json
index 2ae083bb5..9a20cdf00 100644
--- a/app/package.json
+++ b/app/package.json
@@ -24,8 +24,7 @@
     "vue-i18n": "^8.28.2",
     "vue-router": "^4.3.0",
     "vue-showdown": "^2.4.1",
-    "vuelidate": "^0.7.7",
-    "vuex": "^3.6.2"
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/app/src/store/index.js b/app/src/store/index.js
index ea7adddfa..1aff80779 100644
--- a/app/src/store/index.js
+++ b/app/src/store/index.js
@@ -1,13 +1,10 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 
 import info from './info'
 import settings from './settings'
 import data from './data'
 
-Vue.use(Vuex)
-
-export default new Vuex.Store({
+export default createStore({
   state: settings.state,
   mutations: settings.mutations,
   actions: settings.actions,

From 81707bb11ac6f0cd70f7e386306476c4b335cf90 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:31:24 +0100
Subject: [PATCH 04/30] refactor: upgrade to i18n9

---
 app/package.json                     |  2 +-
 app/src/api/errors.js                | 12 +++--
 app/src/helpers/yunohostArguments.js |  6 +--
 app/src/i18n/helpers.js              | 69 ++++++++++++++++++----------
 app/src/i18n/index.js                | 11 ++---
 app/src/store/info.js                |  8 ++--
 app/src/store/settings.js            | 16 ++-----
 app/vite.config.js                   | 30 ++++++++++++
 8 files changed, 97 insertions(+), 57 deletions(-)

diff --git a/app/package.json b/app/package.json
index 9a20cdf00..17ce6d946 100644
--- a/app/package.json
+++ b/app/package.json
@@ -21,7 +21,7 @@
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
     "vue": "3.3.4",
-    "vue-i18n": "^8.28.2",
+    "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
     "vue-showdown": "^2.4.1",
     "vuex": "^4.1.0"
diff --git a/app/src/api/errors.js b/app/src/api/errors.js
index 066c02d80..af2f53174 100644
--- a/app/src/api/errors.js
+++ b/app/src/api/errors.js
@@ -10,7 +10,7 @@ class APIError extends Error {
     super(
       error
         ? error.replaceAll('\n', '<br>')
-        : i18n.t('error_server_unexpected'),
+        : i18n.global.t('error_server_unexpected'),
     )
     const urlObj = new URL(url)
     this.name = 'APIError'
@@ -39,7 +39,9 @@ class APIErrorLog extends APIError {
 // 0 — (means "the connexion has been closed" apparently)
 class APIConnexionError extends APIError {
   constructor(method, response) {
-    super(method, response, { error: i18n.t('error_connection_interrupted') })
+    super(method, response, {
+      error: i18n.global.t('error_connection_interrupted'),
+    })
     this.name = 'APIConnexionError'
   }
 }
@@ -57,7 +59,7 @@ class APIBadRequestError extends APIError {
 // 401 — Unauthorized
 class APIUnauthorizedError extends APIError {
   constructor(method, response, errorData) {
-    super(method, response, { error: i18n.t('unauthorized') })
+    super(method, response, { error: i18n.global.t('unauthorized') })
     this.name = 'APIUnauthorizedError'
   }
 }
@@ -65,7 +67,7 @@ class APIUnauthorizedError extends APIError {
 // 404 — Not Found
 class APINotFoundError extends APIError {
   constructor(method, response, errorData) {
-    errorData.error = i18n.t('api_not_found')
+    errorData.error = i18n.global.t('api_not_found')
     super(method, response, errorData)
     this.name = 'APINotFoundError'
   }
@@ -83,7 +85,7 @@ class APIInternalError extends APIError {
 // 502 — Bad gateway (means API is down)
 class APINotRespondingError extends APIError {
   constructor(method, response) {
-    super(method, response, { error: i18n.t('api_not_responding') })
+    super(method, response, { error: i18n.global.t('api_not_responding') })
     this.name = 'APINotRespondingError'
   }
 }
diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index ece0a1fc6..bba66f7f4 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -152,7 +152,7 @@ export function formatYunoHostArgument(arg) {
       props: defaultProps.concat(['type', 'autocomplete', 'trim']),
       callback: function () {
         if (!arg.help) {
-          arg.help = i18n.t('good_practices_about_admin_password')
+          arg.help = i18n.global.t('good_practices_about_admin_password')
         }
         arg.example = '••••••••••••'
         validation.passwordLenght = validators.minLength(8)
@@ -180,7 +180,7 @@ export function formatYunoHostArgument(arg) {
         if (arg.type !== 'select') {
           field.props.link = {
             name: arg.type + '-list',
-            text: i18n.t(`manage_${arg.type}s`),
+            text: i18n.global.t(`manage_${arg.type}s`),
           }
         }
       },
@@ -337,7 +337,7 @@ export function formatYunoHostArgument(arg) {
   if (arg.helpLink) {
     field.props.link = {
       href: arg.helpLink.href,
-      text: i18n.t(arg.helpLink.text),
+      text: i18n.global.t(arg.helpLink.text),
     }
   }
 
diff --git a/app/src/i18n/helpers.js b/app/src/i18n/helpers.js
index cd0b71172..1899f1cac 100644
--- a/app/src/i18n/helpers.js
+++ b/app/src/i18n/helpers.js
@@ -1,9 +1,9 @@
+import { nextTick } from 'vue'
 import store from '@/store'
 import i18n from '@/i18n'
 import supportedLocales from './supportedLocales'
 
-let dateFnsLocale
-const loadedLanguages = []
+export let dateFnsLocale
 
 /**
  * Returns the first two supported locales that can be found in the `localStorage` or
@@ -34,26 +34,54 @@ function getDefaultLocales() {
   return defaultLocales
 }
 
-function updateDocumentLocale(locale) {
-  document.documentElement.lang = locale
+export async function setI18nLocale(locale) {
+  if (!i18n.global.availableLocales.includes(locale)) {
+    await loadLocaleMessages(locale)
+    // also query/set the date-fns locale object for time translation
+    await loadDateFnsLocale(locale)
+  }
+
+  // Preload 'en' locales as it is the hard fallback
+  if (locale !== 'en' && !i18n.global.availableLocales.includes('en')) {
+    loadLocaleMessages('en')
+  }
+
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale
+  } else {
+    i18n.global.locale.value = locale
+  }
+
+  document.querySelector('html').setAttribute('lang', locale)
   // FIXME can't currently change document direction easily since bootstrap still doesn't handle rtl.
   // document.dir = locale === 'ar' ? 'rtl' : 'ltr'
 }
 
+export async function setI18nFallbackLocale(locale) {
+  if (!i18n.global.availableLocales.includes(locale)) {
+    await loadLocaleMessages(locale)
+  }
+
+  if (i18n.mode === 'legacy') {
+    i18n.global.fallbackLocale = [locale, 'en']
+  } else {
+    i18n.global.fallbackLocale.value = [locale, 'en']
+  }
+}
+
 /**
  * Loads a translation file and adds its content to the i18n plugin `messages`.
  *
  * @return {Promise<string>} Promise that resolve the given locale string
  */
-function loadLocaleMessages(locale) {
-  if (loadedLanguages.includes(locale)) {
-    return Promise.resolve(locale)
-  }
-  return import(`@/i18n/locales/${locale}.json`).then((messages) => {
-    i18n.setLocaleMessage(locale, messages.default)
-    loadedLanguages.push(locale)
-    return locale
-  })
+export async function loadLocaleMessages(locale) {
+  // load locale messages with dynamic import
+  const messages = await import(`./locales/${locale}.json`)
+
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages)
+
+  return nextTick()
 }
 
 /**
@@ -71,19 +99,10 @@ async function loadDateFnsLocale(locale) {
 /**
  * Initialize all locales
  */
-function initDefaultLocales() {
+export async function initDefaultLocales() {
   // Get defined locales from `localStorage` or `navigator`
   const [locale, fallbackLocale] = getDefaultLocales()
 
-  store.dispatch('UPDATE_LOCALE', locale)
-  store.dispatch('UPDATE_FALLBACKLOCALE', fallbackLocale || 'en')
-  return loadLocaleMessages('en')
-}
-
-export {
-  initDefaultLocales,
-  updateDocumentLocale,
-  loadLocaleMessages,
-  loadDateFnsLocale,
-  dateFnsLocale,
+  await store.dispatch('UPDATE_LOCALE', locale)
+  await store.dispatch('UPDATE_FALLBACKLOCALE', fallbackLocale || 'en')
 }
diff --git a/app/src/i18n/index.js b/app/src/i18n/index.js
index f575be80e..df48cfc58 100644
--- a/app/src/i18n/index.js
+++ b/app/src/i18n/index.js
@@ -3,10 +3,9 @@
  * @module i18n
  */
 
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
+import { createI18n } from 'vue-i18n'
 
-// Plugin Initialization
-Vue.use(VueI18n)
-
-export default new VueI18n({})
+export default createI18n({
+  // FIXME
+  legacy: true,
+})
diff --git a/app/src/store/info.js b/app/src/store/info.js
index 5bc5ce3f4..fc6698bc8 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -199,7 +199,7 @@ export default {
         ? humanKey
         : { key: humanKey }
       const humanRoute = key
-        ? i18n.t('human_routes.' + key, args)
+        ? i18n.global.t('human_routes.' + key, args)
         : `[${method}] /${uri}`
 
       let request = {
@@ -368,9 +368,9 @@ export default {
         // if a traduction key string has been given and we also need to pass
         // the route param as a variable.
         if (trad && param) {
-          text = i18n.t(trad, { [param]: to.params[param] })
+          text = i18n.global.t(trad, { [param]: to.params[param] })
         } else if (trad) {
-          text = i18n.t(trad)
+          text = i18n.global.t(trad)
         } else {
           text = to.params[param]
         }
@@ -395,7 +395,7 @@ export default {
       }
 
       // Display a simplified breadcrumb as the document title.
-      document.title = `${getTitle(breadcrumb)} | ${i18n.t('yunohost_admin')}`
+      document.title = `${getTitle(breadcrumb)} | ${i18n.global.t('yunohost_admin')}`
     },
 
     UPDATE_TRANSITION_NAME({ state, commit }, { to, from }) {
diff --git a/app/src/store/settings.js b/app/src/store/settings.js
index a67e98d0a..68ba324ce 100644
--- a/app/src/store/settings.js
+++ b/app/src/store/settings.js
@@ -3,12 +3,7 @@
  * @module store/settings
  */
 
-import i18n from '@/i18n'
-import {
-  loadLocaleMessages,
-  updateDocumentLocale,
-  loadDateFnsLocale,
-} from '@/i18n/helpers'
+import { setI18nLocale, setI18nFallbackLocale } from '@/i18n/helpers'
 import supportedLocales from '@/i18n/supportedLocales'
 
 export default {
@@ -62,19 +57,14 @@ export default {
 
   actions: {
     UPDATE_LOCALE({ commit }, locale) {
-      loadLocaleMessages(locale).then(() => {
-        updateDocumentLocale(locale)
+      return setI18nLocale(locale).then(() => {
         commit('SET_LOCALE', locale)
-        i18n.locale = locale
       })
-      // also query the date-fns locale object for filters
-      loadDateFnsLocale(locale)
     },
 
     UPDATE_FALLBACKLOCALE({ commit }, locale) {
-      loadLocaleMessages(locale).then(() => {
+      return setI18nFallbackLocale(locale).then(() => {
         commit('SET_FALLBACKLOCALE', locale)
-        i18n.fallbackLocale = [locale, 'en']
       })
     },
 
diff --git a/app/vite.config.js b/app/vite.config.js
index ae7739956..01fb68258 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -3,6 +3,14 @@ import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
 import createVuePlugin from '@vitejs/plugin-vue'
 
+import supportedLocales from './src/i18n/supportedLocales'
+
+const supportedDatefnsLocales = Object.entries(supportedLocales).map(
+  ([locale, { dateFnsLocale }]) => {
+    return dateFnsLocale || locale
+  },
+)
+
 export default defineConfig(({ command, mode }) => {
   // Load env file based on `mode` in the current working directory.
   // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
@@ -53,6 +61,28 @@ export default defineConfig(({ command, mode }) => {
             if (!id.includes('node_modules') && id.includes('api/')) {
               return 'core'
             }
+            // Translations
+            if (id.includes('locales')) {
+              const match = /.*\/i18n\/locales\/([\w-]+)\.json/.exec(id)
+              return `locales/${match[1]}/translations`
+            }
+            // Split date-fns locales
+            if (id.includes('date-fns')) {
+              const match = /.*\/date-fns\/esm\/locale\/([\w-]+)\/.*\.js/.exec(
+                id,
+              )
+              if (match) {
+                if (supportedDatefnsLocales.includes(match[1])) {
+                  return `locales/${match[1]}/date-fns`
+                } else {
+                  // FIXME: currently difficult to cherry pick only needed locales,
+                  // hopefully this chunk should not be fetched.
+                  return 'locales/not-used'
+                }
+              } else {
+                return 'date-fns'
+              }
+            }
           },
         },
       },

From c5976dbd48372598c7b090cb8fdb4b9b3ca01996 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:37:39 +0100
Subject: [PATCH 05/30] refactor: upgrade to vuelidate2

---
 app/package.json                              |  2 +
 app/src/components/ConfigPanels.vue           | 15 ++--
 app/src/components/globals/AbstractForm.vue   |  4 +-
 app/src/components/globals/CardForm.vue       |  2 +-
 app/src/components/globals/FormField.vue      | 43 +++++++-----
 .../helpers/validators/customValidators.js    | 59 +++++++---------
 app/src/helpers/validators/index.js           |  2 +-
 app/src/helpers/yunohostArguments.js          | 31 +++-----
 app/src/views/LoginView.vue                   | 16 +++--
 app/src/views/PostInstall.vue                 | 16 +++--
 app/src/views/_partials/DomainForm.vue        | 22 +++---
 app/src/views/app/AppCatalog.vue              | 14 ++--
 app/src/views/app/AppInfo.vue                 | 29 +++++---
 app/src/views/app/AppInstall.vue              | 14 ++--
 app/src/views/domain/DomainInfo.vue           | 12 +++-
 app/src/views/group/GroupCreate.vue           | 14 ++--
 app/src/views/tool/ToolFirewall.vue           | 14 ++--
 app/src/views/tool/ToolSettings.vue           |  6 +-
 app/src/views/user/UserCreate.vue             | 24 ++++---
 app/src/views/user/UserEdit.vue               | 70 +++++++++++--------
 app/src/views/user/UserImport.vue             | 14 ++--
 21 files changed, 246 insertions(+), 177 deletions(-)

diff --git a/app/package.json b/app/package.json
index 17ce6d946..e88b2ce30 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,6 +16,8 @@
     "@fontsource/fira-code": "^4.5.13",
     "@fontsource/firago": "^4.5.3",
     "@vue/compat": "3.3.4",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "bootstrap-vue": "^2.22.0",
     "date-fns": "^2.29.3",
     "fork-awesome": "^1.2.0",
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 1ac211d62..ae4b7a333 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -3,7 +3,7 @@
     <RoutableTabs
       v-if="routes_.length > 1"
       :routes="routes_"
-      v-bind="{ panels, forms, v: $v, ...$attrs }"
+      v-bind="{ panels, forms, v: v$, ...$attrs }"
       v-on="$listeners"
     >
       <template #tab-top>
@@ -26,7 +26,8 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { toRef } from 'vue'
+import { useVuelidate } from '@vuelidate/core'
 
 export default {
   name: 'ConfigPanels',
@@ -37,8 +38,6 @@ export default {
     RoutableTabs: () => import('@/components/RoutableTabs.vue'),
   },
 
-  mixins: [validationMixin],
-
   props: {
     panels: { type: Array, default: undefined },
     forms: { type: Object, default: undefined },
@@ -46,6 +45,14 @@ export default {
     errors: { type: Object, default: undefined }, // never used
     routes: { type: Array, default: null },
     noRedirect: { type: Boolean, default: false },
+    externalResults: { type: Object, required: true },
+  },
+
+  setup(props) {
+    const externalResults = toRef(props, 'externalResults')
+    return {
+      v$: useVuelidate({ $externalResults: externalResults, $autoDirty: true }),
+    }
   },
 
   computed: {
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 243cfb7de..8bf225963 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -47,7 +47,7 @@ export default {
   computed: {
     errorFeedback() {
       if (this.serverError) return this.serverError
-      else if (this.validation && this.validation.$anyError) {
+      else if (this.validation && this.validation.$errors.length) {
         return this.$i18n.t('form_errors.invalid_form')
       } else return ''
     },
@@ -58,7 +58,7 @@ export default {
       const v = this.validation
       if (v) {
         v.$touch()
-        if (v.$pending || v.$invalid) return
+        if (v.$pending || v.$errors.length) return
       }
       this.$emit('submit', e)
     },
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 31774dc0a..16e8d0adc 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -52,7 +52,7 @@ export default {
   computed: {
     errorFeedback() {
       if (this.serverError) return this.serverError
-      else if (this.validation && this.validation.$anyError) {
+      else if (this.validation && this.validation.$errors.length) {
         return this.$i18n.t('form_errors.invalid_form')
       } else return ''
     },
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 4def25e64..c9272302c 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -65,6 +65,7 @@ export default {
     value: { type: null, default: null },
     props: { type: Object, default: () => ({}) },
     validation: { type: Object, default: null },
+    validationIndex: { type: Number, default: null },
   },
 
   computed: {
@@ -93,19 +94,36 @@ export default {
       return attrs
     },
 
-    state() {
-      // Need to set state as null if no error, else component turn green
+    error() {
       if (this.validation) {
-        return this.validation.$anyError === true ? false : null
+        if (this.validationIndex !== null) {
+          const errors =
+            this.validation.$each.$response.$errors[this.validationIndex]
+          const err = Object.values(errors).find((part) => {
+            return part.length
+          })
+          return err?.length ? err[0] : null
+        }
+        return this.validation.$errors.length
+          ? { ...this.validation.$errors[0], $model: this.validation.$model }
+          : null
       }
       return null
     },
 
+    state() {
+      // Need to set state as null if no error, else component turn green
+      return this.error ? false : null
+    },
+
     errorMessage() {
-      const validation = this.validation
-      if (validation && validation.$anyError) {
-        const [type, errData] = this.findError(validation.$params, validation)
-        return this.$i18n.t('form_errors.' + type, errData)
+      const err = this.error
+      if (err) {
+        if (err.$message) return err.$message
+        return this.$i18n.t('form_errors.' + err.$validator, {
+          value: err.$model,
+          ...err.$params,
+        })
       }
       return ''
     },
@@ -122,17 +140,6 @@ export default {
         }
       }
     },
-
-    findError(params, obj, parent = obj) {
-      for (const key in params) {
-        if (!obj[key]) {
-          return [key, obj.$params[key]]
-        }
-        if (obj[key].$anyError) {
-          return this.findError(obj[key].$params, obj[key], parent)
-        }
-      }
-    },
   },
 }
 </script>
diff --git a/app/src/helpers/validators/customValidators.js b/app/src/helpers/validators/customValidators.js
index 154f594d2..181a532a0 100644
--- a/app/src/helpers/validators/customValidators.js
+++ b/app/src/helpers/validators/customValidators.js
@@ -1,70 +1,61 @@
-import { helpers } from 'vuelidate/lib/validators'
+import { helpers } from '@vuelidate/validators'
 
 // Unicode ranges are taken from https://stackoverflow.com/a/37668315
 const nonAsciiWordCharacters =
   '\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0-\u08B4\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FD5\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AD\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC'
 
-const alphalownumdot_ = helpers.regex('alphalownumdot_', /^[a-z0-9_.]+$/)
+const alphalownumdot_ = helpers.regex(/^[a-z0-9_.]+$/)
 
 const domain = helpers.regex(
-  'domain',
   new RegExp(
     `^(?:[\\da-z${nonAsciiWordCharacters}]+(?:-*[\\da-z${nonAsciiWordCharacters}]+)*\\.)+(?:(?:xn--)?[\\da-z${nonAsciiWordCharacters}]{2,})$`,
   ),
 )
 
 const dynDomain = helpers.regex(
-  'dynDomain',
   new RegExp(`^(?:xn--)?[\\da-z-${nonAsciiWordCharacters}]+$`),
 )
 
-const emailLocalPart = helpers.regex('emailLocalPart', /^[\w.-]+$/)
+const emailLocalPart = helpers.regex(/^[\w.-]+$/)
 
-const emailForwardLocalPart = helpers.regex(
-  'emailForwardLocalPart',
-  /^[\w+.-]+$/,
-)
+const emailForwardLocalPart = helpers.regex(/^[\w+.-]+$/)
 
-const email = (value) =>
-  helpers.withParams({ type: 'email', value }, (value) => {
-    const [localPart, domainPart] = value.split('@')
-    if (!domainPart) return !helpers.req(value) || false
-    return (
-      !helpers.req(value) || (emailLocalPart(localPart) && domain(domainPart))
-    )
-  })(value)
+const email = (value) => {
+  const [localPart, domainPart] = value.split('@')
+  if (!domainPart) return !helpers.req(value) || false
+  return (
+    !helpers.req(value) || (emailLocalPart(localPart) && domain(domainPart))
+  )
+}
 
 // Same as email but with `+` allowed.
-const emailForward = (value) =>
-  helpers.withParams({ type: 'emailForward', value }, (value) => {
-    const [localPart, domainPart] = value.split('@')
-    if (!domainPart) return !helpers.req(value) || false
-    return (
-      !helpers.req(value) ||
-      (emailForwardLocalPart(localPart) && domain(domainPart))
-    )
-  })(value)
+const emailForward = (value) => {
+  const [localPart, domainPart] = value.split('@')
+  if (!domainPart) return !helpers.req(value) || false
+  return (
+    !helpers.req(value) ||
+    (emailForwardLocalPart(localPart) && domain(domainPart))
+  )
+}
 
 const appRepoUrl = helpers.regex(
-  'appRepoUrl',
   /^https:\/\/[a-zA-Z0-9-_.]+\/[a-zA-Z0-9-_./~]+\/[a-zA-Z0-9-_.]+_ynh(\/?(-\/)?tree\/[a-zA-Z0-9-_.]+)?(\.git)?\/?$/,
 )
 
-const includes = (items) => (item) =>
+const includes = (items) =>
   helpers.withParams(
-    { type: 'includes', value: item },
+    { type: 'includes' },
     (item) => !helpers.req(item) || (items ? items.includes(item) : false),
-  )(item)
+  )
 
 const name = helpers.regex(
-  'name',
   new RegExp(`^(?:[A-Za-z${nonAsciiWordCharacters}]{1,30}[ ,.'-]{0,3})+$`),
 )
 
-const unique = (items) => (item) =>
-  helpers.withParams({ type: 'unique', arg: items, value: item }, (item) =>
+const unique = (items) =>
+  helpers.withParams({ type: 'unique', arg: items }, (item) =>
     items ? !helpers.req(item) || !items.includes(item) : true,
-  )(item)
+  )
 
 export {
   alphalownumdot_,
diff --git a/app/src/helpers/validators/index.js b/app/src/helpers/validators/index.js
index 41708c0c8..76a53e70c 100644
--- a/app/src/helpers/validators/index.js
+++ b/app/src/helpers/validators/index.js
@@ -9,4 +9,4 @@ export {
   minValue,
   required,
   sameAs,
-} from 'vuelidate/lib/validators'
+} from '@vuelidate/validators'
diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index bba66f7f4..9cd733bac 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -121,8 +121,7 @@ function addEvaluationGetter(prop, obj, expr, ctx, nested) {
  */
 export function formatYunoHostArgument(arg) {
   let value = arg.value !== undefined ? arg.value : null
-  const validation = {}
-  const error = { message: null }
+  let validation = {}
   arg.ask = formatI18nField(arg.ask)
   const field = {
     is: arg.readonly ? 'ReadOnlyField' : 'FormField',
@@ -272,6 +271,9 @@ export function formatYunoHostArgument(arg) {
   ]
 
   // Default type management if no one is filled
+  if (arg.type !== 'tags' && arg.choices && arg.choices.length) {
+    arg.type = 'select'
+  }
   if (arg.type === undefined) {
     if (arg.choices && arg.choices.length) {
       arg.type = 'select'
@@ -308,21 +310,12 @@ export function formatYunoHostArgument(arg) {
     validation.required = validators.required
   }
   if (arg.pattern && arg.type !== 'tags') {
-    validation.pattern = validators.helpers.regex(
+    validation.pattern = validators.helpers.withMessage(
       formatI18nField(arg.pattern.error),
-      new RegExp(arg.pattern.regexp),
+      validators.helpers.regex(new RegExp(arg.pattern.regexp)),
     )
   }
 
-  if (!component.renderSelf && !arg.readonly) {
-    // Bind a validation with what the server may respond
-    validation.remote = validators.helpers.withParams(error, (v) => {
-      const result = !error.message
-      error.message = null
-      return result
-    })
-  }
-
   // Default value if still `null`
   if (value === null && arg.default) {
     value = arg.default
@@ -351,7 +344,6 @@ export function formatYunoHostArgument(arg) {
     field,
     // Return null instead of empty object if there's no validation
     validation: Object.keys(validation).length === 0 ? null : validation,
-    error,
   }
 }
 
@@ -367,14 +359,12 @@ export function formatYunoHostArguments(args, forms) {
   const form = {}
   const fields = {}
   const validations = {}
-  const errors = {}
 
   for (const arg of args) {
-    const { value, field, validation, error } = formatYunoHostArgument(arg)
+    const { value, field, validation } = formatYunoHostArgument(arg)
     fields[arg.id] = field
     form[arg.id] = value
     if (validation) validations[arg.id] = validation
-    errors[arg.id] = error
 
     if ('visible' in arg && typeof arg.visible === 'string') {
       addEvaluationGetter(
@@ -397,7 +387,7 @@ export function formatYunoHostArguments(args, forms) {
     }
   }
 
-  return { form, fields, validations, errors }
+  return { form, fields, validations }
 }
 
 export function formatYunoHostConfigPanels(data) {
@@ -405,7 +395,6 @@ export function formatYunoHostConfigPanels(data) {
     panels: [],
     forms: {},
     validations: {},
-    errors: {},
   }
 
   for (const { id: panelId, name, help, sections } of data.panels) {
@@ -417,7 +406,6 @@ export function formatYunoHostConfigPanels(data) {
     }
     result.forms[panelId] = {}
     result.validations[panelId] = {}
-    result.errors[panelId] = {}
 
     if (name) panel.name = formatI18nField(name)
     if (help) panel.help = formatI18nField(help)
@@ -434,14 +422,13 @@ export function formatYunoHostConfigPanels(data) {
         addEvaluationGetter('visible', section, section.visible, result.forms)
       }
 
-      const { form, fields, validations, errors } = formatYunoHostArguments(
+      const { form, fields, validations } = formatYunoHostArguments(
         _section.options,
         result.forms,
       )
       // Merge all sections forms to the panel to get a unique form
       Object.assign(result.forms[panelId], form)
       Object.assign(result.validations[panelId], validations)
-      Object.assign(result.errors[panelId], errors)
       section.fields = fields
       panel.sections.push(section)
 
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 1dcb4f98b..e2c478685 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -2,7 +2,7 @@
   <CardForm
     :title="$t('login')"
     icon="lock"
-    :validation="$v"
+    :validation="v$"
     :server-error="serverError"
     @submit.prevent="login"
   >
@@ -10,14 +10,14 @@
     <FormField
       v-bind="fields.username"
       v-model="form.username"
-      :validation="$v.form.username"
+      :validation="v$.form.username"
     />
 
     <!-- ADMIN PASSWORD -->
     <FormField
       v-bind="fields.password"
       v-model="form.password"
-      :validation="$v.form.password"
+      :validation="v$.form.password"
     />
 
     <template #buttons>
@@ -35,18 +35,22 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 import { alphalownumdot_, required, minLength } from '@/helpers/validators'
 
 export default {
   name: 'LoginView',
 
-  mixins: [validationMixin],
-
   props: {
     forceReload: { type: Boolean, default: false },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       serverError: '',
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 560cbf537..8b1e92e01 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -40,7 +40,7 @@
       <CardForm
         :title="$t('postinstall.user.title')"
         icon="user-plus"
-        :validation="$v"
+        :validation="v$"
         :server-error="serverError"
         :submit-text="$t('next')"
         @submit.prevent="setUser"
@@ -55,7 +55,7 @@
           :key="name"
           v-bind="field"
           v-model="user[name]"
-          :validation="$v.user[name]"
+          :validation="v$.user[name]"
         />
       </CardForm>
 
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
 import { DomainForm } from '@/views/_partials'
@@ -106,13 +106,17 @@ import {
 export default {
   name: 'PostInstall',
 
-  mixins: [validationMixin],
-
   components: {
     DomainForm,
     LoginView,
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       step: 'start',
@@ -224,7 +228,7 @@ export default {
         username: { required, alphalownumdot_ },
         fullname: { required, name },
         password: { required, passwordLenght: minLength(8) },
-        confirmation: { required, passwordMatch: sameAs('password') },
+        confirmation: { required, passwordMatch: sameAs(this.user.password) },
       },
     }
   },
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index a67530eb4..92aec5959 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -3,7 +3,7 @@
     :title="title"
     icon="globe"
     :submit-text="submitText"
-    :validation="$v"
+    :validation="v$"
     :server-error="serverError"
     @submit.prevent="onSubmit"
   >
@@ -32,7 +32,7 @@
       <FormField
         v-bind="fields.domain"
         v-model="form.domain"
-        :validation="$v.form.domain"
+        :validation="v$.form.domain"
         class="mt-3"
       />
     </BCollapse>
@@ -58,7 +58,7 @@
 
       <FormField
         v-bind="fields.dynDomain"
-        :validation="$v.form.dynDomain"
+        :validation="v$.form.dynDomain"
         class="mt-3"
       >
         <template #default="{ self }">
@@ -68,13 +68,13 @@
 
       <FormField
         v-bind="fields.dynDomainPassword"
-        :validation="$v.form.dynDomainPassword"
+        :validation="v$.form.dynDomainPassword"
         v-model="form.dynDomainPassword"
       />
 
       <FormField
         v-bind="fields.dynDomainPasswordConfirmation"
-        :validation="$v.form.dynDomainPasswordConfirmation"
+        :validation="v$.form.dynDomainPasswordConfirmation"
         v-model="form.dynDomainPasswordConfirmation"
       />
     </BCollapse>
@@ -103,7 +103,7 @@
 
       <FormField
         v-bind="fields.localDomain"
-        :validation="$v.form.localDomain"
+        :validation="v$.form.localDomain"
         class="mt-3"
       >
         <template #default="{ self }">
@@ -116,7 +116,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import AdressInputSelect from '@/components/AdressInputSelect.vue'
 import { formatFormData } from '@/helpers/yunohostArguments'
@@ -137,6 +137,12 @@ export default {
     serverError: { type: String, default: '' },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       selected: '',
@@ -262,8 +268,6 @@ export default {
     }
   },
 
-  mixins: [validationMixin],
-
   components: {
     AdressInputSelect,
   },
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index cc7f9afe6..27b3e1e5e 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -171,7 +171,7 @@
         icon="download"
         @submit.prevent="onCustomInstallClick"
         :submit-text="$t('install')"
-        :validation="$v"
+        :validation="v$"
         class="mt-5"
       >
         <template #disclaimer>
@@ -185,7 +185,7 @@
         <FormField
           v-bind="customInstall.field"
           v-model="customInstall.url"
-          :validation="$v.customInstall.url"
+          :validation="v$.customInstall.url"
         />
       </CardForm>
     </template>
@@ -220,7 +220,7 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import CardDeckFeed from '@/components/CardDeckFeed.vue'
 import { required, appRepoUrl } from '@/helpers/validators'
@@ -240,6 +240,12 @@ export default {
     subtag: { type: String, default: 'all' },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [['GET', 'apps/catalog?full&with_categories&with_antifeatures']],
@@ -421,8 +427,6 @@ export default {
 
     randint,
   },
-
-  mixins: [validationMixin],
 }
 </script>
 
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index ef2295e27..af43ae5f3 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -128,7 +128,11 @@
     </YAlert>
 
     <!-- BASIC INFOS -->
-    <ConfigPanels v-bind="config" @submit="onConfigSubmit">
+    <ConfigPanels
+      v-bind="config"
+      :external-results="externalResults"
+      @submit="onConfigSubmit"
+    >
       <!-- OPERATIONS TAB -->
       <template v-if="currentTab === 'operations'" #tab-top>
         <!-- CHANGE PERMISSIONS LABEL -->
@@ -144,7 +148,7 @@
             label-cols="0"
             label-class=""
             class="m-0"
-            :validation="$v.form.labels.$each[i]"
+            :validation="v$.form.labels.$each[i]"
           >
             <template #default="{ self }">
               <BInputGroup>
@@ -361,11 +365,11 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api, { objectToParams } from '@/api'
 import { humanPermissionName } from '@/helpers/filters/human'
-import { required } from '@/helpers/validators'
+import { helpers, required } from '@/helpers/validators'
 import { isEmptyValue } from '@/helpers/commons'
 import {
   formatFormData,
@@ -385,6 +389,12 @@ export default {
     id: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -408,6 +418,7 @@ export default {
         ],
         validations: {},
       },
+      externalResults: {},
       doc: undefined,
     }
   },
@@ -429,7 +440,9 @@ export default {
     return {
       form: {
         labels: {
-          $each: { label: { required } },
+          $each: helpers.forEach({
+            label: { required },
+          }),
         },
         url: { path: { required } },
       },
@@ -614,7 +627,9 @@ export default {
           if (err.name !== 'APIBadRequestError') throw err
           const panel = this.config.panels.find((panel) => panel.id === id)
           if (err.data.name) {
-            this.config.errors[id][err.data.name].message = err.message
+            Object.assign(this.externalResults, {
+              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
+            })
           } else this.$set(panel, 'serverError', err.message)
         })
     },
@@ -687,8 +702,6 @@ export default {
         })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>
 
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index b668a2eae..ddae6b3c8 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -179,7 +179,7 @@
         :title="$t('app_install_parameters')"
         icon="cog"
         :submit-text="$t('install')"
-        :validation="$v"
+        :validation="v$"
         :server-error="serverError"
         @submit.prevent="performInstall"
       >
@@ -189,7 +189,7 @@
             :is="field.is"
             v-bind="field.props"
             v-model="form[fname]"
-            :validation="$v.form[fname]"
+            :validation="v$.form[fname]"
             :key="fname"
           />
         </template>
@@ -210,7 +210,7 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api, { objectToParams } from '@/api'
 import {
@@ -223,8 +223,6 @@ import CardCollapse from '@/components/CardCollapse.vue'
 export default {
   name: 'AppInstall',
 
-  mixins: [validationMixin],
-
   components: {
     CardCollapse,
   },
@@ -233,6 +231,12 @@ export default {
     id: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 7edf60904..8a48510b4 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -108,7 +108,12 @@
       </DescriptionRow>
     </YCard>
 
-    <ConfigPanels v-if="config.panels" v-bind="config" @submit="onConfigSubmit">
+    <ConfigPanels
+      v-if="config.panels"
+      v-bind="config"
+      :external-results="externalResults"
+      @submit="onConfigSubmit"
+    >
       <template v-if="currentTab === 'dns'" #tab-after>
         <DomainDns :name="name" />
       </template>
@@ -166,6 +171,7 @@ export default {
         ['GET', `domains/${this.name}/config?full`],
       ],
       config: {},
+      externalResults: {},
       unsubscribeDomainFromDyndns: false,
     }
   },
@@ -247,7 +253,9 @@ export default {
           if (err.name !== 'APIBadRequestError') throw err
           const panel = this.config.panels.find((panel) => panel.id === id)
           if (err.data.name) {
-            this.config.errors[id][err.data.name].message = err.message
+            Object.assign(this.externalResults, {
+              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
+            })
           } else this.$set(panel, 'serverError', err.message)
         })
     },
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index c1dc6109b..fb571677d 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -2,7 +2,7 @@
   <CardForm
     :title="$t('group_new')"
     icon="users"
-    :validation="$v"
+    :validation="v$"
     :server-error="serverError"
     @submit.prevent="onSubmit"
   >
@@ -10,13 +10,13 @@
     <FormField
       v-bind="groupname"
       v-model="form.groupname"
-      :validation="$v.form.groupname"
+      :validation="v$.form.groupname"
     />
   </CardForm>
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
 import { required, alphalownumdot_ } from '@/helpers/validators'
@@ -24,6 +24,12 @@ import { required, alphalownumdot_ } from '@/helpers/validators'
 export default {
   name: 'GroupCreate',
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       form: {
@@ -63,7 +69,5 @@ export default {
         })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 57724f790..3e95b0cf6 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -56,7 +56,7 @@
     <CardForm
       :title="$t('operations')"
       icon="cogs"
-      :validation="$v"
+      :validation="v$"
       :server-error="serverError"
       @submit.prevent="onFormPortToggling"
       inline
@@ -66,7 +66,7 @@
         <BFormSelect v-model="form.action" :options="actionChoices" />
       </BInputGroup>
 
-      <FormField :validation="$v.form.port">
+      <FormField :validation="v$.form.port">
         <BInputGroup :prepend="$t('port')">
           <InputItem
             id="input-port"
@@ -119,7 +119,7 @@
 </template>
 
 <script>
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
 import { required, integer, between } from '@/helpers/validators'
@@ -127,6 +127,12 @@ import { required, integer, between } from '@/helpers/validators'
 export default {
   name: 'ToolFirewall',
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [['GET', '/firewall?raw']],
@@ -281,8 +287,6 @@ export default {
       })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>
 
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 71897e04a..69eacd1a6 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -8,6 +8,7 @@
     <ConfigPanels
       v-if="config.panels"
       v-bind="config"
+      :external-results="externalResults"
       @submit="onConfigSubmit"
     />
   </ViewBase>
@@ -34,6 +35,7 @@ export default {
     return {
       queries: [['GET', 'settings?full']],
       config: {},
+      externalResults: {},
     }
   },
 
@@ -62,7 +64,9 @@ export default {
           if (err.name !== 'APIBadRequestError') throw err
           const panel = this.config.panels.find((panel) => panel.id === id)
           if (err.data.name) {
-            this.config.errors[id][err.data.name].message = err.message
+            Object.assign(this.externalResults, {
+              forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
+            })
           } else this.$set(panel, 'serverError', err.message)
         })
     },
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 2f3675f1d..7d62555d3 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -7,7 +7,7 @@
     <CardForm
       :title="$t('users_new')"
       icon="user-plus"
-      :validation="$v"
+      :validation="v$"
       :server-error="serverError"
       @submit.prevent="onSubmit"
     >
@@ -15,19 +15,19 @@
       <FormField
         v-bind="fields.username"
         v-model="form.username"
-        :validation="$v.form.username"
+        :validation="v$.form.username"
       />
 
       <!-- USER FULLNAME -->
       <FormField
         v-bind="fields.fullname"
-        :validation="$v.form.fullname"
+        :validation="v$.form.fullname"
         v-model="form.fullname"
       />
       <hr />
 
       <!-- USER MAIL DOMAIN -->
-      <FormField v-bind="fields.domain" :validation="$v.form.domain">
+      <FormField v-bind="fields.domain" :validation="v$.form.domain">
         <template #default="{ self }">
           <BInputGroup>
             <BInputGroupAppend>
@@ -55,14 +55,14 @@
       <FormField
         v-bind="fields.password"
         v-model="form.password"
-        :validation="$v.form.password"
+        :validation="v$.form.password"
       />
 
       <!-- USER PASSWORD CONFIRMATION -->
       <FormField
         v-bind="fields.confirmation"
         v-model="form.confirmation"
-        :validation="$v.form.confirmation"
+        :validation="v$.form.confirmation"
       />
     </CardForm>
   </ViewBase>
@@ -71,7 +71,7 @@
 <script>
 import api from '@/api'
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import { formatFormData } from '@/helpers/yunohostArguments'
 import {
@@ -86,6 +86,12 @@ import {
 export default {
   name: 'UserCreate',
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -164,7 +170,7 @@ export default {
         fullname: { required, name },
         domain: { required },
         password: { required, passwordLenght: minLength(8) },
-        confirmation: { required, passwordMatch: sameAs('password') },
+        confirmation: { required, passwordMatch: sameAs(this.form.password) },
       },
     }
   },
@@ -191,8 +197,6 @@ export default {
         })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>
 
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index aea68a3f6..e8ae18b6b 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -7,7 +7,7 @@
     <CardForm
       :title="$t('user_username_edit', { name })"
       icon="user"
-      :validation="$v"
+      :validation="v$"
       :server-error="serverError"
       @submit.prevent="onSubmit"
     >
@@ -18,13 +18,13 @@
       <FormField
         v-bind="fields.fullname"
         v-model="form.fullname"
-        :validation="$v.form.fullname"
+        :validation="v$.form.fullname"
       />
 
       <hr />
 
       <!-- USER EMAIL -->
-      <FormField v-bind="fields.mail" :validation="$v.form.mail">
+      <FormField v-bind="fields.mail" :validation="v$.form.mail">
         <template #default="{ self }">
           <AdressInputSelect v-bind="self" v-model="form.mail" />
         </template>
@@ -33,7 +33,7 @@
       <!-- MAILBOX QUOTA -->
       <FormField
         v-bind="fields.mailbox_quota"
-        :validation="$v.form.mailbox_quota"
+        :validation="v$.form.mailbox_quota"
       >
         <template #default="{ self }">
           <BInputGroup append="M">
@@ -49,7 +49,8 @@
           <FormField
             v-bind="fields.mail_aliases"
             :id="'mail_aliases' + i"
-            :validation="$v.form.mail_aliases.$each[i]"
+            :validation="v$.form.mail_aliases"
+            :validation-index="i"
           >
             <template #default="{ self }">
               <AdressInputSelect v-bind="self" v-model="form.mail_aliases[i]" />
@@ -72,9 +73,10 @@
         <div v-for="(mail, i) in form.mail_forward" :key="i" class="mail-list">
           <FormField
             v-bind="fields.mail_forward"
-            v-model="form.mail_forward[i]"
+            v-model="form.mail_forward[i].mail"
             :id="'mail-forward' + i"
-            :validation="$v.form.mail_forward.$each[i]"
+            :validation="v$.form.mail_forward"
+            :validation-index="i"
           />
 
           <BButton variant="danger" @click="removeEmailField('forward', i)">
@@ -93,14 +95,14 @@
       <FormField
         v-bind="fields.change_password"
         v-model="form.change_password"
-        :validation="$v.form.change_password"
+        :validation="v$.form.change_password"
       />
 
       <!-- USER PASSWORD CONFIRMATION -->
       <FormField
         v-bind="fields.confirmation"
         v-model="form.confirmation"
-        :validation="$v.form.confirmation"
+        :validation="v$.form.confirmation"
       />
     </CardForm>
   </ViewBase>
@@ -108,7 +110,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
 import { arrayDiff } from '@/helpers/commons'
@@ -118,6 +120,7 @@ import {
   formatFormData,
 } from '@/helpers/yunohostArguments'
 import {
+  helpers,
   name,
   required,
   minLength,
@@ -137,6 +140,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -227,24 +236,28 @@ export default {
 
   computed: mapGetters(['user', 'domainsAsChoices', 'mainDomain']),
 
-  validations: {
-    form: {
-      fullname: { required, name },
-      mail: {
-        localPart: { required, email: emailLocalPart },
-      },
-      mailbox_quota: { integer, minValue: minValue(0) },
-      mail_aliases: {
-        $each: {
+  validations() {
+    return {
+      form: {
+        fullname: { required, name },
+        mail: {
           localPart: { required, email: emailLocalPart },
         },
+        mailbox_quota: { integer, minValue: minValue(0) },
+        mail_aliases: {
+          $each: helpers.forEach({
+            localPart: { required, email: emailLocalPart },
+          }),
+        },
+        mail_forward: {
+          $each: helpers.forEach({
+            mail: { required, emailForward },
+          }),
+        },
+        change_password: { passwordLenght: minLength(8) },
+        confirmation: { passwordMatch: sameAs(this.form.change_password) },
       },
-      mail_forward: {
-        $each: { required, emailForward },
-      },
-      change_password: { passwordLenght: minLength(8) },
-      confirmation: { passwordMatch: sameAs('change_password') },
-    },
+    }
   },
 
   methods: {
@@ -260,7 +273,7 @@ export default {
         )
       }
       if (user['mail-forward']) {
-        this.form.mail_forward = user['mail-forward'].slice() // Copy value
+        this.form.mail_forward = user['mail-forward'].map((mail) => ({ mail })) // Copy value
       }
       // mailbox-quota could be 'No quota' or 'Pas de quota'...
       if (parseInt(user['mailbox-quota'].limit) > 0) {
@@ -278,6 +291,8 @@ export default {
         formData.mailbox_quota = ''
       }
 
+      formData.mail_forward = formData.mail_forward?.map((v) => v.mail)
+
       for (const key of ['mail_aliases', 'mail_forward']) {
         const dashedKey = key.replace('_', '-')
         const newKey = key.replace('_', '').replace('es', '')
@@ -323,7 +338,7 @@ export default {
       this.form['mail_' + type].push(
         type === 'aliases'
           ? { localPart: '', separator: '@', domain: this.mainDomain }
-          : '',
+          : { mail: '' },
       )
       // Focus last input after rendering update
       this.$nextTick(() => {
@@ -337,7 +352,6 @@ export default {
     },
   },
 
-  mixins: [validationMixin],
   components: { AdressInputSelect },
 }
 </script>
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 3f2238d35..b0286b7f1 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -2,7 +2,7 @@
   <CardForm
     :title="$t('users_import')"
     icon="user-plus"
-    :validation="$v"
+    :validation="v$"
     :server-error="serverError"
     @submit.prevent="onSubmit"
   >
@@ -10,7 +10,7 @@
     <FormField
       v-bind="fields.csvfile"
       v-model="form.csvfile"
-      :validation="$v.form.csvfile"
+      :validation="v$.form.csvfile"
     />
 
     <!-- UPDATE -->
@@ -23,7 +23,7 @@
 
 <script>
 import api from '@/api'
-import { validationMixin } from 'vuelidate'
+import { useVuelidate } from '@vuelidate/core'
 
 import { formatFormData } from '@/helpers/yunohostArguments'
 import { required } from '@/helpers/validators'
@@ -31,6 +31,12 @@ import { required } from '@/helpers/validators'
 export default {
   name: 'UserImport',
 
+  setup() {
+    return {
+      v$: useVuelidate(),
+    }
+  },
+
   data() {
     return {
       form: {
@@ -112,7 +118,5 @@ export default {
         })
     },
   },
-
-  mixins: [validationMixin],
 }
 </script>

From fdbe64cf9550f33fc1b3e2c4e43f7b738b4625e3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:38:23 +0100
Subject: [PATCH 06/30] chore: upgrade bootstrap-vue to last version

---
 app/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/package.json b/app/package.json
index e88b2ce30..3c90df243 100644
--- a/app/package.json
+++ b/app/package.json
@@ -18,7 +18,7 @@
     "@vue/compat": "3.3.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "bootstrap-vue": "^2.22.0",
+    "bootstrap-vue": "^2.23.1",
     "date-fns": "^2.29.3",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",

From 03b136478a5631a289657d656e456482137a199c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 04:20:02 +0100
Subject: [PATCH 07/30] refactor: single `key` on template `v-for`

---
 app/src/components/RecursiveListGroup.vue                 | 4 +---
 app/src/components/globals/skeletons/CardFormSkeleton.vue | 6 +++---
 app/src/views/group/GroupList.vue                         | 6 +++---
 app/src/views/service/ServiceInfo.vue                     | 6 +++---
 app/src/views/tool/ToolWebadmin.vue                       | 6 +++---
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 1a5b493b5..c65c63c07 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -1,8 +1,7 @@
 <template>
   <BListGroup :flush="flush" :style="{ '--depth': tree.depth }">
-    <template v-for="(node, i) in tree.children">
+    <template v-for="(node, i) in tree.children" :key="node.id">
       <BListGroupItem
-        :key="node.id"
         class="list-group-item-action"
         :class="getClasses(node, i)"
         @click="$router.push(node.data.to)"
@@ -26,7 +25,6 @@
 
       <BCollapse
         v-if="node.children"
-        :key="'collapse-' + node.id"
         v-model="node.data.opened"
         :id="'collapse-' + node.id"
       >
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 9205a2251..4cf810cfe 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -4,8 +4,8 @@
       <BSkeleton width="30%" height="36px" class="m-0" />
     </template>
 
-    <template v-for="count in itemCount">
-      <BRow :key="count" :class="{ 'd-block': cols === null }">
+    <template v-for="count in itemCount" :key="count">
+      <BRow :class="{ 'd-block': cols === null }">
         <BCol v-bind="cols">
           <div style="height: 38px" class="d-flex align-items-center">
             <BSkeleton
@@ -32,7 +32,7 @@
         </BCol>
       </BRow>
 
-      <hr :key="count + '-hr'" />
+      <hr />
     </template>
 
     <template #footer>
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 03d14f80d..375941db4 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -96,8 +96,8 @@
       :title="$t('group_specific_permissions')"
       icon="group"
     >
-      <template v-for="(userName, index) in activeUserGroups">
-        <BRow :key="userName">
+      <template v-for="userName in activeUserGroups" :key="userName">
+        <BRow>
           <BCol md="3" lg="2">
             <YIcon iname="user" /> <strong>{{ userName }}</strong>
           </BCol>
@@ -116,7 +116,7 @@
             />
           </BCol>
         </BRow>
-        <hr :key="index" />
+        <hr />
       </template>
 
       <TagsSelectizeItem
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index eaf08c8ff..fd9082e99 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -70,12 +70,12 @@
         </BButton>
       </template>
 
-      <template v-for="({ filename, content }, i) in logs">
-        <h3 :key="i + '-filename'">
+      <template v-for="{ filename, content } in logs" :key="filename">
+        <h3>
           {{ filename }}
         </h3>
 
-        <pre :key="i + '-content'" class="log"><code>{{ content }}</code></pre>
+        <pre class="log"><code>{{ content }}</code></pre>
       </template>
     </YCard>
   </ViewBase>
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index f3359f6dd..90200cf49 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -1,8 +1,8 @@
 <template>
   <CardForm :title="$t('tools_webadmin_settings')" icon="cog" no-footer>
-    <template v-for="(field, fname) in fields">
-      <FormField v-bind="field" v-model="self[fname]" :key="fname" />
-      <hr :key="fname + 'hr'" />
+    <template v-for="(field, fname) in fields" :key="fname">
+      <FormField v-bind="field" v-model="self[fname]" />
+      <hr />
     </template>
   </CardForm>
 </template>

From 4abbb4b2fceb32d78760e923c50a576f399d133d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 04:20:55 +0100
Subject: [PATCH 08/30] refactor: properly pass scoped slots

---
 app/src/components/RecursiveListGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index c65c63c07..2e30a3dc6 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -34,7 +34,7 @@
           flush
         >
           <!-- PASS THE DEFAULT SLOT WITH SCOPE TO NEXT NESTED COMPONENT -->
-          <template slot="default" slot-scope="scope">
+          <template #default="scope">
             <slot name="default" v-bind="scope" />
           </template>
         </RecursiveListGroup>

From 298dc73dfd7077abddb87d0bad89990061660cd5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 04:57:03 +0100
Subject: [PATCH 09/30] refactor: `v-bind` first

---
 app/src/components/ConfigPanels.vue           | 2 +-
 app/src/components/QueryHeader.vue            | 2 +-
 app/src/components/globals/FormField.vue      | 2 +-
 app/src/components/globals/YListGroupItem.vue | 2 +-
 app/src/views/app/AppInstall.vue              | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index ae4b7a333..57c5a2208 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -2,8 +2,8 @@
   <div class="config-panel">
     <RoutableTabs
       v-if="routes_.length > 1"
-      :routes="routes_"
       v-bind="{ panels, forms, v: v$, ...$attrs }"
+      :routes="routes_"
       v-on="$listeners"
     >
       <template #tab-top>
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index b2f6c3eb1..05e7d943f 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="query-header w-100" v-on="$listeners" v-bind="$attrs">
+  <div v-bind="$attrs" class="query-header w-100" v-on="$listeners">
     <!-- STATUS -->
     <span
       class="status"
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index c9272302c..cd8b1315a 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -11,8 +11,8 @@
     <slot v-bind="{ self: { ...props, state }, touch }">
       <!-- if no component was passed as slot, render a component from the props -->
       <Component
-        :is="component"
         v-bind="props"
+        :is="component"
         v-on="$listeners"
         :value="value"
         :state="state"
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 5a20071e7..cf2cc82ab 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <BListGroupItem class="yuno-list-group-item" :class="_class" v-bind="$attrs">
+  <BListGroupItem v-bind="$attrs" class="yuno-list-group-item" :class="_class">
     <div v-if="!noStatus" class="yuno-list-group-item-status">
       <YIcon v-if="_icon" :iname="_icon" :class="['icon-' + variant]" />
     </div>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index ddae6b3c8..678ba9e6a 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -186,8 +186,8 @@
         <template v-for="(field, fname) in fields">
           <Component
             v-if="field.visible"
-            :is="field.is"
             v-bind="field.props"
+            :is="field.is"
             v-model="form[fname]"
             :validation="v$.form[fname]"
             :key="fname"

From 1b8dd46395cba864d33efd520a74988aec5fd427 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 05:17:08 +0100
Subject: [PATCH 10/30] refactor: css `::v-deep` to `:deep()`

---
 app/src/components/ConfigPanel.vue            |  2 +-
 app/src/components/globals/ExplainWhat.vue    |  2 +-
 app/src/components/globals/FormField.vue      |  2 +-
 app/src/components/globals/TopBar.vue         |  4 +--
 app/src/components/globals/YCard.vue          |  6 ++---
 .../components/globals/formItems/FileItem.vue |  2 +-
 .../globals/formItems/TagsSelectizeItem.vue   |  2 +-
 app/src/views/_partials/ViewLockOverlay.vue   | 26 +++++++++----------
 app/src/views/app/AppCatalog.vue              |  2 +-
 app/src/views/tool/ToolFirewall.vue           |  4 +--
 10 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index cd868fadb..9c62cbf3a 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -105,7 +105,7 @@ export default {
   margin-bottom: 1em;
   border-bottom: solid $border-width $gray-500;
 }
-::v-deep .panel-section:not(:last-child) {
+:deep(.panel-section:not(:last-child)) {
   margin-bottom: 3rem;
 }
 </style>
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 6cb2a0b17..411bcdd79 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -57,7 +57,7 @@ export default {
     background-color: $white;
     border-width: 2px;
 
-    ::v-deep .popover-body {
+    :deep(.popover-body) {
       color: $dark;
     }
   }
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index cd8b1315a..640359746 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -145,7 +145,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .invalid-feedback code {
+:deep(.invalid-feedback code) {
   background-color: $gray-200;
 }
 </style>
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 80ce5c4fa..171eaed2e 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -67,7 +67,7 @@ export default {
     #top-bar-right {
       margin-bottom: 0.75rem;
 
-      ::v-deep > * {
+      :deep(> *) {
         margin-bottom: 0.25rem;
       }
     }
@@ -88,7 +88,7 @@ export default {
       margin-left: auto;
     }
 
-    ::v-deep .btn {
+    :deep(.btn) {
       margin-left: 0.5rem;
       &.dropdown-toggle-split {
         margin-left: 0;
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index cbbcb101a..edf6c5b54 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -83,7 +83,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card-header {
+:deep(.card-header) {
   display: flex;
 
   .custom-header {
@@ -97,7 +97,7 @@ export default {
   }
 }
 
-.card-footer {
+:deep(.card-footer) {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -106,7 +106,7 @@ export default {
     margin-left: 0.5rem;
   }
 }
-.collapse:not(.show) + .card-footer {
+:deep(.collapse:not(.show) + .card-footer) {
   display: none;
 }
 </style>
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 1afde1495..14b693110 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .custom-file-label {
+:deep(.custom-file-label) {
   color: $input-placeholder-color;
 
   .btn-danger + .b-form-file & {
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 5d36f1b3d..9151fb664 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -176,7 +176,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .dropdown-menu {
+:deep(.dropdown-menu) {
   max-height: 300px;
   overflow-y: auto;
   padding-top: 0;
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 87bc75352..8450b12fd 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -74,23 +74,21 @@ export default {
     margin: 0 15%;
   }
 
-  ::v-deep {
-    .card-body {
-      padding: 1.5rem;
-      padding-bottom: 0;
-      max-height: 60vh;
-      overflow-y: auto;
+  :deep(.card-body) {
+    padding: 1.5rem;
+    padding-bottom: 0;
+    max-height: 60vh;
+    overflow-y: auto;
 
-      & > :last-child {
-        margin-bottom: 1.5rem;
-      }
+    & > :last-child {
+      margin-bottom: 1.5rem;
     }
+  }
 
-    .card-footer {
-      padding: 0.5rem 0.75rem;
-      display: flex;
-      justify-content: flex-end;
-    }
+  :deep(.card-footer) {
+    padding: 0.5rem 0.75rem;
+    display: flex;
+    justify-content: flex-end;
   }
 
   .card-header {
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 27b3e1e5e..edc67c49f 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -514,7 +514,7 @@ export default {
 
     flex-basis: 90%;
 
-    .card-body {
+    :deep(.card-body) {
       display: flex;
       flex-direction: column;
       justify-content: center;
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 3e95b0cf6..21a080c52 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -291,7 +291,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .on-off-switch {
+:deep(.on-off-switch) {
   .custom-control-input {
     &:checked ~ .custom-control-label::before {
       border-color: $success;
@@ -322,7 +322,7 @@ export default {
   }
 }
 
-::v-deep form {
+:deep(form) {
   margin-bottom: -1rem;
 
   & > * {

From 2a7733611d6abf2e7e46ac20865da458e3feb9dc Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 15:12:40 +0100
Subject: [PATCH 11/30] refactor: upgrade to vue-showdown4

---
 app/package.json                                          | 2 +-
 app/src/components/globals/FormField.vue                  | 1 -
 app/src/components/globals/formItems/MarkdownItem.vue     | 2 +-
 .../components/globals/formItems/ReadOnlyAlertItem.vue    | 7 +------
 app/src/main.js                                           | 5 +++--
 app/src/views/app/AppInfo.vue                             | 6 ++----
 app/src/views/app/AppInstall.vue                          | 8 ++------
 app/src/views/update/SystemUpdate.vue                     | 1 -
 8 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/app/package.json b/app/package.json
index 3c90df243..bf75782af 100644
--- a/app/package.json
+++ b/app/package.json
@@ -25,7 +25,7 @@
     "vue": "3.3.4",
     "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
-    "vue-showdown": "^2.4.1",
+    "vue-showdown": "^4.2.0",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 640359746..51c5937ab 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -36,7 +36,6 @@
         <VueShowdown
           v-if="description"
           :markdown="description"
-          flavor="github"
           :class="{
             ['alert p-1 px-2 alert-' + descriptionVariant]: descriptionVariant,
           }"
diff --git a/app/src/components/globals/formItems/MarkdownItem.vue b/app/src/components/globals/formItems/MarkdownItem.vue
index 4a7d0ca20..8f9501688 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <VueShowdown :markdown="label" flavor="github" />
+  <VueShowdown :markdown="label" />
 </template>
 
 <script>
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index d1c4354e1..aa70ea26c 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -6,12 +6,7 @@
   >
     <YIcon :iname="icon_" class="mr-md-3 mb-md-0 mb-2" :variant="type" />
 
-    <VueShowdown
-      :markdown="label"
-      flavor="github"
-      tag="span"
-      class="markdown"
-    />
+    <VueShowdown :markdown="label" tag="span" class="markdown" />
   </BAlert>
 </template>
 
diff --git a/app/src/main.js b/app/src/main.js
index e0d35cecd..75815f438 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,7 +1,7 @@
 import { createApp, configureCompat } from 'vue'
 import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
-import VueShowdown from 'vue-showdown'
+import { VueShowdownPlugin } from 'vue-showdown'
 
 import store from './store'
 import router from './router'
@@ -29,7 +29,8 @@ app.use(BootstrapVue, {
   BBadge: { pill: true },
 })
 
-app.use(VueShowdown, {
+app.use(VueShowdownPlugin, {
+  flavor: 'github',
   options: {
     emoji: true,
   },
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index af43ae5f3..591858468 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -32,7 +32,6 @@
         v-for="[name, notif] in app.doc.notifications.postInstall"
         :key="name"
         :markdown="notif"
-        flavor="github"
         :options="{ headerLevelStart: 4 }"
       />
     </YAlert>
@@ -64,7 +63,6 @@
         v-for="[name, notif] in app.doc.notifications.postUpgrade"
         :key="name"
         :markdown="notif"
-        flavor="github"
         :options="{ headerLevelStart: 4 }"
       />
     </YAlert>
@@ -118,7 +116,7 @@
         </a>
       </p>
 
-      <VueShowdown :markdown="app.description" flavor="github" />
+      <VueShowdown :markdown="app.description" />
     </section>
 
     <YAlert v-if="config_panel_err" class="mb-4" variant="danger" icon="bug">
@@ -279,7 +277,7 @@
             <YIcon iname="book" class="mr-2" />
             {{ name === 'admin' ? $t('app.doc.admin.title') : name }}
           </template>
-          <VueShowdown :markdown="content" flavor="github" />
+          <VueShowdown :markdown="content" />
         </BTab>
       </BTabs>
     </BCard>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 678ba9e6a..1da7fb8f2 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -27,7 +27,7 @@
           </template>
         </p>
 
-        <VueShowdown :markdown="app.description" flavor="github" />
+        <VueShowdown :markdown="app.description" />
 
         <BImg
           v-if="app.screenshot"
@@ -120,11 +120,7 @@
           v-t="'app.install.problems.lowquality'"
         />
 
-        <VueShowdown
-          v-if="app.preInstall"
-          :markdown="app.preInstall"
-          flavor="github"
-        />
+        <VueShowdown v-if="app.preInstall" :markdown="app.preInstall" />
       </YAlert>
 
       <YAlert
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 8b15fc376..08b3cbbd6 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -127,7 +127,6 @@
             <BCardBody>
               <VueShowdown
                 :markdown="notif"
-                flavor="github"
                 :options="{ headerLevelStart: 6 }"
               />
             </BCardBody>

From 654d73e7611f4843023ccc1fb266242e62e7cf01 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 16:42:30 +0100
Subject: [PATCH 12/30] refactor: upgrade to date-fns3

---
 app/package.json        | 2 +-
 app/src/i18n/helpers.js | 4 +---
 app/vite.config.js      | 4 +---
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/package.json b/app/package.json
index bf75782af..070941e5d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -19,7 +19,7 @@
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "bootstrap-vue": "^2.23.1",
-    "date-fns": "^2.29.3",
+    "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
     "vue": "3.3.4",
diff --git a/app/src/i18n/helpers.js b/app/src/i18n/helpers.js
index 1899f1cac..bc25555f7 100644
--- a/app/src/i18n/helpers.js
+++ b/app/src/i18n/helpers.js
@@ -90,9 +90,7 @@ export async function loadLocaleMessages(locale) {
 async function loadDateFnsLocale(locale) {
   const dateFnsLocaleName = supportedLocales[locale].dateFnsLocale || locale
   dateFnsLocale = (
-    await import(
-      `../../node_modules/date-fns/esm/locale/${dateFnsLocaleName}/index.js`
-    )
+    await import(`../../node_modules/date-fns/locale/${dateFnsLocaleName}.mjs`)
   ).default
 }
 
diff --git a/app/vite.config.js b/app/vite.config.js
index 01fb68258..c1997d07b 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -68,9 +68,7 @@ export default defineConfig(({ command, mode }) => {
             }
             // Split date-fns locales
             if (id.includes('date-fns')) {
-              const match = /.*\/date-fns\/esm\/locale\/([\w-]+)\/.*\.js/.exec(
-                id,
-              )
+              const match = /.*\/date-fns\/locale\/([\w-]+)\/.*\.mjs/.exec(id)
               if (match) {
                 if (supportedDatefnsLocales.includes(match[1])) {
                   return `locales/${match[1]}/date-fns`

From d398b93c6a7742fd66b4db9f0fa8d10805df0578 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 16:43:14 +0100
Subject: [PATCH 13/30] refactor: upgrade fonts

---
 app/package.json       |   4 +-
 app/src/scss/font.scss | 141 +++++++++++++++++++++++++++++++++--------
 2 files changed, 116 insertions(+), 29 deletions(-)

diff --git a/app/package.json b/app/package.json
index 070941e5d..39c9c1de8 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,8 +13,8 @@
     "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
   },
   "dependencies": {
-    "@fontsource/fira-code": "^4.5.13",
-    "@fontsource/firago": "^4.5.3",
+    "@fontsource/fira-code": "^5.0.17",
+    "@fontsource/firago": "^5.0.7",
     "@vue/compat": "3.3.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
diff --git a/app/src/scss/font.scss b/app/src/scss/font.scss
index bcc4f4277..401828778 100644
--- a/app/src/scss/font.scss
+++ b/app/src/scss/font.scss
@@ -6,90 +6,98 @@
   ╰─────────────────────────╯
 */
 
-/* firago-all-300-italic*/
+/* firago-latin-300-italic*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO ExtraLight Italic'),
-    url('~@fontsource/firago/files/firago-all-200-italic.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-200-italic.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-200-italic.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-200-italic.woff') format('woff');
   font-weight: 200;
   font-style: italic;
   font-display: swap;
 }
-/* firago-all-300-normal*/
+/* firago-latin-300-normal*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO ExtraLight'),
-    url('~@fontsource/firago/files/firago-all-200-normal.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-200-normal.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-200-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-200-normal.woff') format('woff');
   font-weight: 200;
   font-style: normal;
   font-display: swap;
 }
-/* firago-all-400-italic*/
+/* firago-latin-400-italic*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Italic'),
-    url('~@fontsource/firago/files/firago-all-400-italic.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-400-italic.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-400-italic.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-400-italic.woff') format('woff');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
 }
-/* firago-all-400-normal*/
+/* firago-latin-400-normal*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Regular'),
-    url('~@fontsource/firago/files/firago-all-400-normal.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-400-normal.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-400-normal.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
-/* firago-all-500-italic*/
+/* firago-latin-500-italic*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Medium Italic'),
-    url('~@fontsource/firago/files/firago-all-500-italic.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-500-italic.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-500-italic.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-500-italic.woff') format('woff');
   font-weight: 500;
   font-style: italic;
   font-display: swap;
 }
-/* firago-all-500-normal*/
+/* firago-latin-500-normal*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Medium'),
-    url('~@fontsource/firago/files/firago-all-500-normal.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-500-normal.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-500-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-500-normal.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
-/* firago-all-700-italic*/
+/* firago-latin-700-italic*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Bold Italic'),
-    url('~@fontsource/firago/files/firago-all-700-italic.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-700-italic.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-700-italic.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-700-italic.woff') format('woff');
   font-weight: 700;
   font-style: italic;
   font-display: swap;
 }
-/* firago-all-700-normal*/
+/* firago-latin-700-normal*/
 @font-face {
   font-family: 'FiraGO';
   src:
     local('FiraGO Bold'),
-    url('~@fontsource/firago/files/firago-all-700-normal.woff2') format('woff2'),
-    url('~@fontsource/firago/files/firago-all-700-normal.woff') format('woff');
+    url('~@fontsource/firago/files/firago-latin-700-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/firago/files/firago-latin-700-normal.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
@@ -103,13 +111,92 @@
   ╰───────────────────────────────╯
 */
 
+/* fira-code-cyrillic-ext-400-normal */
 @font-face {
   font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url('~@fontsource/fira-code/files/fira-code-cyrillic-ext-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-cyrillic-ext-400-normal.woff')
+      format('woff');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+/* fira-code-cyrillic-400-normal */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url('~@fontsource/fira-code/files/fira-code-cyrillic-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-cyrillic-400-normal.woff')
+      format('woff');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* fira-code-greek-ext-400-normal */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    url('~@fontsource/fira-code/files/fira-code-greek-ext-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-greek-ext-400-normal.woff')
+      format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* fira-code-greek-400-normal */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
   src:
-    local('Fira Code Regular'),
-    // url('~@fontsource/fira-code/files/fira-code-all-400-normal.woff2') format('woff2'),
-    url('~@fontsource/fira-code/files/fira-code-all-400-normal.woff')
+    url('~@fontsource/fira-code/files/fira-code-greek-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-greek-400-normal.woff')
       format('woff');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
+    U+03A3-03FF;
+}
+
+/* fira-code-latin-ext-400-normal */
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-display: swap;
   font-weight: 400;
+  src:
+    url('~@fontsource/fira-code/files/fira-code-latin-ext-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-latin-ext-400-normal.woff')
+      format('woff');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* fira-code-latin-400-normal */
+@font-face {
+  font-family: 'Fira Code';
   font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src:
+    // local('Fira Code Regular'),
+    url('~@fontsource/fira-code/files/fira-code-latin-400-normal.woff2')
+      format('woff2'),
+    url('~@fontsource/fira-code/files/fira-code-latin-400-normal.woff')
+      format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

From 4ff3c33b784bf85f4fe8d7ce27d1875013521201 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 16:44:05 +0100
Subject: [PATCH 14/30] refactor: upgrade to vite5

---
 app/package.json   | 2 +-
 app/vite.config.js | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/package.json b/app/package.json
index 39c9c1de8..5533369d9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -39,7 +39,7 @@
     "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
     "sass": "^1.60.0",
-    "vite": "^4.2.1"
+    "vite": "^5.1.4"
   },
   "browserslist": [
     "> 1%",
diff --git a/app/vite.config.js b/app/vite.config.js
index c1997d07b..bd9be9d74 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -25,7 +25,12 @@ export default defineConfig(({ command, mode }) => {
       alias: [
         { find: 'vue', replacement: '@vue/compat' },
         // this is required for the SCSS modules imports with `~` (node_modules)
-        { find: /^~(.*)$/, replacement: '$1' },
+        {
+          find: /^~(.*)$/,
+          replacement: fileURLToPath(
+            new URL('./node_modules/$1', import.meta.url),
+          ),
+        },
         {
           find: '@',
           replacement: fileURLToPath(new URL('./src', import.meta.url)),

From 37cc90dffd5e4d8743d9e19f1e8de91346f396e3 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 16:44:37 +0100
Subject: [PATCH 15/30] chore: upgrade eslint + sass

---
 app/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/package.json b/app/package.json
index 5533369d9..49b3242f9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -31,14 +31,14 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
     "bootstrap": "^4.6.0",
-    "eslint": "^8.36.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
     "popper.js": "^1.16.0",
     "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
-    "sass": "^1.60.0",
+    "sass": "^1.71.1",
     "vite": "^5.1.4"
   },
   "browserslist": [

From f1cbc360c70b162ba98bb87afe3cf22bafb829fa Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 8 Mar 2024 03:02:25 +0100
Subject: [PATCH 16/30] refactor: turn all components/views to compat 3

---
 app/src/App.vue                                              | 1 +
 app/src/components/AdressInputSelect.vue                     | 1 +
 app/src/components/CardCollapse.vue                          | 1 +
 app/src/components/CardDeckFeed.vue                          | 1 +
 app/src/components/ConfigPanel.vue                           | 1 +
 app/src/components/ConfigPanels.vue                          | 1 +
 app/src/components/LazyRenderer.vue                          | 1 +
 app/src/components/MessageListGroup.vue                      | 1 +
 app/src/components/QueryHeader.vue                           | 1 +
 app/src/components/RecursiveListGroup.vue                    | 1 +
 app/src/components/RoutableTabs.vue                          | 1 +
 app/src/components/globals/AbstractForm.vue                  | 1 +
 app/src/components/globals/CardForm.vue                      | 1 +
 app/src/components/globals/DescriptionRow.vue                | 1 +
 app/src/components/globals/ExplainWhat.vue                   | 1 +
 app/src/components/globals/FormField.vue                     | 1 +
 app/src/components/globals/ReadOnlyField.vue                 | 1 +
 app/src/components/globals/TopBar.vue                        | 1 +
 app/src/components/globals/ViewBase.vue                      | 1 +
 app/src/components/globals/ViewSearch.vue                    | 1 +
 app/src/components/globals/YAlert.vue                        | 1 +
 app/src/components/globals/YBreadcrumb.vue                   | 1 +
 app/src/components/globals/YCard.vue                         | 1 +
 app/src/components/globals/YIcon.vue                         | 1 +
 app/src/components/globals/YListGroupItem.vue                | 1 +
 app/src/components/globals/YSpinner.vue                      | 1 +
 app/src/components/globals/formItems/ButtonItem.vue          | 1 +
 app/src/components/globals/formItems/CheckboxItem.vue        | 1 +
 app/src/components/globals/formItems/DisplayTextItem.vue     | 1 +
 app/src/components/globals/formItems/FileItem.vue            | 1 +
 app/src/components/globals/formItems/InputItem.vue           | 1 +
 app/src/components/globals/formItems/MarkdownItem.vue        | 1 +
 app/src/components/globals/formItems/ReadOnlyAlertItem.vue   | 1 +
 app/src/components/globals/formItems/SelectItem.vue          | 1 +
 app/src/components/globals/formItems/TagsItem.vue            | 1 +
 app/src/components/globals/formItems/TagsSelectizeItem.vue   | 1 +
 app/src/components/globals/formItems/TextAreaItem.vue        | 1 +
 app/src/components/globals/skeletons/CardButtonsSkeleton.vue | 1 +
 app/src/components/globals/skeletons/CardFormSkeleton.vue    | 1 +
 app/src/components/globals/skeletons/CardInfoSkeleton.vue    | 1 +
 app/src/components/globals/skeletons/CardListSkeleton.vue    | 1 +
 app/src/components/globals/skeletons/ListGroupSkeleton.vue   | 1 +
 app/src/views/HomeView.vue                                   | 1 +
 app/src/views/LoginView.vue                                  | 1 +
 app/src/views/PostInstall.vue                                | 1 +
 app/src/views/_partials/DomainForm.vue                       | 1 +
 app/src/views/_partials/ErrorDisplay.vue                     | 1 +
 app/src/views/_partials/HistoryConsole.vue                   | 1 +
 app/src/views/_partials/ReconnectingDisplay.vue              | 1 +
 app/src/views/_partials/ViewLockOverlay.vue                  | 1 +
 app/src/views/_partials/WaitingDisplay.vue                   | 1 +
 app/src/views/_partials/WarningDisplay.vue                   | 1 +
 app/src/views/app/AppCatalog.vue                             | 1 +
 app/src/views/app/AppInfo.vue                                | 1 +
 app/src/views/app/AppInstall.vue                             | 1 +
 app/src/views/app/AppList.vue                                | 1 +
 app/src/views/backup/BackupCreate.vue                        | 1 +
 app/src/views/backup/BackupInfo.vue                          | 1 +
 app/src/views/backup/BackupList.vue                          | 1 +
 app/src/views/backup/BackupView.vue                          | 1 +
 app/src/views/diagnosis/DiagnosisView.vue                    | 1 +
 app/src/views/domain/DomainAdd.vue                           | 1 +
 app/src/views/domain/DomainDns.vue                           | 1 +
 app/src/views/domain/DomainInfo.vue                          | 1 +
 app/src/views/domain/DomainList.vue                          | 1 +
 app/src/views/group/GroupCreate.vue                          | 1 +
 app/src/views/group/GroupList.vue                            | 1 +
 app/src/views/service/ServiceInfo.vue                        | 1 +
 app/src/views/service/ServiceList.vue                        | 1 +
 app/src/views/tool/ToolFirewall.vue                          | 1 +
 app/src/views/tool/ToolList.vue                              | 1 +
 app/src/views/tool/ToolLog.vue                               | 1 +
 app/src/views/tool/ToolLogs.vue                              | 1 +
 app/src/views/tool/ToolMigrations.vue                        | 1 +
 app/src/views/tool/ToolPower.vue                             | 1 +
 app/src/views/tool/ToolSettings.vue                          | 1 +
 app/src/views/tool/ToolWebadmin.vue                          | 1 +
 app/src/views/update/SystemUpdate.vue                        | 1 +
 app/src/views/user/UserCreate.vue                            | 1 +
 app/src/views/user/UserEdit.vue                              | 1 +
 app/src/views/user/UserImport.vue                            | 1 +
 app/src/views/user/UserInfo.vue                              | 1 +
 app/src/views/user/UserList.vue                              | 1 +
 83 files changed, 83 insertions(+)

diff --git a/app/src/App.vue b/app/src/App.vue
index c4da25557..b66eba504 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -101,6 +101,7 @@ import { mapGetters } from 'vuex'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'App',
 
   components: {
diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index aa0dc19f2..623921cb9 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -39,6 +39,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AdressInputSelect',
 
   inheritAttrs: false,
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index ef6471686..ed70a418d 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -23,6 +23,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardCollapse',
 
   props: {
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 54b157d5d..f747932cb 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -3,6 +3,7 @@
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardDeckFeed',
 
   props: {
diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 9c62cbf3a..9ccb523a9 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -54,6 +54,7 @@
 import { filterObject } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ConfigPanel',
 
   props: {
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 57c5a2208..1fd948d62 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -30,6 +30,7 @@ import { toRef } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ConfigPanels',
 
   inheritAttrs: false,
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index 829f2d3c1..d2b6b2cc2 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -6,6 +6,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'LazyRenderer',
 
   props: {
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index 0295bf2e1..c0830e685 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -24,6 +24,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'MessageListGroup',
 
   props: {
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 05e7d943f..e6b04543c 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -49,6 +49,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'QueryHeader',
 
   props: {
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 2e30a3dc6..415cdd30c 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -45,6 +45,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'RecursiveListGroup',
 
   props: {
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 651446241..d046b7c88 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -33,6 +33,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'RoutableTabs',
 
   // Thanks to `v-bind="$attrs"` and `inheritAttrs: false`, this component can forward
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 8bf225963..170bb4143 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -32,6 +32,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AbstractForm',
 
   props: {
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 16e8d0adc..b28d60f60 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -37,6 +37,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardForm',
 
   props: {
diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
index e7265c3df..ec986a2f4 100644
--- a/app/src/components/globals/DescriptionRow.vue
+++ b/app/src/components/globals/DescriptionRow.vue
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DescriptionRow',
 
   props: {
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 411bcdd79..37c114d09 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -24,6 +24,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ExplainWhat',
 
   props: {
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 51c5937ab..b19bd42a7 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -49,6 +49,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'FormField',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 39949a728..f22d08ac5 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ReadOnlyField',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 171eaed2e..7f0379c37 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'TopBar',
 
   props: {
diff --git a/app/src/components/globals/ViewBase.vue b/app/src/components/globals/ViewBase.vue
index f1c696848..dbc79d422 100644
--- a/app/src/components/globals/ViewBase.vue
+++ b/app/src/components/globals/ViewBase.vue
@@ -33,6 +33,7 @@
 import api from '@/api'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ViewBase',
 
   props: {
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index d2affd539..4eddcadcf 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -57,6 +57,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ViewSearch',
 
   props: {
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 5cc9a8533..8d69995b5 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -18,6 +18,7 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YAlert',
 
   props: {
diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index 858708a8e..2a74e6839 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -20,6 +20,7 @@
 import { mapGetters } from 'vuex'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YBreadcrumb',
 
   computed: {
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index edf6c5b54..1f730810c 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -56,6 +56,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YCard',
 
   props: {
diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue
index 15fbcc8ce..447f7ccfa 100644
--- a/app/src/components/globals/YIcon.vue
+++ b/app/src/components/globals/YIcon.vue
@@ -7,6 +7,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YIcon',
   props: {
     iname: { type: String, required: true },
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index cf2cc82ab..2d602ae5a 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -14,6 +14,7 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YListGroupItem',
 
   props: {
diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 388e80d57..16ea4019e 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -6,6 +6,7 @@
 import { mapGetters } from 'vuex'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'YSpinner',
 
   computed: {
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 5bd09ad99..42541441f 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ButtonItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index fa1158d37..e6722e2da 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -12,6 +12,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CheckboxItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/DisplayTextItem.vue b/app/src/components/globals/formItems/DisplayTextItem.vue
index 3b85983ce..e83740c22 100644
--- a/app/src/components/globals/formItems/DisplayTextItem.vue
+++ b/app/src/components/globals/formItems/DisplayTextItem.vue
@@ -6,6 +6,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DisplayTextItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 14b693110..3e9705d4d 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -30,6 +30,7 @@
 import { getFileContent } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'FileItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 4bdb87125..687b42807 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -18,6 +18,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'InputItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/MarkdownItem.vue b/app/src/components/globals/formItems/MarkdownItem.vue
index 8f9501688..9347c78e8 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -4,6 +4,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'MarkdownItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index aa70ea26c..c825da6f2 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -12,6 +12,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ReadOnlyAlertItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 586d48a07..f02bbe703 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -11,6 +11,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'SelectItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index c212287d4..c8d378121 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'TagsItem',
 
   data() {
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 9151fb664..89efb9334 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -93,6 +93,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'TagsSelectizeItem',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index ef4088915..9e909b364 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'TextAreaItem',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
index cd05d93b5..0e64374ba 100644
--- a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
@@ -21,6 +21,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardButtonsSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 4cf810cfe..5ea6c9f9e 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -47,6 +47,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardFormSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardInfoSkeleton.vue b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
index 7a5435ae6..59cf82c31 100644
--- a/app/src/components/globals/skeletons/CardInfoSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -19,6 +19,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardInfoSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index 0726603b7..bf1ed6e5f 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -23,6 +23,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'CardListSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
index 0f638d3ef..41a381ad3 100644
--- a/app/src/components/globals/skeletons/ListGroupSkeleton.vue
+++ b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
@@ -11,6 +11,7 @@
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ListGroupSkeleton',
 
   props: {
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index ae303438d..e9a4c4606 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'HomeView',
 
   data() {
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index e2c478685..5782f2af3 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -39,6 +39,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { alphalownumdot_, required, minLength } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'LoginView',
 
   props: {
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 8b1e92e01..145ae58d1 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -104,6 +104,7 @@ import {
 } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'PostInstall',
 
   components: {
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 92aec5959..41952a57c 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -129,6 +129,7 @@ import {
 } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainForm',
 
   props: {
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
index fd11eea02..1bfa0c51e 100644
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ b/app/src/views/_partials/ErrorDisplay.vue
@@ -54,6 +54,7 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ErrorDisplay',
 
   components: {
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 022fc0d03..725797c82 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -94,6 +94,7 @@ import QueryHeader from '@/components/QueryHeader.vue'
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'HistoryConsole',
 
   components: {
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index 65e94c4a4..acbf7dee5 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -43,6 +43,7 @@ import api from '@/api'
 import LoginView from '@/views/LoginView.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ReconnectingDisplay',
 
   components: {
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 8450b12fd..f1b3dc464 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -30,6 +30,7 @@ import {
 import QueryHeader from '@/components/QueryHeader.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ViewLockOverlay',
 
   components: {
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/views/_partials/WaitingDisplay.vue
index baee407db..89d9d821a 100644
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ b/app/src/views/_partials/WaitingDisplay.vue
@@ -30,6 +30,7 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'WaitingDisplay',
 
   components: {
diff --git a/app/src/views/_partials/WarningDisplay.vue b/app/src/views/_partials/WarningDisplay.vue
index 62360d187..000b9a96a 100644
--- a/app/src/views/_partials/WarningDisplay.vue
+++ b/app/src/views/_partials/WarningDisplay.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'WarningDisplay',
 
   props: {
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index edc67c49f..e63ee4185 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -227,6 +227,7 @@ import { required, appRepoUrl } from '@/helpers/validators'
 import { randint } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AppCatalog',
 
   components: {
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 591858468..989ae31c3 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -377,6 +377,7 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AppInfo',
 
   components: {
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 1da7fb8f2..345b7dacd 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -217,6 +217,7 @@ import {
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AppInstall',
 
   components: {
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index e699ac42b..3eae3af10 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -39,6 +39,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'AppList',
 
   data() {
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 38c6cda8d..3a5d1a7fa 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -127,6 +127,7 @@
 import api from '@/api'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'BackupCreate',
 
   props: {
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 891fec748..dddf626c2 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -142,6 +142,7 @@ import { humanSize } from '@/helpers/filters/human'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'BackupInfo',
 
   props: {
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 5389b086d..16a0701b6 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -49,6 +49,7 @@ import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'BackupList',
 
   props: {
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index f94a5f8b9..8202b19b4 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -24,6 +24,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'BackupView',
 
   data() {
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 58549cee1..aac150340 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -153,6 +153,7 @@ import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DiagnosisView',
 
   data() {
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 745a81ad3..73b8d6ac1 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -14,6 +14,7 @@ import api from '@/api'
 import { DomainForm } from '@/views/_partials'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainAdd',
 
   data() {
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 4ac881aaf..c99145a30 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -148,6 +148,7 @@ import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainDns',
 
   props: {
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 8a48510b4..8715fa1d8 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -149,6 +149,7 @@ import ConfigPanels from '@/components/ConfigPanels.vue'
 import DomainDns from './DomainDns.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainInfo',
 
   components: {
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 4c123e78f..62a471bf0 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -53,6 +53,7 @@ import { mapGetters } from 'vuex'
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'DomainList',
 
   components: {
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index fb571677d..aad17ee7b 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -22,6 +22,7 @@ import api from '@/api'
 import { required, alphalownumdot_ } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'GroupCreate',
 
   setup() {
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 375941db4..527413cfe 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -142,6 +142,7 @@ import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.
 // TODO add global search with type (search by: group, user, permission)
 // TODO add vuex store update on inputs ?
 export default {
+  compatConfig: { MODE: 3 },
   name: 'GroupList',
 
   components: {
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index fd9082e99..6270b35b0 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -86,6 +86,7 @@ import api from '@/api'
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ServiceInfo',
 
   props: {
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 9702aac78..3858177b6 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -46,6 +46,7 @@
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ServiceList',
 
   data() {
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 21a080c52..7e81e71f2 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -125,6 +125,7 @@ import api from '@/api'
 import { required, integer, between } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolFirewall',
 
   setup() {
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index 8c4cead27..ec611ac52 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -15,6 +15,7 @@
 
 <script>
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolList',
 
   data() {
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 2a4e0fd6c..1c44d5549 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -78,6 +78,7 @@ import { escapeHtml } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolLog',
 
   props: {
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index c1874d8ff..f94577b8a 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -29,6 +29,7 @@
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolLogs',
 
   data() {
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 643a966ec..98fbec3e3 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -91,6 +91,7 @@ import api from '@/api'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolMigrations',
 
   data() {
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 0443f0434..7864da33a 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -37,6 +37,7 @@
 import api from '@/api'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolPower',
 
   methods: {
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 69eacd1a6..2542d677c 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -23,6 +23,7 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolSettingsConfig',
 
   components: {
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index 90200cf49..b4ee2cc23 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -27,6 +27,7 @@ function mapStoreGetSet(props = [], action = 'commit') {
 }
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'ToolWebadmin',
 
   data() {
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 08b3cbbd6..2c0e49913 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -144,6 +144,7 @@ import { mapGetters } from 'vuex'
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'SystemUpdate',
 
   components: {
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 7d62555d3..64557e5ae 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -84,6 +84,7 @@ import {
 } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserCreate',
 
   setup() {
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index e8ae18b6b..2cbe98209 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -134,6 +134,7 @@ import {
 import AdressInputSelect from '@/components/AdressInputSelect.vue'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserEdit',
 
   props: {
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index b0286b7f1..9fd16f2e3 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -29,6 +29,7 @@ import { formatFormData } from '@/helpers/yunohostArguments'
 import { required } from '@/helpers/validators'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserImport',
 
   setup() {
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 2929cfd40..922e47233 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -106,6 +106,7 @@
 import api from '@/api'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserInfo',
 
   props: {
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 4fd56f4cd..328cba5c7 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -56,6 +56,7 @@
 import { mapGetters } from 'vuex'
 
 export default {
+  compatConfig: { MODE: 3 },
   name: 'UserList',
 
   data() {

From cc98de76b5545a645861480696beb2bb4703fb14 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sat, 9 Mar 2024 17:34:47 +0100
Subject: [PATCH 17/30] migration: vue3 TRANSITION_CLASSES

---
 app/src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index b66eba504..85985becf 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -227,7 +227,7 @@ main {
   .animated {
     transition: all 0.15s ease-in-out;
   }
-  .slide-left-enter,
+  .slide-left-enter-from,
   .slide-right-leave-active {
     position: absolute;
     width: 100%;
@@ -235,7 +235,7 @@ main {
     transform: translate(100vw, 0);
   }
   .slide-left-leave-active,
-  .slide-right-enter {
+  .slide-right-enter-from {
     position: absolute;
     width: 100%;
     top: 0;

From 2898a4f5bda928e9a2b66c7fd9474aca6749834d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 10 Mar 2024 19:50:13 +0100
Subject: [PATCH 18/30] migration: vue3 COMPONENT_V_MODEL

---
 app/src/components/AdressInputSelect.vue      | 21 +++++++++----------
 app/src/components/globals/FormField.vue      |  5 +++--
 .../globals/formItems/CheckboxItem.vue        | 14 +++++--------
 .../components/globals/formItems/FileItem.vue | 16 +++++++-------
 .../globals/formItems/InputItem.vue           |  5 +++--
 .../globals/formItems/SelectItem.vue          |  7 ++++---
 .../components/globals/formItems/TagsItem.vue | 10 +++------
 .../globals/formItems/TagsSelectizeItem.vue   |  8 ++++---
 .../globals/formItems/TextAreaItem.vue        |  5 +++--
 9 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index 623921cb9..be5abd243 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -2,24 +2,24 @@
   <BInputGroup v-bind="$attrs">
     <InputItem
       :id="id"
-      :value="value.localPart"
+      :modelValue="modelValue.localPart"
       :placeholder="placeholder"
       :state="state"
       :aria-describedby="id + 'local-part-desc'"
-      @input="onInput('localPart', $event)"
+      @update:modelValue="onInput('localPart', $event)"
       @blur="$parent.$emit('touch')"
     />
 
     <BInputGroupAppend>
-      <BInputGroupText>{{ value.separator }}</BInputGroupText>
+      <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
     </BInputGroupAppend>
 
     <BInputGroupAppend>
       <SelectItem
-        :value="value.domain"
+        :modelValue="modelValue.domain"
         :choices="choices"
         :aria-describedby="id + 'domain-desc'"
-        @input="onInput('domain', $event)"
+        @update:modelValue="onInput('domain', $event)"
         @blur="$parent.$emit('touch')"
       />
     </BInputGroupAppend>
@@ -45,8 +45,7 @@ export default {
   inheritAttrs: false,
 
   props: {
-    // `value` is actually passed thru the `v-model` directive
-    value: { type: Object, required: true },
+    modelValue: { type: Object, required: true },
     choices: { type: Array, required: true },
     placeholder: { type: String, default: null },
     id: { type: String, default: null },
@@ -55,10 +54,10 @@ export default {
   },
 
   methods: {
-    onInput(key, value) {
-      this.$emit('input', {
-        ...this.value,
-        [key]: value,
+    onInput(key, modelValue) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [key]: modelValue,
       })
     },
   },
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index b19bd42a7..9d4a85cce 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -14,7 +14,8 @@
         v-bind="props"
         :is="component"
         v-on="$listeners"
-        :value="value"
+        :modelValue="modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
         :state="state"
         :required="validation ? 'required' in validation : false"
       />
@@ -62,7 +63,7 @@ export default {
     link: { type: Object, default: null },
     // Rendered field component props
     component: { type: String, default: 'InputItem' },
-    value: { type: null, default: null },
+    modelValue: { type: null, default: null },
     props: { type: Object, default: () => ({}) },
     validation: { type: Object, default: null },
     validationIndex: { type: Number, default: null },
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index e6722e2da..27a544e8b 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,12 +1,14 @@
 <template>
+  <!-- FIXME vue3 - `modelValue`+`@update:model` doesn't work here, probably to the prop's name not being `value`. Sticking for now to `checked`+`@input` -->
   <BFormCheckbox
-    v-model="checked"
+    :checked="modelValue"
+    @input="$emit('update:modelValue', $event)"
     v-on="$listeners"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
   >
-    {{ label || $t(labels[checked]) }}
+    {{ label || $t(labels[modelValue]) }}
   </BFormCheckbox>
 </template>
 
@@ -16,16 +18,10 @@ export default {
   name: 'CheckboxItem',
 
   props: {
-    value: { type: Boolean, required: true },
+    modelValue: { type: Boolean, required: true },
     id: { type: String, default: null },
     label: { type: String, default: null },
     labels: { type: Object, default: () => ({ true: 'yes', false: 'no' }) },
   },
-
-  data() {
-    return {
-      checked: this.value,
-    }
-  },
 }
 </script>
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 3e9705d4d..4a4a4fa93 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -1,7 +1,7 @@
 <template>
   <BButtonGroup class="w-100">
     <BButton
-      v-if="!this.required && this.value.file !== null"
+      v-if="!this.required && this.modelValue.file !== null"
       @click="clearFiles"
       variant="danger"
     >
@@ -10,7 +10,7 @@
     </BButton>
 
     <BFormFile
-      :value="value.file"
+      :modelValue="modelValue.file"
       ref="input-file"
       :id="id"
       :required="required"
@@ -35,7 +35,7 @@ export default {
 
   props: {
     id: { type: String, default: null },
-    value: { type: Object, default: () => ({ file: null }) },
+    modelValue: { type: Object, default: () => ({ file: null }) },
     placeholder: { type: String, default: 'Choose a file or drop it here...' },
     dropPlaceholder: { type: String, default: null },
     accept: { type: String, default: null },
@@ -46,7 +46,9 @@ export default {
 
   computed: {
     _placeholder: function () {
-      return this.value.file === null ? this.placeholder : this.value.file.name
+      return this.modelValue.file === null
+        ? this.placeholder
+        : this.modelValue.file.name
     },
   },
 
@@ -59,17 +61,17 @@ export default {
         removed: false,
       }
       // Update the value with the new File and an empty content for now
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
 
       // Asynchronously load the File content and update the value again
       getFileContent(file).then((content) => {
-        this.$emit('input', { ...value, content })
+        this.$emit('update:modelValue', { ...value, content })
       })
     },
 
     clearFiles() {
       this.$refs['input-file'].reset()
-      this.$emit('input', {
+      this.$emit('update:modelValue', {
         file: null,
         content: '',
         current: false,
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 687b42807..24e486d1a 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -1,6 +1,7 @@
 <template>
   <BFormInput
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :type="type"
@@ -22,7 +23,7 @@ export default {
   name: 'InputItem',
 
   props: {
-    value: { type: [String, Number], default: null },
+    modelValue: { type: [String, Number], default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     type: { type: String, default: 'text' },
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index f02bbe703..6b04fd14d 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -1,11 +1,12 @@
 <template>
   <BFormSelect
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :options="choices"
     :required="required"
     v-on="$listeners"
-    @blur.native="$emit('blur', value)"
+    @blur.native="$emit('blur', modelValue)"
   />
 </template>
 
@@ -15,7 +16,7 @@ export default {
   name: 'SelectItem',
 
   props: {
-    value: { type: [String, null], default: null },
+    modelValue: { type: [String, null], default: null },
     id: { type: String, default: null },
     choices: { type: [Array, Object], required: true },
     required: { type: Boolean, default: false },
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index c8d378121..366ccd94b 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,6 +1,7 @@
 <template>
   <BFormTags
-    v-model="tags"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
@@ -19,13 +20,8 @@ export default {
   compatConfig: { MODE: 3 },
   name: 'TagsItem',
 
-  data() {
-    return {
-      tags: this.value,
-    }
-  },
   props: {
-    value: { type: Array, default: null },
+    modelValue: { type: Array, default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     limit: { type: Number, default: null },
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 89efb9334..d17176f34 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -3,7 +3,8 @@
     <BFormTags
       v-bind="$attrs"
       v-on="$listeners"
-      :value="value"
+      :modelValue="modelValue"
+      @update:modelValue="$emit('update:modelValue', $event)"
       :id="id"
       size="lg"
       class="p-0 border-0"
@@ -99,7 +100,7 @@ export default {
   inheritAttrs: false,
 
   props: {
-    value: { type: Array, required: true },
+    modelValue: { type: Array, required: true },
     options: { type: Array, required: true },
     id: { type: String, required: true },
     placeholder: { type: String, default: null },
@@ -129,7 +130,8 @@ export default {
       const criteria = this.criteria
       const options = this.options.filter((opt) => {
         return (
-          this.value.indexOf(opt) === -1 && !this.disabledItems.includes(opt)
+          this.modelValue.indexOf(opt) === -1 &&
+          !this.disabledItems.includes(opt)
         )
       })
       if (criteria) {
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 9e909b364..4989835d9 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -1,6 +1,7 @@
 <template>
   <BFormTextarea
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
@@ -17,7 +18,7 @@ export default {
   name: 'TextAreaItem',
 
   props: {
-    value: { type: String, default: null },
+    modelValue: { type: String, default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     type: { type: String, default: 'text' },

From 04872f6eed277db1d6dcbb319675eaf9cb03b49c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:30:26 +0100
Subject: [PATCH 19/30] migration: vue3 COMPILER_V_BIND_SYNC

---
 app/src/views/_partials/DomainForm.vue | 6 +++---
 app/src/views/app/AppList.vue          | 2 +-
 app/src/views/domain/DomainList.vue    | 2 +-
 app/src/views/group/GroupList.vue      | 2 +-
 app/src/views/service/ServiceList.vue  | 2 +-
 app/src/views/tool/ToolLogs.vue        | 2 +-
 app/src/views/user/UserList.vue        | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 41952a57c..20f245f2c 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -23,7 +23,7 @@
       {{ $t('domain.add.from_registrar') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-domain" :visible.sync="domainIsVisible">
+    <BCollapse id="collapse-domain" v-model:visible="domainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="pl-1" v-html="$t('domain.add.from_registrar_desc')" />
@@ -50,7 +50,7 @@
       {{ $t('domain.add.from_yunohost') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-dynDomain" :visible.sync="dynDomainIsVisible">
+    <BCollapse id="collapse-dynDomain" v-model:visible="dynDomainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="pl-1" v-html="$t('domain.add.from_yunohost_desc')" />
@@ -95,7 +95,7 @@
       {{ $t('domain.add.from_local') }}
     </BFormRadio>
 
-    <BCollapse id="collapse-localDomain" :visible.sync="localDomainIsVisible">
+    <BCollapse id="collapse-localDomain" v-model:visible="localDomainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
         <span class="pl-1" v-html="$t('domain.add.from_local_desc')" />
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 3eae3af10..171cfc1ce 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -1,6 +1,6 @@
 <template>
   <ViewSearch
-    :search.sync="search"
+    v-model:search="search"
     items-name="installed_apps"
     :items="apps"
     :filtered-items="filteredApps"
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 62a471bf0..7f194ce30 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -1,7 +1,7 @@
 <template>
   <ViewSearch
     id="domain-list"
-    :search.sync="search"
+    v-model:search="search"
     :items="domains"
     items-name="domains"
     :queries="queries"
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 527413cfe..92be1db02 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -1,7 +1,7 @@
 <template>
   <ViewSearch
     items-name="groups"
-    :search.sync="search"
+    v-model:search="search"
     :items="primaryGroups"
     :filtered-items="filteredGroups"
     :queries="queries"
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 3858177b6..189621dd2 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -1,7 +1,7 @@
 <template>
   <ViewSearch
     id="service-list"
-    :search.sync="search"
+    v-model:search="search"
     :items="services"
     :filtered-items="filteredServices"
     items-name="services"
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index f94577b8a..72161903c 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -1,6 +1,6 @@
 <template>
   <ViewSearch
-    :search.sync="search"
+    v-model:search="search"
     :items="operations"
     :filtered-items="filteredOperations"
     items-name="logs"
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 328cba5c7..1b227bf5f 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -1,6 +1,6 @@
 <template>
   <ViewSearch
-    :search.sync="search"
+    v-model:search="search"
     :items="users"
     :filtered-items="filteredUsers"
     items-name="users"

From 1430c03a4fe999230f294f5add86eed308e99c6f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:37:47 +0100
Subject: [PATCH 20/30] refactor: use `apply` event instead of `submit` on
 ConfigPanels

---
 app/src/components/ConfigPanel.vue          | 6 +++---
 app/src/components/ConfigPanels.vue         | 3 ++-
 app/src/components/RoutableTabs.vue         | 7 ++++++-
 app/src/components/globals/AbstractForm.vue | 5 +++--
 app/src/views/app/AppInfo.vue               | 2 +-
 app/src/views/domain/DomainInfo.vue         | 2 +-
 app/src/views/tool/ToolSettings.vue         | 2 +-
 7 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 9ccb523a9..52a191afe 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -6,7 +6,7 @@
       validation,
       serverError: panel.serverError,
     }"
-    @submit.prevent.stop="onApply"
+    @apply="onApply"
     :no-footer="!panel.hasApplyButton"
   >
     <slot name="tab-top" />
@@ -78,7 +78,7 @@ export default {
     onApply() {
       const panelId = this.panel.id
 
-      this.$emit('submit', {
+      this.$emit('apply', {
         id: panelId,
         form: this.forms[panelId],
       })
@@ -88,7 +88,7 @@ export default {
       const panelId = this.panel.id
       const actionFieldsKeys = Object.keys(actionFields)
 
-      this.$emit('submit', {
+      this.$emit('apply', {
         id: panelId,
         form: filterObject(this.forms[panelId], ([key]) =>
           actionFieldsKeys.includes(key),
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 1fd948d62..0ac19296a 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="config-panel">
+    <!-- FIXME vue3 - weird stuff with event binding, need to propagate by hand for now -->
     <RoutableTabs
       v-if="routes_.length > 1"
       v-bind="{ panels, forms, v: v$, ...$attrs }"
       :routes="routes_"
-      v-on="$listeners"
+      @apply="$emit('apply', $event)"
     >
       <template #tab-top>
         <slot name="tab-top" />
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index d046b7c88..4d06bcf5e 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -16,7 +16,12 @@
 
     <!-- Bind extra props to the child view and forward child events to parent -->
     <RouterView v-slot="{ Component }">
-      <Component v-bind="$attrs" v-on="$listeners" :is="Component">
+      <Component
+        v-bind="$attrs"
+        :is="Component"
+        v-on="$listeners"
+        @apply="$emit('apply', $event)"
+      >
         <template #tab-top>
           <slot name="tab-top" />
         </template>
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 170bb4143..e117c54ab 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -7,8 +7,8 @@
         :id="id"
         :inline="inline"
         :class="formClasses"
-        @submit.prevent="onSubmit"
         novalidate
+        @submit.prevent.stop="onSubmit"
       >
         <slot name="default" />
 
@@ -61,7 +61,8 @@ export default {
         v.$touch()
         if (v.$pending || v.$errors.length) return
       }
-      this.$emit('submit', e)
+      // Weird bug with `INSTANCE_LISTENERS: true` with 'submit' event (double exec before of conflict with native submit event?)
+      this.$emit('apply')
     },
   },
 }
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 989ae31c3..2bf5e6360 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -129,7 +129,7 @@
     <ConfigPanels
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     >
       <!-- OPERATIONS TAB -->
       <template v-if="currentTab === 'operations'" #tab-top>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 8715fa1d8..e37a75b61 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -112,7 +112,7 @@
       v-if="config.panels"
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     >
       <template v-if="currentTab === 'dns'" #tab-after>
         <DomainDns :name="name" />
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 2542d677c..c1be632d8 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -9,7 +9,7 @@
       v-if="config.panels"
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     />
   </ViewBase>
 </template>

From 4b01c4e7c37e12728e3148d823bbd0bc6f82e962 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:40:44 +0100
Subject: [PATCH 21/30] migration: vue3 INSTANCE_LISTENERS

---
 app/src/components/QueryHeader.vue                         | 2 +-
 app/src/components/RoutableTabs.vue                        | 1 -
 app/src/components/globals/FormField.vue                   | 1 -
 app/src/components/globals/ViewSearch.vue                  | 2 +-
 app/src/components/globals/formItems/CheckboxItem.vue      | 1 -
 app/src/components/globals/formItems/InputItem.vue         | 1 -
 app/src/components/globals/formItems/SelectItem.vue        | 1 -
 app/src/components/globals/formItems/TagsItem.vue          | 1 -
 app/src/components/globals/formItems/TagsSelectizeItem.vue | 1 -
 app/src/components/globals/formItems/TextAreaItem.vue      | 1 -
 10 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index e6b04543c..38723aa54 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="$attrs" class="query-header w-100" v-on="$listeners">
+  <div v-bind="$attrs" class="query-header w-100">
     <!-- STATUS -->
     <span
       class="status"
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 4d06bcf5e..707c3cbf5 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -19,7 +19,6 @@
       <Component
         v-bind="$attrs"
         :is="Component"
-        v-on="$listeners"
         @apply="$emit('apply', $event)"
       >
         <template #tab-top>
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 9d4a85cce..724e34dd3 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -13,7 +13,6 @@
       <Component
         v-bind="props"
         :is="component"
-        v-on="$listeners"
         :modelValue="modelValue"
         @update:modelValue="$emit('update:modelValue', $event)"
         :state="state"
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 4eddcadcf..b507f081a 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <ViewBase v-bind="$attrs" v-on="$listeners" :skeleton="skeleton">
+  <ViewBase v-bind="$attrs" :skeleton="skeleton">
     <template v-if="hasCustomTopBar" #top-bar>
       <slot name="top-bar" />
     </template>
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 27a544e8b..4753ab0db 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -3,7 +3,6 @@
   <BFormCheckbox
     :checked="modelValue"
     @input="$emit('update:modelValue', $event)"
-    v-on="$listeners"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 24e486d1a..de6d13dbb 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -12,7 +12,6 @@
     :step="step"
     :trim="trim"
     :autocomplete="autocomplete_"
-    v-on="$listeners"
     @blur="$parent.$emit('touch', name)"
   />
 </template>
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 6b04fd14d..581c40dbb 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -5,7 +5,6 @@
     :id="id"
     :options="choices"
     :required="required"
-    v-on="$listeners"
     @blur.native="$emit('blur', modelValue)"
   />
 </template>
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index 366ccd94b..abccf055d 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -10,7 +10,6 @@
     remove-on-delete
     :state="state"
     :options="options"
-    v-on="$listeners"
     @blur="$parent.$emit('touch', name)"
   />
 </template>
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index d17176f34..ef23f8bde 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -2,7 +2,6 @@
   <div class="tags-selectize">
     <BFormTags
       v-bind="$attrs"
-      v-on="$listeners"
       :modelValue="modelValue"
       @update:modelValue="$emit('update:modelValue', $event)"
       :id="id"
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 4989835d9..f20c9ac21 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -7,7 +7,6 @@
     :required="required"
     :state="state"
     rows="4"
-    v-on="$listeners"
     @blur="$parent.$emit('touch', name)"
   />
 </template>

From 20e80765a35e0dce6becaf97de14fa2e386a546a Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:42:48 +0100
Subject: [PATCH 22/30] migration: vue3 INSTANCE_SCOPED_SLOTS

---
 app/src/components/CardDeckFeed.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index f747932cb..26c6b2f47 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -14,7 +14,7 @@ export default {
     return {
       busy: false,
       range: this.stacks,
-      childrenCount: this.$slots.default.length,
+      childrenCount: this.$slots.default().length,
     }
   },
 
@@ -60,7 +60,7 @@ export default {
   },
 
   beforeUpdate() {
-    const slots = this.$slots.default
+    const slots = this.$slots.default()
     if (this.childrenCount !== slots.length) {
       this.range = this.stacks
       this.childrenCount = slots.length
@@ -75,7 +75,7 @@ export default {
         props: { deck: true },
         ref: 'feed',
       },
-      this.$slots.default.slice(0, this.range),
+      this.$slots.default().slice(0, this.range),
     )
   },
 

From 68d5c6baeb7ca417cb6da9c338d3d093d8ef3baf Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:43:18 +0100
Subject: [PATCH 23/30] migration: vue3 OPTIONS_BEFORE_DESTROY

---
 app/src/components/CardDeckFeed.vue | 2 +-
 app/src/components/LazyRenderer.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 26c6b2f47..f67100776 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -79,7 +79,7 @@ export default {
     )
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('scroll', this.onScroll)
     this.$refs.feed.removeEventListener('keydown', this.onKeydown)
   },
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index d2b6b2cc2..b1b360af3 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -70,7 +70,7 @@ export default {
     this.observer.observe(this.$el)
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.observer.disconnect()
   },
 }

From 123577c9ee888074a60a84fe088bafcd7ff36770 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:43:56 +0100
Subject: [PATCH 24/30] migration: vue3 RENDER_FUNCTION

---
 app/src/components/CardDeckFeed.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index f67100776..752e139c6 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -1,6 +1,8 @@
 <script>
 // Implementation of the feed pattern
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
+import { h } from 'vue'
+import { BCardGroup } from 'bootstrap-vue'
 
 export default {
   compatConfig: { MODE: 3 },
@@ -67,12 +69,13 @@ export default {
     }
   },
 
-  render(h) {
+  render() {
     return h(
-      'BCardGroup',
+      BCardGroup,
       {
-        attrs: { role: 'feed', 'aria-busy': this.busy.toString() },
-        props: { deck: true },
+        deck: true,
+        role: 'feed',
+        'aria-busy': this.busy.toString(),
         ref: 'feed',
       },
       this.$slots.default().slice(0, this.range),

From 27a6f90cf78401d4fd522bbcfd7833fd629034c9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:44:35 +0100
Subject: [PATCH 25/30] migration: vue3 COMPONENT_ASYNC

---
 app/src/components/ConfigPanels.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 0ac19296a..4d531b2a7 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -28,6 +28,7 @@
 
 <script>
 import { toRef } from 'vue'
+import { defineAsyncComponent } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {
@@ -37,7 +38,9 @@ export default {
   inheritAttrs: false,
 
   components: {
-    RoutableTabs: () => import('@/components/RoutableTabs.vue'),
+    RoutableTabs: defineAsyncComponent(
+      () => import('@/components/RoutableTabs.vue'),
+    ),
   },
 
   props: {

From 2a5bbb594dcb66f364232f43c1a1681cf62fbb27 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:44:55 +0100
Subject: [PATCH 26/30] migration: vue3 WATCH_ARRAY

---
 app/src/components/MessageListGroup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index c0830e685..dd62d721c 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -66,7 +66,7 @@ export default {
 
   created() {
     if (this.autoScroll) {
-      this.$watch('messages', this.scrollToEnd)
+      this.$watch('messages', this.scrollToEnd, { deep: true })
     }
   },
 }

From f6adc876917660b5fcb44764a5de6589349a8f83 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:47:36 +0100
Subject: [PATCH 27/30] migration: vue3 GLOBAL_DELETE INSTANCE_DELETE
 GLOBAL_SET INSTANCE_SET

---
 app/src/store/data.js                 | 24 +++++++++++-------------
 app/src/store/info.js                 |  7 +++----
 app/src/views/app/AppInfo.vue         |  4 +++-
 app/src/views/domain/DomainInfo.vue   |  4 +++-
 app/src/views/group/GroupList.vue     |  4 +---
 app/src/views/tool/ToolFirewall.vue   |  4 ++--
 app/src/views/tool/ToolMigrations.vue |  2 +-
 app/src/views/tool/ToolSettings.vue   |  4 +++-
 8 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/app/src/store/data.js b/app/src/store/data.js
index 9edbd2160..c868490e1 100644
--- a/app/src/store/data.js
+++ b/app/src/store/data.js
@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 import { stratify } from '@/helpers/data/tree'
@@ -34,7 +32,7 @@ export default {
     },
 
     SET_DOMAINS_DETAILS(state, [name, details]) {
-      Vue.set(state.domains_details, name, details)
+      state.domains_details[name] = details
     },
 
     UPDATE_DOMAINS_DETAILS(state, payload) {
@@ -43,9 +41,9 @@ export default {
     },
 
     DEL_DOMAINS_DETAILS(state, [name]) {
-      Vue.delete(state.domains_details, name)
+      delete state.domains_details[name]
       if (state.domains) {
-        Vue.delete(state.domains, name)
+        delete state.domains[name]
       }
     },
 
@@ -72,16 +70,16 @@ export default {
 
     ADD_USERS(state, [user]) {
       if (!state.users) state.users = {}
-      Vue.set(state.users, user.username, user)
+      state.users[user.username] = user
     },
 
     SET_USERS_DETAILS(state, [username, userData]) {
-      Vue.set(state.users_details, username, userData)
+      state.users_details[username] = userData
       if (!state.users) return
       const user = state.users[username]
       for (const key of ['fullname', 'mail']) {
         if (user[key] !== userData[key]) {
-          Vue.set(user, key, userData[key])
+          user[key] = userData[key]
         }
       }
     },
@@ -92,9 +90,9 @@ export default {
     },
 
     DEL_USERS_DETAILS(state, [username]) {
-      Vue.delete(state.users_details, username)
+      delete state.users_details[username]
       if (state.users) {
-        Vue.delete(state.users, username)
+        delete state.users[username]
         if (Object.keys(state.users).length === 0) {
           state.users = null
         }
@@ -107,16 +105,16 @@ export default {
 
     ADD_GROUPS(state, [{ name }]) {
       if (state.groups !== undefined) {
-        Vue.set(state.groups, name, { members: [], permissions: [] })
+        state.groups[name] = { members: [], permissions: [] }
       }
     },
 
     UPDATE_GROUPS(state, [data, { groupName }]) {
-      Vue.set(state.groups, groupName, data)
+      state.groups[groupName] = data
     },
 
     DEL_GROUPS(state, [groupname]) {
-      Vue.delete(state.groups, groupname)
+      delete state.groups[groupname]
     },
 
     SET_PERMISSIONS(state, [permissions]) {
diff --git a/app/src/store/info.js b/app/src/store/info.js
index fc6698bc8..1d92b539f 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import router from '@/router'
 import i18n from '@/i18n'
 import api from '@/api'
@@ -55,7 +54,7 @@ export default {
 
     UPDATE_REQUEST(state, { request, key, value }) {
       // This rely on data persistance and reactivity.
-      Vue.set(request, key, value)
+      request[key] = value
     },
 
     REMOVE_REQUEST(state, request) {
@@ -303,7 +302,7 @@ export default {
         // the ownership to stay generic.
         const request = error.request
         delete error.request
-        Vue.set(request, 'error', error)
+        request.error = error
         // Display the error in a modal on the current view.
         commit('SET_ERROR', request)
       }
@@ -330,7 +329,7 @@ export default {
 
     DISMISS_WARNING({ commit, state }, request) {
       commit('SET_WAITING', false)
-      Vue.delete(request, 'showWarningMessage')
+      delete request.showWarningMessage
     },
 
     UPDATE_ROUTER_KEY({ commit }, { to, from }) {
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 2bf5e6360..a2facae3d 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -629,7 +629,9 @@ export default {
             Object.assign(this.externalResults, {
               forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
             })
-          } else this.$set(panel, 'serverError', err.message)
+          } else {
+            panel.serverError = err.message
+          }
         })
     },
 
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index e37a75b61..630f92791 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -257,7 +257,9 @@ export default {
             Object.assign(this.externalResults, {
               forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
             })
-          } else this.$set(panel, 'serverError', err.message)
+          } else {
+            panel.serverError = err.message
+          }
         })
     },
 
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 92be1db02..3b2d9afb2 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -133,8 +133,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
-
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
@@ -325,7 +323,7 @@ export default {
           { key: 'groups.delete', name: groupName },
         )
         .then(() => {
-          Vue.delete(this.primaryGroups, groupName)
+          delete this.primaryGroups[groupName]
         })
     },
   },
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 7e81e71f2..371da98b9 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -270,13 +270,13 @@ export default {
     },
 
     onTablePortToggling(port, protocol, connection, index, value) {
-      this.$set(this.protocols[protocol][index], connection, value)
+      this.protocols[protocol][index][connection] = value
       const action = value ? 'allow' : 'disallow'
       this.togglePort({ action, port, protocol, connection }).then(
         (toggled) => {
           // Revert change on cancel
           if (!toggled) {
-            this.$set(this.protocols[protocol][index], connection, !value)
+            this.protocols[protocol][index][connection] = !value
           }
         },
       )
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 98fbec3e3..5210855aa 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -112,7 +112,7 @@ export default {
       pending.forEach((migration) => {
         if (migration.disclaimer) {
           migration.disclaimer = migration.disclaimer.replaceAll('\n', '<br>')
-          this.$set(this.checked, migration.id, null)
+          this.checked[migration.id] = null
         }
       })
       // FIXME change to pending
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index c1be632d8..4e71fa274 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -68,7 +68,9 @@ export default {
             Object.assign(this.externalResults, {
               forms: { [panel.id]: { [err.data.name]: [err.data.error] } },
             })
-          } else this.$set(panel, 'serverError', err.message)
+          } else {
+            panel.serverError = err.message
+          }
         })
     },
   },

From 547d0ed7342ad96979bb86cb0eb09f81b9569735 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:51:37 +0100
Subject: [PATCH 28/30] refactor: vue-router currentRoute is now a ref

---
 app/src/store/info.js       | 1 +
 app/src/views/LoginView.vue | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/store/info.js b/app/src/store/info.js
index 1d92b539f..e68190289 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -153,6 +153,7 @@ export default {
     },
 
     DISCONNECT({ dispatch }, route = router.currentRoute) {
+      // FIXME vue3 currentRoute is now a ref (currentRoute.value)
       dispatch('RESET_CONNECTED')
       if (router.currentRoute.name === 'login') return
       router.push({
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 5782f2af3..79a5095c7 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -102,7 +102,9 @@ export default {
             window.location.href = '/yunohost/admin/'
           } else {
             this.$router.push(
-              this.$router.currentRoute.query.redirect || { name: 'home' },
+              this.$router.currentRoute.value.query.redirect || {
+                name: 'home',
+              },
             )
           }
         })

From 796dad8dbe0445702feddf9a98abb3f423324120 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:56:25 +0100
Subject: [PATCH 29/30] chore: update linter setup + silence bootstrap-vue
 errors + reactivate needed compat features

---
 app/.eslintrc.js                          | 19 ++++++++++++++-----
 app/src/components/globals/ViewSearch.vue |  2 +-
 app/src/main.js                           | 21 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 728ddd1a5..5390038e3 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -5,14 +5,23 @@ module.exports = {
     node: true,
   },
   extends: [
-    'plugin:vue/strongly-recommended',
+    'plugin:vue/vue3-strongly-recommended',
     'eslint:recommended',
     'plugin:prettier/recommended',
   ],
   rules: {
-    'no-unused-vars': [
-      'warn',
-      { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
-    ],
+    // 'no-unused-vars': [
+    //   'warn',
+    //   { varsIgnorePattern: '^_', destructuredArrayIgnorePattern: '^_' },
+    // ],
+    // temp vue3 compat3
+    'vue/no-v-for-template-key-on-child': 'error',
+    'vue/no-v-for-template-key': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/v-on-event-hyphenation': 'off',
+    // temp flemme
+    'vue/require-explicit-emits': 'off',
+    'vue/require-default-prop': 'off',
+    'no-unused-vars': 'off',
   },
 }
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index b507f081a..0fa71d2f1 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -57,7 +57,7 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
+  compatConfig: { MODE: 3, INSTANCE_LISTENERS: false },
   name: 'ViewSearch',
 
   props: {
diff --git a/app/src/main.js b/app/src/main.js
index 75815f438..e99b41dd6 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -20,6 +20,27 @@ app.use(i18n)
 
 configureCompat({
   MODE: 2,
+  // warnings we can do something about should be fixed
+  // next warnings are suppressed because those come from bootstrap-vue (vue2)
+  INSTANCE_EVENT_EMITTER: 'suppress-warning',
+  COMPONENT_FUNCTIONAL: 'suppress-warning',
+  RENDER_FUNCTION: 'suppress-warning',
+  GLOBAL_EXTEND: 'suppress-warning',
+  GLOBAL_MOUNT: 'suppress-warning',
+  WATCH_ARRAY: 'suppress-warning',
+  GLOBAL_PROTOTYPE: 'suppress-warning',
+  INSTANCE_SCOPED_SLOTS: 'suppress-warning',
+  INSTANCE_LISTENERS: 'suppress-warning',
+  OPTIONS_DATA_MERGE: 'suppress-warning',
+  OPTIONS_BEFORE_DESTROY: 'suppress-warning',
+  INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
+  CUSTOM_DIR: 'suppress-warning',
+  // TODO
+  // ATTR_FALSE_VALUE: 'suppress-warning',
+  // ATTR_ENUMERATED_COERCION
+  // ATTR_FALSE_VALUE
+  // COMPONENT_V_MODEL: 'suppress-warning',
+  // COMPILER_V_BIND_SYNC
 })
 
 // Styles are imported in `src/App.vue` <style>

From 23594bc33883610c5b1b7a4ceee6be459c09b579 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 12 Mar 2024 03:09:59 +0100
Subject: [PATCH 30/30] fix: temp fix for reactivity problems on nested obj
 request

---
 app/src/store/info.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/src/store/info.js b/app/src/store/info.js
index e68190289..a631b37dd 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -13,6 +13,7 @@ export default {
     reconnecting: null, // null|Object { attemps, delay, initialDelay }
     history: [], // Array of `request`
     requests: [], // Array of `request`
+    currentRequest: null,
     error: null, // null || request
     historyTimer: null, // null || setTimeout id
     tempMessages: [], // Array of messages
@@ -43,6 +44,10 @@ export default {
       state.reconnecting = args
     },
 
+    SET_CURRENT_REQUEST(state, request) {
+      state.currentRequest = request
+    },
+
     ADD_REQUEST(state, request) {
       if (state.requests.length > 10) {
         // We do not remove requests right after it resolves since an error might bring
@@ -52,9 +57,9 @@ export default {
       state.requests.push(request)
     },
 
-    UPDATE_REQUEST(state, { request, key, value }) {
+    UPDATE_REQUEST(state, { key, value }) {
       // This rely on data persistance and reactivity.
-      request[key] = value
+      state.currentRequest[key] = value
     },
 
     REMOVE_REQUEST(state, request) {
@@ -70,7 +75,7 @@ export default {
       state.tempMessages.push([message, type])
     },
 
-    UPDATE_DISPLAYED_MESSAGES(state, { request }) {
+    UPDATE_DISPLAYED_MESSAGES(state) {
       if (!state.tempMessages.length) {
         state.historyTimer = null
         return
@@ -86,9 +91,10 @@ export default {
       )
       state.tempMessages = []
       state.historyTimer = null
-      request.messages = request.messages.concat(messages)
-      request.warnings += warnings
-      request.errors += errors
+      state.currentRequest.messages =
+        state.currentRequest.messages.concat(messages)
+      state.currentRequest.warnings += warnings
+      state.currentRequest.errors += errors
     },
 
     SET_ERROR(state, request) {
@@ -221,6 +227,7 @@ export default {
         commit('ADD_HISTORY_ACTION', request)
       }
       commit('ADD_REQUEST', request)
+      commit('SET_CURRENT_REQUEST', request)
       if (wait) {
         setTimeout(() => {
           // Display the waiting modal only if the request takes some time.
@@ -245,13 +252,13 @@ export default {
           messages.length &&
           messages[messages.length - 1].color === 'warning'
         ) {
-          request.showWarningMessage = true
+          state.currentRequest.showWarningMessage = true
         }
         status = 'warning'
       }
 
       commit('UPDATE_REQUEST', { request, key: 'status', value: status })
-      if (wait && !request.showWarningMessage) {
+      if (wait && !state.currentRequest.showWarningMessage) {
         // Remove the overlay after a short delay to allow an error to display withtout flickering.
         setTimeout(() => {
           commit('SET_WAITING', false)
@@ -419,10 +426,7 @@ export default {
     reconnecting: (state) => state.reconnecting,
     history: (state) => state.history,
     lastAction: (state) => state.history[state.history.length - 1],
-    currentRequest: (state) => {
-      const request = state.requests.find(({ status }) => status === 'pending')
-      return request || state.requests[state.requests.length - 1]
-    },
+    currentRequest: (state) => state.currentRequest,
     routerKey: (state) => state.routerKey,
     breadcrumb: (state) => state.breadcrumb,
     transitionName: (state) => state.transitionName,