migration: remove @vue/compat + update to vue 3.4.21

app/package.json

@@ -15,14 +15,13 @@
   "dependencies": {
     "@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",
     "bootstrap-vue": "^2.23.1",
     "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
-    "vue": "3.3.4",
+    "vue": "^3.4.21",
     "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
     "vue-showdown": "^4.2.0",

app/src/App.vue

@@ -101,7 +101,6 @@ import { mapGetters } from 'vuex'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'App',
 
   components: {

app/src/components/AdressInputSelect.vue

@@ -39,7 +39,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AdressInputSelect',
 
   inheritAttrs: false,

app/src/components/CardCollapse.vue

@@ -23,7 +23,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardCollapse',
 
   props: {

app/src/components/CardDeckFeed.vue

@@ -5,7 +5,6 @@ import { h } from 'vue'
 import { BCardGroup } from 'bootstrap-vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardDeckFeed',
 
   props: {

app/src/components/ConfigPanel.vue

@@ -54,7 +54,6 @@
 import { filterObject } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ConfigPanel',
 
   props: {

app/src/components/ConfigPanels.vue

@@ -32,7 +32,6 @@ import { defineAsyncComponent } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ConfigPanels',
 
   inheritAttrs: false,

app/src/components/LazyRenderer.vue

@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'LazyRenderer',
 
   props: {

app/src/components/MessageListGroup.vue

@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'MessageListGroup',
 
   props: {

app/src/components/QueryHeader.vue

@@ -49,7 +49,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'QueryHeader',
 
   props: {

app/src/components/RecursiveListGroup.vue

@@ -45,7 +45,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'RecursiveListGroup',
 
   props: {

app/src/components/RoutableTabs.vue

@@ -37,7 +37,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'RoutableTabs',
 
   // Thanks to `v-bind="$attrs"` and `inheritAttrs: false`, this component can forward

app/src/components/globals/AbstractForm.vue

@@ -32,7 +32,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AbstractForm',
 
   props: {

app/src/components/globals/CardForm.vue

@@ -37,7 +37,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardForm',
 
   props: {

app/src/components/globals/DescriptionRow.vue

@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DescriptionRow',
 
   props: {

app/src/components/globals/ExplainWhat.vue

@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ExplainWhat',
 
   props: {

app/src/components/globals/FormField.vue

@@ -49,7 +49,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'FormField',
 
   inheritAttrs: false,

app/src/components/globals/ReadOnlyField.vue

@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReadOnlyField',
 
   inheritAttrs: false,

app/src/components/globals/TopBar.vue

@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TopBar',
 
   props: {

app/src/components/globals/ViewBase.vue

@@ -33,7 +33,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ViewBase',
 
   props: {

app/src/components/globals/ViewSearch.vue

@@ -57,7 +57,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3, INSTANCE_LISTENERS: false },
   name: 'ViewSearch',
 
   props: {

app/src/components/globals/YAlert.vue

@@ -18,7 +18,6 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YAlert',
 
   props: {

app/src/components/globals/YBreadcrumb.vue

@@ -20,7 +20,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YBreadcrumb',
 
   computed: {

app/src/components/globals/YCard.vue

@@ -56,7 +56,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YCard',
 
   props: {

app/src/components/globals/YIcon.vue

@@ -7,7 +7,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YIcon',
   props: {
     iname: { type: String, required: true },

app/src/components/globals/YListGroupItem.vue

@@ -14,7 +14,6 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YListGroupItem',
 
   props: {

app/src/components/globals/YSpinner.vue

@@ -6,7 +6,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YSpinner',
 
   computed: {

app/src/components/globals/formItems/ButtonItem.vue

@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ButtonItem',
 
   props: {

app/src/components/globals/formItems/CheckboxItem.vue

@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CheckboxItem',
 
   props: {

app/src/components/globals/formItems/DisplayTextItem.vue

@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DisplayTextItem',
 
   props: {

app/src/components/globals/formItems/FileItem.vue

@@ -30,7 +30,6 @@
 import { getFileContent } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'FileItem',
 
   props: {

app/src/components/globals/formItems/InputItem.vue

@@ -18,7 +18,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'InputItem',
 
   props: {

app/src/components/globals/formItems/MarkdownItem.vue

@@ -4,7 +4,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'MarkdownItem',
 
   props: {

app/src/components/globals/formItems/ReadOnlyAlertItem.vue

@@ -12,7 +12,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReadOnlyAlertItem',
 
   props: {

app/src/components/globals/formItems/SelectItem.vue

@@ -11,7 +11,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'SelectItem',
 
   props: {

app/src/components/globals/formItems/TagsItem.vue

@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TagsItem',
 
   props: {

app/src/components/globals/formItems/TagsSelectizeItem.vue

@@ -93,7 +93,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TagsSelectizeItem',
 
   inheritAttrs: false,

app/src/components/globals/formItems/TextAreaItem.vue

@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TextAreaItem',
 
   props: {

app/src/components/globals/skeletons/CardButtonsSkeleton.vue

@@ -21,7 +21,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardButtonsSkeleton',
 
   props: {

app/src/components/globals/skeletons/CardFormSkeleton.vue

@@ -47,7 +47,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardFormSkeleton',
 
   props: {

app/src/components/globals/skeletons/CardInfoSkeleton.vue

@@ -19,7 +19,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardInfoSkeleton',
 
   props: {

app/src/components/globals/skeletons/CardListSkeleton.vue

@@ -23,7 +23,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardListSkeleton',
 
   props: {

app/src/components/globals/skeletons/ListGroupSkeleton.vue

@@ -11,7 +11,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ListGroupSkeleton',
 
   props: {

app/src/main.js

@@ -1,4 +1,4 @@
-import { createApp, configureCompat } from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
 import { VueShowdownPlugin } from 'vue-showdown'
@@ -18,31 +18,6 @@ app.use(store)
 app.use(router)
 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>
 app.use(BootstrapVue, {
   BSkeleton: { animation: 'none' },

app/src/views/HomeView.vue

@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'HomeView',
 
   data() {

app/src/views/LoginView.vue

@@ -39,7 +39,6 @@ import { useVuelidate } from '@vuelidate/core'
 import { alphalownumdot_, required, minLength } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'LoginView',
 
   props: {

app/src/views/PostInstall.vue

@@ -104,7 +104,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'PostInstall',
 
   components: {

app/src/views/_partials/DomainForm.vue

@@ -129,7 +129,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainForm',
 
   props: {

app/src/views/_partials/ErrorDisplay.vue

@@ -54,7 +54,6 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ErrorDisplay',
 
   components: {

app/src/views/_partials/HistoryConsole.vue

@@ -94,7 +94,6 @@ import QueryHeader from '@/components/QueryHeader.vue'
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'HistoryConsole',
 
   components: {

app/src/views/_partials/ReconnectingDisplay.vue

@@ -43,7 +43,6 @@ import api from '@/api'
 import LoginView from '@/views/LoginView.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReconnectingDisplay',
 
   components: {

app/src/views/_partials/ViewLockOverlay.vue

@@ -30,7 +30,6 @@ import {
 import QueryHeader from '@/components/QueryHeader.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ViewLockOverlay',
 
   components: {

app/src/views/_partials/WaitingDisplay.vue

@@ -30,7 +30,6 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'WaitingDisplay',
 
   components: {

app/src/views/_partials/WarningDisplay.vue

@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'WarningDisplay',
 
   props: {

app/src/views/app/AppCatalog.vue

@@ -227,7 +227,6 @@ import { required, appRepoUrl } from '@/helpers/validators'
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppCatalog',
 
   components: {

app/src/views/app/AppInfo.vue

@@ -377,7 +377,6 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppInfo',
 
   components: {

app/src/views/app/AppInstall.vue

@@ -217,7 +217,6 @@ import {
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppInstall',
 
   components: {

app/src/views/app/AppList.vue

@@ -39,7 +39,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppList',
 
   data() {

app/src/views/backup/BackupCreate.vue

@@ -127,7 +127,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupCreate',
 
   props: {

app/src/views/backup/BackupInfo.vue

@@ -142,7 +142,6 @@ import { humanSize } from '@/helpers/filters/human'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupInfo',
 
   props: {

app/src/views/backup/BackupList.vue

@@ -49,7 +49,6 @@ import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupList',
 
   props: {

app/src/views/backup/BackupView.vue

@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupView',
 
   data() {

app/src/views/diagnosis/DiagnosisView.vue

@@ -153,7 +153,6 @@ import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DiagnosisView',
 
   data() {

app/src/views/domain/DomainAdd.vue

@@ -14,7 +14,6 @@ import api from '@/api'
 import { DomainForm } from '@/views/_partials'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainAdd',
 
   data() {

app/src/views/domain/DomainDns.vue

@@ -148,7 +148,6 @@ import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainDns',
 
   props: {

app/src/views/domain/DomainInfo.vue

@@ -149,7 +149,6 @@ import ConfigPanels from '@/components/ConfigPanels.vue'
 import DomainDns from './DomainDns.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainInfo',
 
   components: {

app/src/views/domain/DomainList.vue

@@ -53,7 +53,6 @@ import { mapGetters } from 'vuex'
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainList',
 
   components: {

app/src/views/group/GroupCreate.vue

@@ -22,7 +22,6 @@ import api from '@/api'
 import { required, alphalownumdot_ } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'GroupCreate',
 
   setup() {

app/src/views/group/GroupList.vue

@@ -140,7 +140,6 @@ 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: {

app/src/views/service/ServiceInfo.vue

@@ -86,7 +86,6 @@ import api from '@/api'
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ServiceInfo',
 
   props: {

app/src/views/service/ServiceList.vue

@@ -46,7 +46,6 @@
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ServiceList',
 
   data() {

app/src/views/tool/ToolFirewall.vue

@@ -125,7 +125,6 @@ import api from '@/api'
 import { required, integer, between } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolFirewall',
 
   setup() {

app/src/views/tool/ToolList.vue

@@ -15,7 +15,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolList',
 
   data() {

app/src/views/tool/ToolLog.vue

@@ -78,7 +78,6 @@ import { escapeHtml } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolLog',
 
   props: {

app/src/views/tool/ToolLogs.vue

@@ -29,7 +29,6 @@
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolLogs',
 
   data() {

app/src/views/tool/ToolMigrations.vue

@@ -91,7 +91,6 @@ import api from '@/api'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolMigrations',
 
   data() {

app/src/views/tool/ToolPower.vue

@@ -37,7 +37,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolPower',
 
   methods: {

app/src/views/tool/ToolSettings.vue

@@ -23,7 +23,6 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolSettingsConfig',
 
   components: {

app/src/views/tool/ToolWebadmin.vue

@@ -27,7 +27,6 @@ function mapStoreGetSet(props = [], action = 'commit') {
 }
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolWebadmin',
 
   data() {

app/src/views/update/SystemUpdate.vue

@@ -144,7 +144,6 @@ import { mapGetters } from 'vuex'
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'SystemUpdate',
 
   components: {

app/src/views/user/UserCreate.vue

@@ -84,7 +84,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserCreate',
 
   setup() {

app/src/views/user/UserEdit.vue

@@ -134,7 +134,6 @@ import {
 import AdressInputSelect from '@/components/AdressInputSelect.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserEdit',
 
   props: {

app/src/views/user/UserImport.vue

@@ -29,7 +29,6 @@ import { formatFormData } from '@/helpers/yunohostArguments'
 import { required } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserImport',
 
   setup() {

app/src/views/user/UserInfo.vue

@@ -106,7 +106,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserInfo',
 
   props: {

app/src/views/user/UserList.vue

@@ -56,7 +56,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserList',
 
   data() {

app/vite.config.js

@@ -23,7 +23,6 @@ export default defineConfig(({ command, mode }) => {
     },
     resolve: {
       alias: [
-        { find: 'vue', replacement: '@vue/compat' },
         // this is required for the SCSS modules imports with `~` (node_modules)
         {
           find: /^~(.*)$/,
@@ -47,17 +46,7 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
-    plugins: [
+    plugins: [createVuePlugin()],
-      createVuePlugin({
-        template: {
-          compilerOptions: {
-            compatConfig: {
-              MODE: 2,
-            },
-          },
-        },
-      }),
-    ],
     build: {
       rollupOptions: {
         output: {