feat: add vue3 in compat mode

See: https://v3.vuejs.org/guide/migration/migration-build.html#installation

package.json

@@ -14,6 +14,7 @@
     "test:frontend": "cypress run"
   },
   "dependencies": {
+    "@vue/compat": "3.2.14",
     "browserslist": "4.17.1",
     "bulma": "0.9.3",
     "camel-case": "4.1.2",
@@ -27,7 +28,7 @@
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
     "ufo": "0.7.9",
-    "vue": "2.6.14",
+    "vue": "3.2.14",
     "vue-advanced-cropper": "1.8.2",
     "vue-drag-resize": "1.5.4",
     "vue-easymde": "1.4.0",
@@ -46,12 +47,12 @@
     "@types/jest": "27.0.2",
     "@typescript-eslint/eslint-plugin": "4.32.0",
     "@typescript-eslint/parser": "4.32.0",
+    "@vitejs/plugin-vue": "^1.9.0",
     "@vue/babel-preset-app": "4.5.13",
     "@vue/eslint-config-typescript": "7.0.0",
     "@vue/runtime-dom": "latest",
     "autoprefixer": "10.3.6",
     "axios": "0.21.4",
-    "babel-eslint": "10.1.0",
     "cypress": "8.5.0",
     "cypress-file-upload": "5.0.8",
     "esbuild": "0.13.3",
@@ -67,11 +68,9 @@
     "typescript": "4.4.3",
     "vite": "2.6.1",
     "vite-plugin-pwa": "0.11.2",
-    "vite-plugin-vue2": "1.8.2",
     "vue-flatpickr-component": "8.1.7",
     "vue-notification": "1.3.20",
     "vue-router": "3.5.2",
-    "vue-template-compiler": "2.6.14",
     "wait-on": "6.0.0",
     "workbox-cli": "6.3.0"
   },
@@ -84,7 +83,7 @@
     },
     "extends": [
       "eslint:recommended",
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "@vue/typescript"
     ],
     "rules": {

src/App.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import {defineComponent} from 'vue'
 import {mapState, mapGetters} from 'vuex'
 import isTouchDevice from 'is-touch-device'
 
@@ -36,7 +37,7 @@ import ContentNoAuth from './components/home/contentNoAuth'
 import {setLanguage} from './i18n/setup'
 import AccountDeleteService from '@/services/accountDelete'
 
-export default {
+export default defineComponent({
 	name: 'app',
 	components: {
 		ContentNoAuth,
@@ -112,5 +113,5 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>

src/main.ts

@@ -1,4 +1,5 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
+
 import App from './App.vue'
 import router from './router'
 
@@ -14,9 +15,6 @@ import {formatDate, formatDateSince} from '@/helpers/time/formatDate'
 // @ts-ignore
 import {VERSION} from './version.json'
 
-// Register the modal
-// @ts-ignore
-import Modal from './components/modal/modal'
 // Add CSS
 import './styles/vikunja.scss'
 // Notifications
@@ -27,11 +25,6 @@ import './registerServiceWorker'
 // Shortcuts
 // @ts-ignore - no types available
 import vueShortkey from 'vue-shortkey'
-// Mixins
-import {colorIsDark} from './helpers/color/colorIsDark'
-import {setTitle} from './helpers/setTitle'
-import {getNamespaceTitle} from './helpers/getNamespaceTitle'
-import {getListTitle} from './helpers/getListTitle'
 // Vuex
 import {store} from './store'
 // i18n
@@ -51,57 +44,45 @@ if (window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) ===
 	window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
 }
 
-Vue.component('modal', Modal)
+const app = createApp(App)
-
-Vue.config.productionTip = false
 
 Vue.use(Notifications)
 
-import FontAwesomeIcon from './icons'
-Vue.component('icon', FontAwesomeIcon)
 
 Vue.use(vueShortkey, {prevent: ['input', 'textarea', '.input', '[contenteditable]']})
 
-// define as global property
+app.config.globalProperties.$message = {
-const Message = {
+	error(e, actions = []) {
-	install(Vue) {
+		return error(e, Vue.prototype, actions)
-		if (this.installed) {
+	},
-			return
+	success(s, actions = []) {
-		}
+		return success(s, Vue.prototype, actions)
-		this.installed = true
-
-		const message = {
-			error(e, actions = []) {
-				return error(e, Vue.prototype, actions)
-			},
-			success(s, actions = []) {
-				return success(s, Vue.prototype, actions)
-			},
-		}
-	
-		Vue.prototype['$message'] = message
 	},
 }
 
-Vue.use(Message)
+// directives
-
 import focus from './directives/focus'
-Vue.directive('focus', focus)
-
 import tooltip from './directives/tooltip'
+app.directive('focus', focus)
+app.directive('tooltip', tooltip)
 
-// @ts-ignore
+// global components
-Vue.directive('tooltip', tooltip)
+import FontAwesomeIcon from './icons'
+import Button from './components/input/button.vue'
+import Modal from './components/modal/modal.vue'
+import Card from './components/misc/card.vue'
+app.component('icon', FontAwesomeIcon)
+app.component('x-button', Button)
+app.component('modal', Modal)
+app.component('card', Card)
 
-// @ts-ignore
+// Mixins
-import Button from './components/input/button'
+import message from './message'
-Vue.component('x-button', Button)
+import {getNamespaceTitle} from './helpers/getNamespaceTitle'
-
+import {getListTitle} from './helpers/getListTitle'
-// @ts-ignore
+import {colorIsDark} from './helpers/color/colorIsDark'
-import Card from './components/misc/card'
+import {setTitle} from './helpers/setTitle'
-Vue.component('card', Card)
+app.mixin({
-
-Vue.mixin({
 	methods: {
 		formatDateSince(date) {
 			return formatDateSince(date, (p: VueI18n.Path, params?: VueI18n.Values) => this.$t(p, params))
@@ -123,9 +104,8 @@ Vue.mixin({
 	},
 })
 
-new Vue({
+app.use(router)
-	router,
+app.use(store)
-	store,
+app.use(i18n)
-	i18n,
+
-	render: h => h(App),
+app.mount('#app')
-}).$mount('#app')

vite.config.js

@@ -1,4 +1,4 @@
-const {createVuePlugin} = require('vite-plugin-vue2')
+import createVuePlugin from '@vitejs/plugin-vue'
 const {VitePWA} = require('vite-plugin-pwa')
 const path = require('path')
 const {visualizer} = require('rollup-plugin-visualizer')
@@ -16,7 +16,15 @@ module.exports = {
 		},
 	},
 	plugins: [
-		createVuePlugin(),
+		createVuePlugin({
+			template: {
+				compilerOptions: {
+					compatConfig: {
+						MODE: 2,
+					},
+				},
+			},
+		}),
 		VitePWA({
 			srcDir: 'src',
 			filename: 'sw.js',
@@ -79,6 +87,10 @@ module.exports = {
 	],
 	resolve: {
 		alias: [
+			{
+				find: 'vue',
+				replacement: '@vue/compat',
+			},
 			{
 				find: '@',
 				replacement: path.resolve(__dirname, 'src'),