Migrate to vue 3

Signed-off-by: Raimund Schlüßler <[email protected]>

package.json

@@ -46,6 +46,7 @@
 		"@nextcloud/l10n": "^1.2.3",
 		"@nextcloud/logger": "^2.0.0",
 		"@nextcloud/router": "^2.0.0",
+		"@vue/compat": "^3.2.31",
 		"debounce": "1.2.1",
 		"emoji-mart-vue-fast": "^10.2.1",
 		"escape-html": "^1.0.3",
@@ -59,7 +60,7 @@
 		"tributejs": "^5.1.3",
 		"v-click-outside": "^3.0.1",
 		"v-tooltip": "^2.0.3",
-		"vue": "^2.6.14",
+		"vue": "^3.2.31",
 		"vue-color": "^2.7.1",
 		"vue-material-design-icons": "^5.0.0",
 		"vue-multiselect": "^2.1.6",
@@ -107,7 +108,7 @@
 		"url-loader": "^4.1.0",
 		"vue-eslint-parser": "^8.0.1",
 		"vue-jest": "^3.0.5",
-		"vue-loader": "^15.9.1",
+		"vue-loader": "^17.0.0",
 		"vue-styleguidist": "^4.44.27",
 		"vue-template-compiler": "^2.6.14",
 		"webpack": "^5.71.0",

src/components/AppNavigationItem/AppNavigationItem.vue

@@ -134,7 +134,7 @@ Just set the `pinned` prop.
 			<!-- never show the icon over the collapsible if mobile -->
 			<div :class="{ 'icon-loading-small': loading, [icon]: icon && isIconShown }"
 				class="app-navigation-entry-icon">
-				<slot v-show="!loading && isIconShown" name="icon" />
+				<slot v-if="!loading && isIconShown" name="icon" />
 			</div>
 			<span v-if="!editingActive" class="app-navigation-entry__title" :title="title">
 				{{ title }}

src/mixins/actionGlobal.js

@@ -20,14 +20,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import Vue from 'vue'
+import { warn } from 'vue'
 
 export default {
 	before() {
 		// all actions requires a valid text content
 		// if none, forbid the component mount and throw error
 		if (!this.$slots.default || this.text.trim() === '') {
-			Vue.util.warn(`${this.$options.name} cannot be empty and requires a meaningful text content`, this)
+			warn(`${this.$options.name} cannot be empty and requires a meaningful text content`, this)
 			this.$destroy()
 			this.$el.remove()
 		}

src/mixins/isMobile/index.js

@@ -20,7 +20,7 @@
  *
  */
 
-import { IsMobileState } from '../../utils/IsMobileState'
+// import { IsMobileState } from '../../utils/IsMobileState'
 
 export default {
 	data() {
@@ -29,11 +29,11 @@ export default {
 		}
 	},
 	mounted() {
-		IsMobileState.$on('changed', this.onIsMobileChanged)
-		this.isMobile = IsMobileState.isMobile
+		// IsMobileState.$on('changed', this.onIsMobileChanged)
+		// this.isMobile = IsMobileState.isMobile
 	},
 	beforeDestroy() {
-		IsMobileState.$off('changed', this.onIsMobileChanged)
+		// IsMobileState.$off('changed', this.onIsMobileChanged)
 	},
 	methods: {
 		onIsMobileChanged(val) {

src/mixins/richEditor/index.js

@@ -23,7 +23,7 @@
 import escapeHtml from 'escape-html'
 import Linkify from '../../utils/Linkify'
 import stripTags from 'striptags'
-import Vue from 'vue'
+// import Vue from 'vue'
 
 import MentionBubble from '../../components/RichContenteditable/MentionBubble'
 
@@ -126,27 +126,27 @@ export default {
 		 * @return {string} the rendered html
 		 */
 		renderComponentHtml(propsData, component) {
-			const View = Vue.extend(component)
-			const Item = new View({
-				propsData,
-			})
-
-			// Prepare mountpoint
-			const wrapper = document.createElement('div')
-			const mount = document.createElement('div')
-			wrapper.style.display = 'none'
-			wrapper.appendChild(mount)
-			document.body.appendChild(wrapper)
-
-			// Mount and get raw html
-			Item.$mount(mount)
-			const renderedHtml = wrapper.innerHTML
-
-			// Destroy
-			Item.$destroy()
-			wrapper.remove()
-
-			return renderedHtml
+			// const View = Vue.extend(component)
+			// const Item = new View({
+			// propsData,
+			// })
+
+			// // Prepare mountpoint
+			// const wrapper = document.createElement('div')
+			// const mount = document.createElement('div')
+			// wrapper.style.display = 'none'
+			// wrapper.appendChild(mount)
+			// document.body.appendChild(wrapper)
+
+			// // Mount and get raw html
+			// Item.$mount(mount)
+			// const renderedHtml = wrapper.innerHTML
+
+			// // Destroy
+			// Item.$destroy()
+			// wrapper.remove()
+
+			// return renderedHtml
 		},
 	},
 }

src/utils/IsMobileState.js

@@ -21,29 +21,29 @@
  *
  */
 
-import Vue from 'vue'
+// import { createApp } from 'vue'
 
-export const IsMobileState = new Vue({
-	data() {
-		return {
-			isMobile: false,
-		}
-	},
-	watch: {
-		isMobile(val) {
-			this.$emit('changed', val)
-		},
-	},
-	created() {
-		window.addEventListener('resize', this.handleWindowResize)
-		this.handleWindowResize()
-	},
-	beforeDestroy() {
-		window.removeEventListener('resize', this.handleWindowResize)
-	},
-	methods: {
-		handleWindowResize() {
-			this.isMobile = document.documentElement.clientWidth < 1024
-		},
-	},
-})
+// export const IsMobileState = createApp({
+// 	data() {
+// 		return {
+// 			isMobile: false,
+// 		}
+// 	},
+// 	watch: {
+// 		isMobile(val) {
+// 			this.$emit('changed', val)
+// 		},
+// 	},
+// 	created() {
+// 		window.addEventListener('resize', this.handleWindowResize)
+// 		this.handleWindowResize()
+// 	},
+// 	beforeDestroy() {
+// 		window.removeEventListener('resize', this.handleWindowResize)
+// 	},
+// 	methods: {
+// 		handleWindowResize() {
+// 			this.isMobile = document.documentElement.clientWidth < 1024
+// 		},
+// 	},
+// })

src/utils/ValidateSlot.js

@@ -19,7 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import Vue from 'vue'
+import { warn } from 'vue'
 
 /**
  * Validate children of a vue component
@@ -45,7 +45,7 @@ const ValidateSlot = (slots, allowed, vm) => {
 			// only warn when html elment or forbidden component
 			// sometimes text nodes are present which are hardly removeable by the developer and spam the warnings
 			if (isHtmlElement || isForbiddenComponent) {
-				Vue.util.warn(`${isHtmlElement ? node.tag : node.componentOptions.tag} is not allowed inside the ${vm.$options.name} component`, vm)
+				warn(`${isHtmlElement ? node.tag : node.componentOptions.tag} is not allowed inside the ${vm.$options.name} component`, vm)
 			}
 
 			// cleanup