diff --git a/cypress/component/modal.cy.ts b/cypress/component/modal.cy.ts
index 98e421f302..01ee456ebd 100644
--- a/cypress/component/modal.cy.ts
+++ b/cypress/component/modal.cy.ts
@@ -1,11 +1,12 @@
-import { mount } from 'cypress/vue2'
+import { mount } from 'cypress/vue'
 import NcModal from '../../src/components/NcModal/NcModal.vue'
 import type { Component } from 'vue'
+import { h } from 'vue'
 
 describe('NcModal', () => {
 	it('close button is visible when content is scrolled', () => {
 		mount(NcModal, {
-			propsData: {
+			props: {
 				show: true,
 				size: 'small',
 				name: 'Name',
@@ -13,10 +14,10 @@ describe('NcModal', () => {
 			slots: {
 				// Create two div as children, first is 100vh = overflows the content, second just gets some data attribute so we can scroll into view
 				default: {
-					render: (h) =>
+					render: () =>
 						h('div', [
-							h('div', { style: 'height: 100vh;' }),
-							h('div', { attrs: { 'data-cy': 'bottom' } }),
+							h('div', { style: { height: '100vh' } }),
+							h('div', { 'data-cy': 'bottom' }),
 						]),
 				} as Component,
 			},
diff --git a/cypress/component/richtext.cy.ts b/cypress/component/richtext.cy.ts
index 519068d7b9..dbf9cc069e 100644
--- a/cypress/component/richtext.cy.ts
+++ b/cypress/component/richtext.cy.ts
@@ -1,7 +1,7 @@
 // Markdown guide: https://www.markdownguide.org/basic-syntax/
 // Reference tests: https://github.com/nextcloud-deps/CDMarkdownKit/tree/master/CDMarkdownKitTests
 
-import { mount } from 'cypress/vue2'
+import { mount } from 'cypress/vue'
 import NcRichText from '../../src/components/NcRichText/NcRichText.vue'
 
 describe('NcRichText', () => {
@@ -18,7 +18,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -31,7 +31,7 @@ describe('NcRichText', () => {
 
 			it('ignored heading (with hash (#) syntax padded to the text)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '#heading',
 						useMarkdown: true,
 					},
@@ -42,7 +42,7 @@ describe('NcRichText', () => {
 
 			it('heading 1 (with equal (=) syntax on the next line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'heading 1\n==',
 						useMarkdown: true,
 					},
@@ -53,7 +53,7 @@ describe('NcRichText', () => {
 
 			it('heading 2 (with dash (-) syntax on the next line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'heading 2\n--',
 						useMarkdown: true,
 					},
@@ -66,7 +66,7 @@ describe('NcRichText', () => {
 		describe('bold text', () => {
 			it('bold text (single with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '**bold asterisk**',
 						useMarkdown: true,
 					},
@@ -77,7 +77,7 @@ describe('NcRichText', () => {
 
 			it('bold text (single with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '__bold underscore__',
 						useMarkdown: true,
 					},
@@ -89,7 +89,7 @@ describe('NcRichText', () => {
 			it('bold text (several in line with different syntax)', () => {
 				const outputs = ['bold underscore', 'bold asterisk']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text __bold underscore__ normal text **bold asterisk** normal text',
 						useMarkdown: true,
 					},
@@ -103,7 +103,7 @@ describe('NcRichText', () => {
 
 			it('bold text (between normal texts with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text**bold**text',
 						useMarkdown: true,
 					},
@@ -114,7 +114,7 @@ describe('NcRichText', () => {
 
 			it('ignored bold text (between normal texts with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text__bold__text',
 						useMarkdown: true,
 					},
@@ -126,7 +126,7 @@ describe('NcRichText', () => {
 			it('normal text (between bold texts with asterisk syntax)', () => {
 				const outputs = ['bold asterisk', 'bold asterisk']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '**bold asterisk**normal text**bold asterisk**',
 						useMarkdown: true,
 					},
@@ -142,7 +142,7 @@ describe('NcRichText', () => {
 		describe('italic text', () => {
 			it('italic text (single with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '*italic asterisk*',
 						useMarkdown: true,
 					},
@@ -153,7 +153,7 @@ describe('NcRichText', () => {
 
 			it('italic text (single with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '_italic underscore_',
 						useMarkdown: true,
 					},
@@ -165,7 +165,7 @@ describe('NcRichText', () => {
 			it('italic text (several in line with different syntax)', () => {
 				const outputs = ['italic underscore', 'italic asterisk']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text _italic underscore_ normal text *italic asterisk* normal text',
 						useMarkdown: true,
 					},
@@ -179,7 +179,7 @@ describe('NcRichText', () => {
 
 			it('italic text (between normal texts with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text*italic*text',
 						useMarkdown: true,
 					},
@@ -190,7 +190,7 @@ describe('NcRichText', () => {
 
 			it('ignored italic text (between normal texts with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text_italic_text',
 						useMarkdown: true,
 					},
@@ -202,7 +202,7 @@ describe('NcRichText', () => {
 			it('normal text (between italic texts with asterisk syntax)', () => {
 				const outputs = ['italic asterisk', 'italic asterisk']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '*italic asterisk*normal text*italic asterisk*',
 						useMarkdown: true,
 					},
@@ -218,7 +218,7 @@ describe('NcRichText', () => {
 		describe('inline code', () => {
 			it('inline code (single with backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text `inline code` normal text',
 						useMarkdown: true,
 					},
@@ -229,7 +229,7 @@ describe('NcRichText', () => {
 
 			it('inline code (single with double backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text ``inline code`` normal text',
 						useMarkdown: true,
 					},
@@ -240,7 +240,7 @@ describe('NcRichText', () => {
 
 			it('inline code (single with triple backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text ```inline code``` normal text',
 						useMarkdown: true,
 					},
@@ -252,7 +252,7 @@ describe('NcRichText', () => {
 			it('inline code (several in line )', () => {
 				const outputs = ['inline code 1', 'inline code 2']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text `inline code 1`normal text ``inline code 2`` normal text',
 						useMarkdown: true,
 					},
@@ -266,7 +266,7 @@ describe('NcRichText', () => {
 
 			it('inline code (between normal texts)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text`inline code`text',
 						useMarkdown: true,
 					},
@@ -279,7 +279,7 @@ describe('NcRichText', () => {
 		describe('multiline code', () => {
 			it('multiline code (with triple backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\nmultiline code\n```',
 						useMarkdown: true,
 					},
@@ -290,7 +290,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (ignored info)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```vue\nmultiline code\n```',
 						useMarkdown: true,
 					},
@@ -301,7 +301,7 @@ describe('NcRichText', () => {
 
 			it('empty multiline code', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '``````',
 						useMarkdown: true,
 					},
@@ -312,7 +312,7 @@ describe('NcRichText', () => {
 
 			it('empty multiline code (with new line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\n```',
 						useMarkdown: true,
 					},
@@ -323,7 +323,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (with several lines)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\nline 1\nline 2\nline 3\n```',
 						useMarkdown: true,
 					},
@@ -335,7 +335,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (with ignored bold, italic, inline code syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\n**bold text**\n_italic text_\n`inline code`\n```',
 						useMarkdown: true,
 					},
@@ -348,7 +348,7 @@ describe('NcRichText', () => {
 		describe('blockquote', () => {
 			it('blockquote (with greater then (gt >) syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> blockquote',
 						useMarkdown: true,
 					},
@@ -359,7 +359,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with bold, italic text, inline code)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> blockquote **bold text** _italic text_ `inline code`',
 						useMarkdown: true,
 					},
@@ -373,7 +373,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with several lines)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> line 1\nline 2\n line 3',
 						useMarkdown: true,
 					},
@@ -384,7 +384,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (divided from normal text)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text\n> line 1\nline 2\n\nnormal text',
 						useMarkdown: true,
 					},
@@ -395,7 +395,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with several paragraphs)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> line 1\n>\n> line 3',
 						useMarkdown: true,
 					},
@@ -406,7 +406,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with nested blockquote)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> blockquote\n>\n>> nested blockquote',
 						useMarkdown: true,
 					},
@@ -425,7 +425,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -446,7 +446,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -467,7 +467,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -483,7 +483,7 @@ describe('NcRichText', () => {
 		describe('dividers', () => {
 			it('dividers (with different syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '***\n---\n___',
 						useMarkdown: true,
 					},
diff --git a/jest.config.js b/jest.config.js
index 63fa487509..46cb34b6a5 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,6 +21,7 @@
  */
 
 const ignorePatterns = [
+	'@ckpack/vue-color',
 	'ansi-regex',
 	'bail',
 	'char-regex',
@@ -72,17 +73,6 @@ module.exports = {
 	transformIgnorePatterns: [
 		'/node_modules/(?!(' + ignorePatterns.join('|') + '))',
 	],
-	// Temporarily exclude not yet migrated vue2 components
-	testPathIgnorePatterns: [
-		"/node_modules/",
-		"<rootDir>/tests/unit/components/NcActions",
-		"<rootDir>/tests/unit/components/NcAppNavigation",
-		"<rootDir>/tests/unit/components/NcAppSidebar",
-		"<rootDir>/tests/unit/components/NcModal",
-		"<rootDir>/tests/unit/components/NcRichContenteditable",
-		"<rootDir>/tests/unit/components/NcRichText",
-		"<rootDir>/tests/unit/mixins/",
-	],
 
 	moduleNameMapper: {
 		'\\.(css|scss)$': 'jest-transform-stub',
diff --git a/package-lock.json b/package-lock.json
index 537fc758ed..f34cfc17f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "9.0.0-alpha.0",
       "license": "AGPL-3.0",
       "dependencies": {
+        "@ckpack/vue-color": "^1.5.0",
         "@floating-ui/dom": "^1.1.0",
         "@nextcloud/auth": "^2.0.0",
         "@nextcloud/axios": "^2.0.0",
@@ -46,7 +47,9 @@
         "unist-builder": "^4.0.0",
         "unist-util-visit": "^5.0.0",
         "vue": "^3.3.4",
-        "vue-material-design-icons": "^5.1.2"
+        "vue-datepicker-next": "^1.0.3",
+        "vue-material-design-icons": "^5.1.2",
+        "vue-select": "^4.0.0-beta.6"
       },
       "devDependencies": {
         "@babel/plugin-syntax-import-assertions": "^7.22.5",
@@ -1818,6 +1821,21 @@
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
+    "node_modules/@ckpack/vue-color": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.5.0.tgz",
+      "integrity": "sha512-dj1zXVyay2m4LdlLJCQSdIS2FYwUl77BZqyKmUXiehyqjCP0bGYnPcL38lrShzYUc2FdkYQX8ANZZjRahd4PQw==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.6.0",
+        "material-colors": "^1.2.6"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -1940,6 +1958,14 @@
         "postcss-selector-parser": "^6.0.13"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@cypress/request": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.0.tgz",
@@ -9781,6 +9807,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/date-format-parse": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
+      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ=="
+    },
     "node_modules/dayjs": {
       "version": "1.11.9",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
@@ -17996,6 +18027,11 @@
         "node": ">= 12"
       }
     },
+    "node_modules/material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -27467,6 +27503,18 @@
       "integrity": "sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==",
       "dev": true
     },
+    "node_modules/vue-datepicker-next": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-datepicker-next/-/vue-datepicker-next-1.0.3.tgz",
+      "integrity": "sha512-Brqjh896BJGVxP7d6tGDsPMu0SDAB8hAdtG7zWF8VIHJB21dk1VB9KgdajD9Y9uXbg+wHN0vmL7sbMPIyehQVQ==",
+      "dependencies": {
+        "date-format-parse": "^0.2.7",
+        "vue": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-docgen-api": {
       "version": "4.74.0",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.74.0.tgz",
@@ -27789,6 +27837,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
       "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
     },
+    "node_modules/vue-select": {
+      "version": "4.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.6.tgz",
+      "integrity": "sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==",
+      "peerDependencies": {
+        "vue": "3.x"
+      }
+    },
     "node_modules/vue-styleguidist": {
       "version": "4.72.4",
       "resolved": "https://registry.npmjs.org/vue-styleguidist/-/vue-styleguidist-4.72.4.tgz",
diff --git a/package.json b/package.json
index 36f4844a49..af14916ebf 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "dist"
   ],
   "dependencies": {
+    "@ckpack/vue-color": "^1.5.0",
     "@floating-ui/dom": "^1.1.0",
     "@nextcloud/auth": "^2.0.0",
     "@nextcloud/axios": "^2.0.0",
@@ -96,7 +97,9 @@
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "vue": "^3.3.4",
-    "vue-material-design-icons": "^5.1.2"
+    "vue-datepicker-next": "^1.0.3",
+    "vue-material-design-icons": "^5.1.2",
+    "vue-select": "^4.0.0-beta.6"
   },
   "peerDependencies": {
       "vue": "^3.3.4"
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index 5d03f24f58..bc30e5cdcb 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -32,41 +32,41 @@ For the `NcSelect` component, all events will be passed through. Please see the
 ```vue
 	<template>
 		<NcActions>
-			<NcActionInput :value.sync="text" :label-outside="true" label="Label outside the input">
+			<NcActionInput v-model:value="text" :label-outside="true" label="Label outside the input">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
 			</NcActionInput>
-			<NcActionInput :value.sync="text" :show-trailing-button="false" label="Input without trailing button">
+			<NcActionInput v-model:value="text" :show-trailing-button="false" label="Input without trailing button">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
 			</NcActionInput>
-			<NcActionInput :value.sync="text" label="Input with placeholder">
+			<NcActionInput v-model:value="text" label="Input with placeholder">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
 				This is the placeholder
 			</NcActionInput>
-			<NcActionInput type="password" :value.sync="text" label="Password with visible label">
+			<NcActionInput type="password" v-model:value="text" label="Password with visible label">
 				<template #icon>
 					<Key :size="20" />
 				</template>
 				Password placeholder
 			</NcActionInput>
-			<NcActionInput type="password" :value.sync="text" :show-trailing-button="false">
+			<NcActionInput type="password" v-model:value="text" :show-trailing-button="false">
 				<template #icon>
 					<Key :size="20" />
 				</template>
 				Password placeholder
 			</NcActionInput>
-			<NcActionInput type="color" :value.sync="color" label="Favorite color">
+			<NcActionInput type="color" v-model:value="color" label="Favorite color">
 				<template #icon>
 					<Eyedropper :size="20" />
 				</template>
 				Color placeholder
 			</NcActionInput>
-			<NcActionInput label="Visible label" :value.sync="text">
+			<NcActionInput label="Visible label" v-model:value="text">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
@@ -196,8 +196,7 @@ For the `NcSelect` component, all events will be passed through. Please see the
 							:append-to-body="false"
 							:input-class="{ focusable: isFocusable }"
 							class="action-input__multi"
-							v-bind="$attrs"
-							v-on="$listeners" />
+							v-bind="$attrs" />
 
 						<NcPasswordField v-else-if="type==='password'"
 							:id="inputId"
@@ -210,7 +209,6 @@ For the `NcSelect` component, all events will be passed through. Please see the
 							trailing-button-icon="arrowRight"
 							:show-trailing-button="showTrailingButton && !disabled"
 							v-bind="$attrs"
-							v-on="$listeners"
 							@trailing-button-click="$refs.form.requestSubmit()"
 							@input="onInput"
 							@change="onChange" />
@@ -227,7 +225,6 @@ For the `NcSelect` component, all events will be passed through. Please see the
 									:value="value"
 									class="colorpicker__trigger"
 									v-bind="$attrs"
-									v-on="$listeners"
 									@input="onInput"
 									@submit="$refs.form.requestSubmit()">
 									<button :style="{'background-color': value}"
@@ -249,7 +246,6 @@ For the `NcSelect` component, all events will be passed through. Please see the
 							trailing-button-icon="arrowRight"
 							:show-trailing-button="showTrailingButton && !disabled"
 							v-bind="$attrs"
-							v-on="$listeners"
 							@trailing-button-click="$refs.form.requestSubmit()"
 							@input="onInput"
 							@change="onChange" />
diff --git a/src/components/NcActionRouter/NcActionRouter.vue b/src/components/NcActionRouter/NcActionRouter.vue
index fa6808f994..fd7f8c5a51 100644
--- a/src/components/NcActionRouter/NcActionRouter.vue
+++ b/src/components/NcActionRouter/NcActionRouter.vue
@@ -25,11 +25,10 @@
 	<li class="action">
 		<router-link :to="to"
 			:aria-label="ariaLabel"
-			:exact="exact"
 			:title="title"
 			class="action-router focusable"
 			rel="nofollow noreferrer noopener"
-			@click.native="onClick">
+			@click="onClick">
 			<!-- @slot Manually provide icon -->
 			<slot name="icon">
 				<span :class="[isIconUrl ? 'action-router__icon--url' : icon]"
@@ -81,13 +80,6 @@ export default {
 			default: '',
 			required: true,
 		},
-		/**
-		 * router-link exact prop [https://router.vuejs.org/api/#exact](https://router.vuejs.org/api/#exact)
-		 */
-		exact: {
-			type: Boolean,
-			default: false,
-		},
 	},
 }
 </script>
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 961e0b2337..00e9603f61 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -570,11 +570,13 @@ export default {
 import NcButton from '../NcButton/index.js'
 import NcPopover from '../NcPopover/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
+import isSlotPopulated from '../../utils/isSlotPopulated.js'
 import { t } from '../../l10n.js'
 
-import Vue from 'vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 
+import { h, Fragment, resolveComponent, warn } from 'vue'
+
 const focusableSelector = '.focusable'
 
 /**
@@ -702,7 +704,7 @@ export default {
 		 */
 		boundariesElement: {
 			type: Element,
-			default: () => document.querySelector('body'),
+			default: () => document?.querySelector('body'),
 		},
 
 		/**
@@ -777,8 +779,10 @@ export default {
 		 * @return {boolean}
 		 */
 		isValidSingleAction(action) {
-			const componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag
-			return ['NcActionButton', 'NcActionLink', 'NcActionRouter'].includes(componentName)
+			return ['NcActionButton', 'NcActionLink', 'NcActionRouter'].includes(action?.type?.name)
+		},
+		isAction(vnode) {
+			return vnode?.type?.name?.startsWith?.('NcAction')
 		},
 
 		// MENU STATE MANAGEMENT
@@ -808,7 +812,7 @@ export default {
 
 			this.opened = false
 
-			this.$refs.popover.clearFocusTrap({ returnFocus })
+			this.$refs.popover?.clearFocusTrap({ returnFocus })
 
 			/**
 			 * Event emitted when the popover menu open state is changed
@@ -841,7 +845,7 @@ export default {
 		// this will prevent issues with input being unfocused
 		// on mouse move
 		onMouseFocusAction(event) {
-			if (document.activeElement === event.target) {
+			if (document?.activeElement === event.target) {
 				return
 			}
 
@@ -960,18 +964,25 @@ export default {
 	/**
 	 * The render function to display the component
 	 *
-	 * @param {Function} h The function to create VNodes
 	 * @return {object|undefined} The created VNode
 	 */
-	render(h) {
-		/**
-		 * Filter the Actions, so that we only get allowed components.
-		 * This also ensure that we don't get 'text' elements, which would
-		 * become problematic later on.
-		 */
-		const actions = (this.$slots.default || []).filter(
-			action => action?.componentOptions?.tag || action?.componentOptions?.Ctor?.extendOptions?.name,
-		)
+	render() {
+		const actions = []
+		// We have to iterate over all slot elements
+		this.$slots.default?.().forEach(vnode => {
+			if (this.isAction(vnode)) {
+				actions.push(vnode)
+				return
+			}
+			// If we encounter a Fragment, we have to check its children too
+			if (vnode?.type === Fragment) {
+				vnode?.children?.forEach?.(child => {
+					if (this.isAction(child)) {
+						actions.push(child)
+					}
+				})
+			}
+		})
 
 		const isNavLink = (action) => {
 			const componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag
@@ -988,7 +999,7 @@ export default {
 		 */
 		let inlineActions = actions.filter(this.isValidSingleAction)
 		if (this.forceMenu && inlineActions.length > 0 && this.inline > 0) {
-			Vue.util.warn('Specifying forceMenu will ignore any inline actions rendering.')
+			warn('Specifying forceMenu will ignore any inline actions rendering.')
 			inlineActions = []
 		}
 
@@ -1004,57 +1015,45 @@ export default {
 		 * @return {Function} the vue render function
 		 */
 		const renderInlineAction = (action) => {
-			const icon = action?.data?.scopedSlots?.icon()?.[0]
-				|| h('span', { class: ['icon', action?.componentOptions?.propsData?.icon] })
-			const clickListener = action?.componentOptions?.listeners?.click
-
-			const text = action?.componentOptions?.children?.[0]?.text?.trim?.()
-			const ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text
+			const icon = action?.children?.icon?.()?.[0] || h('span', { class: ['icon', action?.props?.icon] })
+			const clickListener = action?.props?.onClick
+			const text = action?.children?.default?.()?.[0]?.children?.trim()
+			const ariaLabel = action?.props?.['aria-label'] || text
 			const buttonText = this.forceName ? text : ''
 
-			let title = action?.componentOptions?.propsData?.title
+			let title = action?.props?.title
 			// Show a default title for single actions if none is present
 			if (!(this.forceName || title)) {
 				title = text
 			}
 
-			return h('NcButton',
+			return h(resolveComponent('NcButton'),
 				{
-					class: [
-						'action-item action-item--single',
-						action?.data?.staticClass,
-						action?.data?.class,
-					],
-					attrs: {
-						'aria-label': ariaLabel,
-						title,
-					},
+					class: 'action-item action-item--single',
+					'aria-label': ariaLabel,
+					title,
 					ref: action?.data?.ref,
-					props: {
-						// If it has a menuName, we use a secondary button
-						type: this.type || (buttonText ? 'secondary' : 'tertiary'),
-						disabled: this.disabled || action?.componentOptions?.propsData?.disabled,
-						ariaHidden: this.ariaHidden,
-						...action?.componentOptions?.propsData,
-					},
-					on: {
-						focus: this.onFocus,
-						blur: this.onBlur,
-						// If we have a click listener,
-						// we bind it to execute on click and forward the click event
-						...(!!clickListener && {
-							click: (event) => {
-								if (clickListener) {
-									clickListener(event)
-								}
-							},
-						}),
-					},
+					// If it has a menuName, we use a secondary button
+					type: this.type || (buttonText ? 'secondary' : 'tertiary'),
+					disabled: this.disabled || action?.props?.disabled,
+					ariaHidden: this.ariaHidden,
+					...action?.props,
+					onFocus: this.onFocus,
+					onBlur: this.onBlur,
+					// If we have a click listener,
+					// we bind it to execute on click and forward the click event
+					...(!!clickListener && {
+						onClick: (event) => {
+							if (clickListener) {
+								clickListener(event)
+							}
+						},
+					}),
+				},
+				{
+					default: () => buttonText,
+					icon: () => icon,
 				},
-				[
-					h('template', { slot: 'icon' }, [icon]),
-					buttonText,
-				],
 			)
 		}
 
@@ -1065,95 +1064,63 @@ export default {
 		 * @return {Function} the vue render function
 		 */
 		const renderActionsPopover = (actions) => {
-			const triggerIcon = this.$slots.icon?.[0] || (
-				this.defaultIcon
+			const triggerIcon = isSlotPopulated(this.$slots.icon?.())
+				? this.$slots.icon?.()
+				: (this.defaultIcon
 					? h('span', { class: ['icon', this.defaultIcon] })
-					: h('DotsHorizontal', {
-						props: {
-							size: 20,
-						},
-					})
-			)
-			return h('NcPopover',
+					: h(resolveComponent('DotsHorizontal'), { size: 20 })
+				)
+			return h(resolveComponent('NcPopover'),
 				{
 					ref: 'popover',
-					props: {
-						delay: 0,
-						handleResize: true,
-						shown: this.opened,
-						placement: this.placement,
-						boundary: this.boundariesElement,
-						container: this.container,
-						popoverBaseClass: 'action-item__popper',
-						setReturnFocus: this.$refs.menuButton?.$el,
-					},
-					// For some reason the popover component
-					// does not react to props given under the 'props' key,
-					// so we use both 'attrs' and 'props'
-					attrs: {
-						delay: 0,
-						handleResize: true,
-						shown: this.opened,
-						placement: this.placement,
-						boundary: this.boundariesElement,
-						container: this.container,
-						...this.manualOpen && { triggers: [] },
-						popoverBaseClass: 'action-item__popper',
-					},
-					on: {
-						show: this.openMenu,
-						'after-show': this.onOpen,
-						hide: this.closeMenu,
-					},
+					delay: 0,
+					handleResize: true,
+					shown: this.opened,
+					placement: this.placement,
+					boundary: this.boundariesElement,
+					container: this.container,
+					...this.manualOpen && { triggers: [] },
+					popoverBaseClass: 'action-item__popper',
+					setReturnFocus: this.$refs.menuButton?.$el,
+					onShow: this.openMenu,
+					onAfterShow: this.onOpen,
+					onHide: this.closeMenu,
 				},
-				[
-					h('NcButton', {
+				{
+					trigger: () => h(resolveComponent('NcButton'), {
 						class: 'action-item__menutoggle',
-						props: {
-							type: this.triggerBtnType,
-							disabled: this.disabled,
-							ariaHidden: this.ariaHidden,
-						},
-						slot: 'trigger',
+						type: this.triggerBtnType,
+						disabled: this.disabled,
+						ariaHidden: this.ariaHidden,
 						ref: 'menuButton',
-						attrs: {
-							'aria-haspopup': isNav ? null : 'menu',
-							'aria-label': this.menuName ? null : this.ariaLabel,
-							'aria-controls': this.opened ? this.randomId : null,
-							'aria-expanded': this.opened.toString(),
-						},
-						on: {
-							focus: this.onFocus,
-							blur: this.onBlur,
-						},
-					}, [
-						h('template', { slot: 'icon' }, [triggerIcon]),
-						this.menuName,
-					]),
-					h('div', {
+						'aria-haspopup': isNav ? null : 'menu',
+						'aria-label': this.menuName ? null : this.ariaLabel,
+						'aria-controls': this.opened ? this.randomId : null,
+						'aria-expanded': this.opened.toString(),
+						onFocus: this.onFocus,
+						onBlur: this.onBlur,
+					}, {
+						icon: () => triggerIcon,
+						default: () => this.menuName,
+					}),
+					default: () => h('div', {
 						class: {
 							open: this.opened,
 						},
-						attrs: {
-							tabindex: '-1',
-						},
-						on: {
-							keydown: this.onKeydown,
-							mousemove: this.onMouseFocusAction,
-						},
+						tabindex: '-1',
+						onKeydown: this.onKeydown,
+						onMousemove: this.onMouseFocusAction,
 						ref: 'menu',
 					}, [
 						h('ul', {
-							attrs: {
-								id: this.randomId,
-								tabindex: '-1',
-								role: isNav ? null : 'menu',
-							},
+							id: this.randomId,
+							tabindex: '-1',
+							role: isNav ? null : 'menu',
 						}, [
 							actions,
 						]),
 					]),
-				],
+				},
 			)
 		}
 
diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
index dfdb028598..202b8be01d 100644
--- a/src/components/NcAppContent/NcAppContent.vue
+++ b/src/components/NcAppContent/NcAppContent.vue
@@ -81,7 +81,7 @@ The list size must be between the min and the max width value.
 			<div v-if="isMobile"
 				:class="showDetails ? 'app-content-wrapper--show-details' : 'app-content-wrapper--show-list'"
 				class="app-content-wrapper app-content-wrapper--mobile">
-				<NcAppDetailsToggle v-if="hasList && showDetails" @click.native.stop.prevent="hideDetails" />
+				<NcAppDetailsToggle v-if="hasList && showDetails" @click.stop.prevent="hideDetails" />
 
 				<slot name="list" />
 				<slot />
diff --git a/src/components/NcAppContent/NcAppDetailsToggle.vue b/src/components/NcAppContent/NcAppDetailsToggle.vue
index 0390069b00..c60e14cbaf 100644
--- a/src/components/NcAppContent/NcAppDetailsToggle.vue
+++ b/src/components/NcAppContent/NcAppDetailsToggle.vue
@@ -59,7 +59,7 @@ export default {
 		this.toggleAppNavigationButton(true)
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.toggleAppNavigationButton(false)
 	},
 
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index 035a948f1e..dce3e0b15a 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -91,6 +91,9 @@ export default {
 	data() {
 		return {
 			open: true,
+			// Watching an injected property directly does not work
+			// so we watch a data property instead.
+			localIsMobile: this.isMobile,
 		}
 	},
 	computed: {
@@ -100,12 +103,14 @@ export default {
 	},
 
 	watch: {
-		isMobile() {
-			this.open = !this.isMobile
+		localIsMobile(isMobile) {
+			this.open = !isMobile
 		},
 	},
 
 	mounted() {
+		// Sync the state
+		this.open = !this.localIsMobile
 		subscribe('toggle-navigation', this.toggleNavigationByEventBus)
 		// Emit an event with the initial state of the navigation
 		emit('navigation-toggled', {
diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
index 7e07cc9e0b..c338f667a0 100644
--- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
+++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -121,7 +121,7 @@ export default {
 	computed: {
 		// Check if the actions slot is populated
 		hasActions() {
-			return !!this.$slots.actions
+			return !!this.$slots?.actions
 		},
 	},
 }
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 495cc07411..89d6d096e5 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -255,9 +255,7 @@ Just set the `pinned` prop.
 		class="app-navigation-entry-wrapper">
 		<component :is="isRouterLink ? 'router-link' : 'NcVNodes'"
 			v-slot="{ href: routerLinkHref, navigate, isActive }"
-			:custom="isRouterLink ? true : false"
-			:to="to"
-			:exact="isRouterLink ? exact : null">
+			v-bind="{ ...isRouterLink && { custom: true, to } }">
 			<div :class="{
 					'app-navigation-entry--editing': editingActive,
 					'app-navigation-entry--deleted': undo,
@@ -450,14 +448,6 @@ export default {
 			default: null,
 		},
 
-		/**
-		 * Pass in `true` if you want the matching behaviour to
-		 * be non-inclusive: https://router.vuejs.org/api/#exact
-		 */
-		exact: {
-			type: Boolean,
-			default: false,
-		},
 		/**
 		 * Gives the possibility to collapse the children elements into the
 		 * parent element (true) or expands the children elements (false).
diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
index ffbe95c397..aff633f541 100644
--- a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
+++ b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -35,11 +35,11 @@
 				<span class="settings-button__label">{{ name }}</span>
 			</button>
 		</div>
-		<transition name="slide-up">
+		<Transition name="slide-up">
 			<div v-show="open" id="app-settings__content">
 				<slot />
 			</div>
-		</transition>
+		</Transition>
 	</div>
 </template>
 
@@ -161,7 +161,7 @@ export default {
 	overflow-y: hidden !important;
 }
 
-.slide-up-enter,
+.slide-up-enter-from,
 .slide-up-leave-to {
 	max-height: 0 !important;
 	padding: 0 10px !important;
diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
index def3fe08f6..052fa8aa84 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -28,7 +28,7 @@ providing the section's name prop. You can put your settings within each
 <template>
 	<div>
 		<NcButton @click="settingsOpen = true">Show Settings</NcButton>
-		<NcAppSettingsDialog :open.sync="settingsOpen" :show-navigation="true" name="Application settings">
+		<NcAppSettingsDialog v-model:open="settingsOpen" :show-navigation="true" name="Application settings">
 			<NcAppSettingsSection id="asci-name-1" name="Example name 1">
 				Some example content
 			</NcAppSettingsSection>
@@ -81,6 +81,7 @@ import isMobile from '../../mixins/isMobile/index.js'
 import { t } from '../../l10n.js'
 
 import debounce from 'debounce'
+import { h } from 'vue'
 
 export default {
 
@@ -162,7 +163,7 @@ export default {
 
 	mounted() {
 		// Select first settings section
-		this.selectedSection = this.$slots.default[0].componentOptions.propsData.id
+		this.selectedSection = this.$slots.default?.()[0]?.props?.title
 	},
 
 	updated() {
@@ -260,7 +261,7 @@ export default {
 		},
 	},
 
-	render(h) {
+	render() {
 		/**
 		 * Build the navigation
 		 *
@@ -279,7 +280,7 @@ export default {
 						class: 'navigation-list',
 						role: 'tablist',
 					},
-				}, this.getSettingsNavigation(this.$slots.default).map(item => {
+				}, this.getSettingsNavigation(this.$slots.default()).map(item => {
 					return createListElement(item)
 				}))])]
 			} else {
@@ -354,8 +355,8 @@ export default {
 									class: 'app-settings__content',
 								},
 								ref: 'settingsScroller',
-							}, this.$slots.default),
-						],
+							}, this.$slots.default()),
+						]
 					),
 				]),
 			])
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index 075d7f4715..1c1384bc0c 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -110,9 +110,9 @@ export default {
 ```vue
 <template>
 	<div>
-		<NcCheckboxRadioSwitch :checked.sync="showTabs[0]">Show search tab</NcCheckboxRadioSwitch>
-		<NcCheckboxRadioSwitch :checked.sync="showTabs[1]">Show settings tab</NcCheckboxRadioSwitch>
-		<NcCheckboxRadioSwitch :checked.sync="showTabs[2]">Show sharing tab</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model:checked="showTabs[0]">Show search tab</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model:checked="showTabs[1]">Show settings tab</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model:checked="showTabs[2]">Show sharing tab</NcCheckboxRadioSwitch>
 		<NcAppSidebar
 			name="cat-picture.jpg"
 			subname="last edited 3 weeks ago">
@@ -207,8 +207,8 @@ export default {
 		<NcSelect v-model="active" :options="['search-tab', 'settings-tab', 'share-tab']" />
 		<NcAppSidebar
 			name="cat-picture.jpg"
-			subname="last edited 3 weeks ago"
-			:active.sync="active">
+			subnamee="last edited 3 weeks ago"
+			v-model:active="active">
 			<NcAppSidebarTab name="Search" id="search-tab">
 				<template #icon>
 					<Magnify :size="20" />
@@ -255,7 +255,7 @@ export default {
 ```vue
 <template>
 	<NcAppSidebar
-		:name.sync="name"
+		v-model:name="name"
 		:name-editable="true"
 		name-placeholder="Filename"
 		subname="last edited 3 weeks ago">
@@ -279,7 +279,7 @@ export default {
 <template>
 	<NcAppSidebar
 		:name="name"
-		:name-editable.sync="nameEditable"
+		v-model:name-editable="nameEditable"
 		:name-placeholder="namePlaceholder"
 		:subname="subname"
 		@update:name="nameUpdate">
@@ -339,7 +339,7 @@ export default {
 </docs>
 
 <template>
-	<transition appear
+	<Transition appear
 		name="slide-right"
 		@before-enter="onBeforeEnter"
 		@after-enter="onAfterEnter"
@@ -347,14 +347,14 @@ export default {
 		@after-leave="onAfterLeave">
 		<aside id="app-sidebar-vue" class="app-sidebar">
 			<header :class="{
-					'app-sidebar-header--with-figure': hasFigure,
+					'app-sidebar-header--with-figure': isSlotPopulated($slots?.header?.()) || background,
 					'app-sidebar-header--compact': compact,
 				}"
 				class="app-sidebar-header">
 				<!-- container for figure and description, allows easy switching to compact mode -->
 				<div class="app-sidebar-header__info">
 					<!-- sidebar header illustration/figure -->
-					<div v-if="hasFigure && !empty"
+					<div v-if="(isSlotPopulated($slots?.header?.()) || background) && !empty"
 						:class="{
 							'app-sidebar-header__figure--with-action': hasFigureClickListener
 						}"
@@ -371,14 +371,14 @@ export default {
 					<!-- sidebar details -->
 					<div v-if="!empty"
 						:class="{
-							'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
+							'app-sidebar-header__desc--with-tertiary-action': canStar || isSlotPopulated($slots?.['tertiary-actions']?.()),
 							'app-sidebar-header__desc--editable': nameEditable && !subname,
 							'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
-							'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
+							'app-sidebar-header__desc--without-actions': !isSlotPopulated($slots?.['secondary-actions']?.()),
 						}"
 						class="app-sidebar-header__desc">
 						<!-- favourite icon -->
-						<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
+						<div v-if="canStar || isSlotPopulated($slots?.['tertiary-actions']?.())" class="app-sidebar-header__tertiary-actions">
 							<slot name="tertiary-actions">
 								<NcButton v-if="canStar"
 									:aria-label="favoriteTranslated"
@@ -430,7 +430,7 @@ export default {
 									</form>
 								</template>
 								<!-- header main menu -->
-								<NcActions v-if="$slots['secondary-actions']"
+								<NcActions v-if="isSlotPopulated($slots?.['secondary-actions']?.())"
 									class="app-sidebar-header__menu"
 									:force-menu="forceMenu">
 									<slot name="secondary-actions" />
@@ -457,7 +457,7 @@ export default {
 					</template>
 				</NcButton>
 
-				<div v-if="$slots['description'] && !empty" class="app-sidebar-header__description">
+				<div v-if="isSlotPopulated($slots?.description?.()) && !empty" class="app-sidebar-header__description">
 					<slot name="description" />
 				</div>
 			</header>
@@ -475,7 +475,7 @@ export default {
 				</template>
 			</NcEmptyContent>
 		</aside>
-	</transition>
+	</Transition>
 </template>
 
 <script>
@@ -488,6 +488,7 @@ import Focus from '../../directives/Focus/index.js'
 import Linkify from '../../directives/Linkify/index.js'
 import Tooltip from '../../directives/Tooltip/index.js'
 import { t } from '../../l10n.js'
+import isSlotPopulated from '../../utils/isSlotPopulated.js'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -634,7 +635,7 @@ export default {
 		'opened',
 		'figure-click',
 		'update:starred',
-		'update:nameEditable',
+		'update:name-editable',
 		'update:name',
 		'update:active',
 		'submit-name',
@@ -654,11 +655,8 @@ export default {
 		canStar() {
 			return this.isStarred !== null
 		},
-		hasFigure() {
-			return this.$slots.header || this.background
-		},
 		hasFigureClickListener() {
-			return this.$listeners['figure-click']
+			return this.$attrs['figure-click']
 		},
 	},
 
@@ -668,12 +666,14 @@ export default {
 		},
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.
 		this.$emit('closed')
 	},
 
 	methods: {
+		isSlotPopulated,
+
 		onBeforeEnter(element) {
 			/**
 			 * The sidebar is opening and the transition is in progress
@@ -749,18 +749,17 @@ export default {
 			this.$emit('update:starred', this.isStarred)
 		},
 
-		editName() {
+		async editName() {
 			/**
 			 * Emitted when the nameEditable value changes
 			 *
 			 * @type {boolean}
 			 */
-			this.$emit('update:nameEditable', true)
+			await this.$emit('update:name-editable', true)
 			// Focus the name input
 			if (this.nameEditable) {
-				this.$nextTick(
-					() => this.$refs.nameInput.focus(),
-				)
+				await this.$nextTick()
+				this.$refs.nameInput.focus()
 			}
 		},
 
@@ -786,7 +785,7 @@ export default {
 		 */
 		onSubmitName(event) {
 			// Disable editing
-			this.$emit('update:nameEditable', false)
+			this.$emit('update:name-editable', false)
 			/**
 			 * Emitted when the name edit input has been submitted
 			 *
@@ -796,7 +795,7 @@ export default {
 		},
 		onDismissEditing() {
 			// Disable editing
-			this.$emit('update:nameEditable', false)
+			this.$emit('update:name-editable', false)
 			/**
 			 * Emitted when the name edit has been cancelled
 			 *
diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
index 98a4918e81..2a8c9ff72b 100644
--- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue
+++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -36,8 +36,8 @@
 			@keydown.tab.exact.prevent="focusActiveTabContent"
 			@keydown.home.exact.prevent="focusFirstTab"
 			@keydown.end.exact.prevent="focusLastTab"
-			@keydown.33.exact.prevent="focusFirstTab"
-			@keydown.34.exact.prevent="focusLastTab">
+			@keydown.page-up.exact.prevent="focusFirstTab"
+			@keydown.page-down.exact.prevent="focusLastTab">
 			<NcCheckboxRadioSwitch v-for="tab in tabs"
 				:key="tab.id"
 				:aria-controls="`tab-${tab.id}`"
@@ -112,7 +112,7 @@ export default {
 			 */
 			tabs: [],
 			/**
-			 * Local active (open) tab's ID. It allows to use component without active.sync
+			 * Local active (open) tab's ID. It allows to use component without v-model:active
 			 */
 			activeTab: '',
 		}
diff --git a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
index 6ec7f22ce2..961f72a696 100644
--- a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
+++ b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
@@ -41,6 +41,8 @@
 </template>
 
 <script>
+import { h } from 'vue'
+
 export default {
 	name: 'NcAppSidebarTab',
 
@@ -101,7 +103,7 @@ export default {
 		this.registerTab(this)
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		// Unregister the tab from tabs
 		this.unregisterTab(this.id)
 	},
@@ -129,7 +131,7 @@ export default {
 		 * @return {import('vue').VNode[]}
 		 */
 		renderIcon() {
-			return this.$scopedSlots.icon?.()
+			return this.$slots.icon?.() || h('span', { staticClass: this.icon })
 		},
 	},
 }
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index 3a9b235f4c..1aa53b11c9 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -528,7 +528,7 @@ export default {
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		unsubscribe('settings:avatar:updated', this.loadAvatarUrl)
 		unsubscribe('settings:display-name:updated', this.loadAvatarUrl)
 		if (this.showUserStatus && this.user && !this.isNoUser) {
diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue
index 76d9060627..0a0f9ec4d1 100644
--- a/src/components/NcBreadcrumb/NcBreadcrumb.vue
+++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue
@@ -42,9 +42,8 @@ This component is meant to be used inside a Breadcrumbs component.
 		<component :is="tag"
 			v-if="(name || icon) && !$slots.default"
 			:title="title"
-			v-bind="linkAttributes"
-			v-on="$listeners">
-			<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->
+			v-bind="linkAttributes">
+			<!-- @slot Slot for passing a material design icon. Precedes the icon and title prop. -->
 			<slot name="icon">
 				<span v-if="icon" :class="icon" class="icon" />
 				<span v-else>{{ name }}</span>
@@ -109,16 +108,6 @@ export default {
 			default: undefined,
 		},
 
-		/**
-		 * Match the complete route attributes (query and hash included)
-		 *
-		 * @see https://v3.router.vuejs.org/api/#exact
-		 */
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-
 		/**
 		 * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.
 		 */
@@ -190,8 +179,8 @@ export default {
 		 * The attributes to pass to `router-link` or `a`
 		 */
 		linkAttributes() {
-			// If it's a router-link, we pass `to` and `exact`, otherwise only `href`
-			return this.to ? { to: this.to, exact: this.exact, ...this.$attrs } : { href: this.href, ...this.$attrs }
+			// If it's a router-link, we pass `to`, otherwise `href`
+			return this.to ? { to: this.to, ...this.$attrs } : { href: this.href, ...this.$attrs }
 		},
 	},
 	methods: {
diff --git a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue
index b13b279470..3ed1b8a764 100644
--- a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue
+++ b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue
@@ -142,15 +142,14 @@ import NcActionButton from '../NcActionButton/index.js'
 import NcActionRouter from '../NcActionRouter/index.js'
 import NcActionLink from '../NcActionLink/index.js'
 import NcBreadcrumb from '../NcBreadcrumb/index.js'
-import ValidateSlot from '../../utils/ValidateSlot.js'
+import isSlotPopulated from '../../utils/isSlotPopulated.js'
 
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import IconFolder from 'vue-material-design-icons/Folder.vue'
 
 import debounce from 'debounce'
-import Vue from 'vue'
-import { Fragment } from 'vue-frag'
+import { cloneVNode, h, resolveComponent, Fragment } from 'vue'
 
 const crumbClass = 'vue-crumb'
 
@@ -198,14 +197,6 @@ export default {
 			breadcrumbsRefs: {},
 		}
 	},
-	beforeMount() {
-		// Filter all invalid items, only Breadcrumb components are allowed
-		ValidateSlot(this.$slots.default, ['NcBreadcrumb'], this)
-	},
-	beforeUpdate() {
-		// Also check before every update
-		ValidateSlot(this.$slots.default, ['NcBreadcrumb'], this)
-	},
 	created() {
 		/**
 		 * Add a listener so the component reacts on resize
@@ -230,7 +221,7 @@ export default {
 			this.hideCrumbs()
 		})
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('resize', this.handleWindowResize)
 		unsubscribe('navigation-toggled', this.delayedResize)
 	},
@@ -285,7 +276,7 @@ export default {
 				// We hide elements alternating to the left and right
 				const currentIndex = startIndex + ((i % 2) ? i + 1 : i) / 2 * Math.pow(-1, i + (nrCrumbs % 2))
 				// Calculate the remaining overflow width after hiding this breadcrumb
-				overflow -= this.getWidth(breadcrumbs[currentIndex]?.elm)
+				overflow -= this.getWidth(breadcrumbs[currentIndex]?.$el)
 				hiddenIndices.push(currentIndex)
 				i++
 			}
@@ -322,7 +313,7 @@ export default {
 		 * @return {number} The total width
 		 */
 		getTotalWidth(breadcrumbs) {
-			return breadcrumbs.reduce((width, crumb, index) => width + this.getWidth(crumb?.elm), 0)
+			return breadcrumbs.reduce((width, crumb, index) => width + this.getWidth(crumb.$el), 0)
 		},
 		/**
 		 * Calculates the width of the provided element
@@ -460,31 +451,30 @@ export default {
 		hideCrumbs() {
 			const crumbs = Object.values(this.breadcrumbsRefs)
 			crumbs.forEach((crumb, i) => {
-				if (crumb?.elm?.classList) {
+				if (crumb?.$el?.classList) {
 					if (this.hiddenIndices.includes(i)) {
-						crumb.elm.classList.add(`${crumbClass}--hidden`)
+						crumb.$el.classList.add(`${crumbClass}--hidden`)
 					} else {
-						crumb.elm.classList.remove(`${crumbClass}--hidden`)
+						crumb.$el.classList.remove(`${crumbClass}--hidden`)
 					}
 				}
 			})
 		},
 
 		isBreadcrumb(vnode) {
-			return (vnode?.componentOptions?.tag || vnode?.tag || '').includes('NcBreadcrumb')
+			return vnode?.type?.name === 'NcBreadcrumb'
 		},
 	},
 	/**
 	 * The render function to display the component
 	 *
-	 * @param {Function} h The function to create VNodes
 	 * @return {object|undefined} The created VNode
 	 */
-	render(h) {
+	render() {
 		// Get the breadcrumbs
-		const breadcrumbs = []
+		let breadcrumbs = []
 		// We have to iterate over all slot elements
-		this.$slots.default.forEach(vnode => {
+		this.$slots.default?.().forEach(vnode => {
 			if (this.isBreadcrumb(vnode)) {
 				breadcrumbs.push(vnode)
 				return
@@ -505,10 +495,10 @@ export default {
 		}
 
 		// Add the root icon to the first breadcrumb
-		// eslint-disable-next-line import/no-named-as-default-member
-		Vue.set(breadcrumbs[0].componentOptions.propsData, 'icon', this.rootIcon)
-		// eslint-disable-next-line import/no-named-as-default-member
-		Vue.set(breadcrumbs[0].componentOptions.propsData, 'ref', 'breadcrumbs')
+		breadcrumbs[0] = cloneVNode(breadcrumbs[0], {
+			icon: this.rootIcon,
+			ref: 'breadcrumbs',
+		})
 
 		/**
 		 * Use a proxy object to store breadcrumbs refs
@@ -517,11 +507,11 @@ export default {
 		 */
 		const breadcrumbsRefs = {}
 		// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.
-		breadcrumbs.forEach((crumb, index) => {
-			// eslint-disable-next-line import/no-named-as-default-member
-			Vue.set(crumb, 'ref', `crumb-${index}`)
-			breadcrumbsRefs[index] = crumb
-		})
+		breadcrumbs = breadcrumbs.map((crumb, index) => cloneVNode(crumb, {
+			ref: (crumb) => {
+				breadcrumbsRefs[index] = crumb
+			},
+		}))
 
 		// The array of all created VNodes
 		let crumbs = []
@@ -539,87 +529,72 @@ export default {
 
 			// The Actions menu
 			// Use a breadcrumb component for the hidden breadcrumbs
-			crumbs.push(h('NcBreadcrumb', {
+			crumbs.push(h(resolveComponent('NcBreadcrumb'), {
 				class: 'dropdown',
-
-				props: this.menuBreadcrumbProps,
-
-				attrs: {
-					// Hide the dropdown menu from screen-readers,
-					// since the crumbs in the menu are still in the list.
-					'aria-hidden': true,
-				},
-
+				...this.menuBreadcrumbProps,
+				// Hide the dropdown menu from screen-readers,
+				// since the crumbs in the menu are still in the list.
+				'aria-hidden': true,
 				// Add a ref to the Actions menu
 				ref: 'actionsBreadcrumb',
 				key: 'actions-breadcrumb-1',
 				// Add handlers so the Actions menu opens on hover
-				nativeOn: {
-					dragstart: this.dragStart,
-					dragenter: () => { this.menuBreadcrumbProps.open = true },
-					dragleave: this.closeActions,
-				},
-				on: {
-					// Make sure we keep the same open state
-					// as the Actions component
-					'update:open': (open) => {
-						this.menuBreadcrumbProps.open = open
-					},
+				onDragstart: this.dragStart,
+				onDragenter: () => { this.menuBreadcrumbProps.open = true },
+				onDragleave: this.closeActions,
+				// Make sure we keep the same open state
+				// as the Actions component
+				'onUpdate:open': (open) => {
+					this.menuBreadcrumbProps.open = open
 				},
 			// Add all hidden breadcrumbs as ActionRouter or ActionLink
-			}, this.hiddenIndices.map(index => {
-				const crumb = breadcrumbs[index]
-				// Get the parameters from the breadcrumb component props
-				const to = crumb.componentOptions.propsData.to
-				const href = crumb.componentOptions.propsData.href
-				const disabled = crumb.componentOptions.propsData.disableDrop
-				const title = crumb.componentOptions.propsData.title
-				const name = crumb.componentOptions.propsData.name
-
-				// Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink
-				let element = 'NcActionButton'
-				let path = ''
-				if (href) {
-					element = 'NcActionLink'
-					path = href
-				}
-				if (to) {
-					element = 'NcActionRouter'
-					path = to
-				}
-				const folderIcon = h('IconFolder', {
-					props: {
+			}, {
+				default: () => this.hiddenIndices.map(index => {
+					const crumb = breadcrumbs[index]
+					const {
+						// Get the parameters from the breadcrumb component props
+						to,
+						href,
+						disableDrop,
+						name,
+						// Props to forward
+						...propsToForward
+					} = crumb.props
+
+					// Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink
+					let element = 'NcActionButton'
+					let path = ''
+					if (href) {
+						element = 'NcActionLink'
+						path = href
+					}
+					if (to) {
+						element = 'NcActionRouter'
+						path = to
+					}
+					const folderIcon = h(resolveComponent('IconFolder'), {
 						size: 20,
-					},
-					slot: 'icon',
-				})
-				return h(element, {
-					class: crumbClass,
-					props: {
+					})
+					return h(resolveComponent(element), {
+						...propsToForward,
+						class: crumbClass,
 						href: href || null,
-						title,
 						to: to || null,
-					},
-					// Prevent the breadcrumbs from being draggable
-					attrs: {
+						// Prevent the breadcrumbs from being draggable
 						draggable: false,
+						// Add the drag and drop handlers
+						onDragstart: this.dragStart,
+						onDrop: ($event) => this.dropped($event, path, disableDrop),
+						onDragover: this.dragOver,
+						onDragenter: ($event) => this.dragEnter($event, disableDrop),
+						onDragleave: ($event) => this.dragLeave($event, disableDrop),
 					},
-					on: {
-						...crumb.componentOptions.listeners,
-					},
-					// Add the drag and drop handlers
-					nativeOn: {
-						dragstart: this.dragStart,
-						drop: ($event) => this.dropped($event, path, disabled),
-						dragover: this.dragOver,
-						dragenter: ($event) => this.dragEnter($event, disabled),
-						dragleave: ($event) => this.dragLeave($event, disabled),
-					},
-				},
-				[folderIcon, name],
-				)
-			})),
-			)
+					{
+						default: () => name,
+						icon: () => folderIcon,
+					})
+				}),
+			}))
 
 			// The second half of the breadcrumbs
 			const crumbs2 = breadcrumbs.slice(Math.round(breadcrumbs.length / 2))
@@ -628,8 +603,8 @@ export default {
 
 		const wrapper = [h('nav', {}, [h('ul', { class: 'breadcrumb__crumbs' }, [crumbs])])]
 		// Append the actions slot if it is populated
-		if (this.$slots.actions) {
-			wrapper.push(h('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions))
+		if (isSlotPopulated(this.$slots.actions?.())) {
+			wrapper.push(h('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions?.()))
 		}
 
 		this.breadcrumbsRefs = breadcrumbsRefs
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index 815c233bd7..a3573c37d4 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -82,13 +82,13 @@ export default {
 </style>
 ```
 
-* Using v-bind for both color and open state and emitting an event that updates the color
+* Using v-model for both color and open state and emitting an event that updates the color
 
 ```vue
 <template>
 	<div class="container1">
 		<NcButton @click="open = !open"> Click Me </NcButton>
-		<NcColorPicker :value="color" @input="updateColor" :shown.sync="open">
+		<NcColorPicker v-model="color" v-model:shown="open">
 			<div :style="{'background-color': color}" class="color1" />
 		</NcColorPicker>
 	</div>
@@ -100,11 +100,6 @@ export default {
 			color: '#0082c9',
 			open: false
 		}
-	},
-	methods: {
-		updateColor(e) {
-			this.color = e
-		}
 	}
 }
 </script>
@@ -159,32 +154,34 @@ export default {
 </docs>
 
 <template>
-	<NcPopover v-bind="$attrs" v-on="$listeners" @apply-hide="handleClose">
+	<NcPopover v-bind="$attrs" @apply-hide="handleClose">
 		<template #trigger>
 			<slot />
 		</template>
 		<div class="color-picker"
 			:class="{ 'color-picker--advanced-fields': advanced && advancedFields }">
-			<transition name="slide" mode="out-in">
-				<div v-if="!advanced" class="color-picker__simple">
-					<button v-for="(color, index) in palette"
-						:key="index"
-						:style="{'background-color': color }"
-						class="color-picker__simple-color-circle"
-						:class="{ 'color-picker__simple-color-circle--active' : color === currentColor }"
-						type="button"
-						@click="pickColor(color)">
-						<Check v-if="color === currentColor"
-							:size="20" />
-					</button>
+			<Transition name="slide" mode="out-in">
+				<div>
+					<div v-if="!advanced" class="color-picker__simple">
+						<button v-for="(color, index) in palette"
+							:key="index"
+							:style="{'background-color': color }"
+							class="color-picker__simple-color-circle"
+							:class="{ 'color-picker__simple-color-circle--active' : color === currentColor }"
+							type="button"
+							@click="pickColor(color)">
+							<Check v-if="color === currentColor"
+								:size="20" />
+						</button>
+					</div>
+					<Chrome v-if="advanced"
+						v-model="currentColor"
+						class="color-picker__advanced"
+						:disable-alpha="true"
+						:disable-fields="!advancedFields"
+						@input="pickColor" />
 				</div>
-				<Chrome v-if="advanced"
-					v-model="currentColor"
-					class="color-picker__advanced"
-					:disable-alpha="true"
-					:disable-fields="!advancedFields"
-					@input="pickColor" />
-			</transition>
+			</Transition>
 			<div class="color-picker__navigation">
 				<NcButton v-if="advanced"
 					type="tertiary"
@@ -222,14 +219,15 @@ import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 
-import { Chrome } from 'vue-color'
+import { Chrome } from '@ckpack/vue-color'
+import { defineComponent } from 'vue'
 
 const rgbToHex = function(color) {
 	const hex = color.toString(16)
 	return hex.length === 1 ? '0' + hex : hex
 }
 
-export default {
+export default defineComponent({
 	name: 'NcColorPicker',
 
 	components: {
@@ -245,7 +243,7 @@ export default {
 		/**
 		 * A HEX color that represents the initial value of the picker
 		 */
-		value: {
+		modelValue: {
 			type: String,
 			required: true,
 		},
@@ -276,13 +274,13 @@ export default {
 		'submit',
 		'close',
 		'update:open',
-		'update:value',
+		'update:modelValue',
 		'input',
 	],
 
 	data() {
 		return {
-			currentColor: this.value,
+			currentColor: this.modelValue,
 			advanced: false,
 			ariaBack: t('Back'),
 			ariaMore: t('More options'),
@@ -290,7 +288,7 @@ export default {
 	},
 
 	watch: {
-		value(color) {
+		modelValue(color) {
 			this.currentColor = color
 		},
 	},
@@ -342,7 +340,7 @@ export default {
 			/**
 			 * Emits a hexadecimal string e.g. '#ffffff'
 			 */
-			this.$emit('update:value', color)
+			this.$emit('update:modelValue', color)
 
 			/**
 			 * Emits a hexadecimal string e.g. '#ffffff'
@@ -351,7 +349,7 @@ export default {
 
 		},
 	},
-}
+})
 
 </script>
 
@@ -456,7 +454,7 @@ export default {
 }
 
 .slide {
-	&-enter {
+	&-enter-from {
 		transform: translateX(-50%);
 		opacity: 0;
 	}
@@ -464,7 +462,7 @@ export default {
 		transform: translateX(0);
 		opacity: 1;
 	}
-	&-leave {
+	&-leave-from {
 		transform: translateX(0);
 		opacity: 1;
 	}
diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
index 225a987f13..b9de0b975e 100644
--- a/src/components/NcContent/NcContent.vue
+++ b/src/components/NcContent/NcContent.vue
@@ -3,6 +3,10 @@
  -
  - @author Christoph Wurst <christoph@winzerhof-wurst.at>
  -
+ - @copyright Copyright (c) 2022 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ -
+ - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
@@ -77,21 +81,48 @@ It includes the Navigation, the App content and the Sidebar.
 </template>
 
 <script>
+import { computed } from 'vue'
+
 export default {
+	provide() {
+		return {
+			isMobile: computed(() => this.isMobile),
+			isFullscreen: computed(() => this.isFullscreen),
+		}
+	},
 	props: {
 		appName: {
 			type: String,
 			required: true,
 		},
 	},
+	data() {
+		return {
+			isMobile: false,
+			isFullscreen: false,
+		}
+	},
+	created() {
+		window.addEventListener('resize', this.handleWindowResize)
+		this.handleWindowResize()
+	},
+	beforeUnmount() {
+		window.removeEventListener('resize', this.handleWindowResize)
+	},
+	methods: {
+		handleWindowResize() {
+			this.isMobile = document.documentElement.clientWidth < 1024
+			// if the window height is equal to the screen height,
+			// we're in full screen mode
+			this.isFullscreen = (window.outerHeight === screen.height)
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
 .content {
 	box-sizing: border-box;
-	margin: var(--body-container-margin);
-	margin-top: 50px;
 	display: flex;
 	width: calc(100% - var(--body-container-margin) * 2);
 	border-radius: var(--body-container-radius);
diff --git a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
index 4a383f49ba..ddd816993e 100644
--- a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
+++ b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
@@ -145,8 +145,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 			:value="formattedValue"
 			:min="formattedMin"
 			:max="formattedMax"
-			v-bind="$attrs"
-			v-on="listeners">
+			v-bind="attrs">
 	</div>
 </template>
 
@@ -249,9 +248,9 @@ export default {
 			}
 			return false
 		},
-		listeners() {
+		attrs() {
 			return {
-				...this.$listeners,
+				...this.$attrs,
 				/**
 				 * Handle the input event
 				 *
diff --git a/src/components/NcDatetimePicker/NcDatetimePicker.vue b/src/components/NcDatetimePicker/NcDatetimePicker.vue
index 234a265664..0e11afb8a8 100644
--- a/src/components/NcDatetimePicker/NcDatetimePicker.vue
+++ b/src/components/NcDatetimePicker/NcDatetimePicker.vue
@@ -105,7 +105,7 @@ picked time zone, but you will have to convert it yourself when necessary.
 			v-model="time"
 			type="datetime"
 			:show-timezone-select="true"
-			:timezone-id.sync="tz" /><br>
+			v-model:timezone-id="tz" /><br>
 		{{ time }} | {{ tz }}
 	</span>
 </template>
@@ -136,13 +136,12 @@ export default {
 		:type="type"
 		:value="value"
 		v-bind="$attrs"
-		v-on="$listeners"
 		@select-year="handleSelectYear"
 		@select-month="handleSelectMonth"
 		@update:value="$emit('update:value', value)">
 		<template #icon-calendar>
 			<NcPopover v-if="showTimezoneSelect"
-				:shown.sync="showTimezonePopover"
+				v-model:shown="showTimezonePopover"
 				popover-base-class="timezone-select__popper">
 				<template #trigger>
 					<button class="datetime-picker-inline-icon"
@@ -163,7 +162,7 @@ export default {
 			</NcPopover>
 			<CalendarBlank v-else :size="20" />
 		</template>
-		<template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
+		<template v-for="(_, slot) of $slots" #[slot]="scope">
 			<slot :name="slot" v-bind="scope" />
 		</template>
 	</DatePicker>
@@ -188,7 +187,7 @@ import {
 	getMonthNamesShort,
 } from '@nextcloud/l10n'
 
-import DatePicker from 'vue2-datepicker'
+import DatePicker from 'vue-datepicker-next'
 
 const formatMap = {
 	date: 'YYYY-MM-DD',
@@ -255,7 +254,7 @@ export default {
 		},
 
 		/**
-		 * The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select="true"`. Example: `Europe/Berlin`. The prop supports two-way binding through the .sync modifier.
+		 * The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select="true"`. Example: `Europe/Berlin`. The prop supports two-way binding through v-model directive.
 		 */
 		timezoneId: {
 			type: String,
diff --git a/src/components/NcDatetimePicker/index.scss b/src/components/NcDatetimePicker/index.scss
index 3257dea028..f7ba9d0798 100644
--- a/src/components/NcDatetimePicker/index.scss
+++ b/src/components/NcDatetimePicker/index.scss
@@ -1,6 +1,6 @@
 $cell_height: 32px;
 
-@import 'vue2-datepicker/scss/index';
+@import 'vue-datepicker-next/scss/index';
 
 .mx-datepicker[data-v-#{$scope_version}] {
 	user-select: none;
diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index bcc8034571..394ebebaa7 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -124,10 +124,9 @@ This component allows the user to pick an emoji.
 </docs>
 
 <template>
-	<NcPopover :shown.sync="open"
+	<NcPopover v-model="open"
 		:container="container"
 		v-bind="$attrs"
-		v-on="$listeners"
 		@after-show="afterShow"
 		@after-hide="afterHide">
 		<template #trigger>
@@ -149,8 +148,8 @@ This component allows the user to pick an emoji.
 			@select="select">
 			<template #searchTemplate="slotProps">
 				<NcTextField ref="search"
+					v-model:value="search"
 					class="search"
-					:value.sync="search"
 					:label="t('Search')"
 					:label-visible="true"
 					:placeholder="i18n.search"
diff --git a/src/components/NcEmptyContent/NcEmptyContent.vue b/src/components/NcEmptyContent/NcEmptyContent.vue
index 69ccaf209f..71fb3793d7 100644
--- a/src/components/NcEmptyContent/NcEmptyContent.vue
+++ b/src/components/NcEmptyContent/NcEmptyContent.vue
@@ -187,7 +187,7 @@ export default {
 		 * Check if a description is given as either property or slot
 		 */
 		hasDescription() {
-			return this.description !== '' || this.$slots.description?.[0]
+			return this.description !== '' || this.$slots.description?.()[0]
 		},
 	},
 }
diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index d4d2c32443..49cff646ff 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -180,7 +180,7 @@ export default {
 	mounted() {
 		document.addEventListener('keydown', this.onKeyDown)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('keydown', this.onKeyDown)
 	},
 
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index db7977e247..3c9f3817fb 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -203,9 +203,7 @@
 	<!-- This wrapper can be either a router link or a `<li>` -->
 	<component :is="to ? 'router-link' : 'NcVNodes'"
 		v-slot="{ href: routerLinkHref, navigate, isActive }"
-		:custom="to ? true : null"
-		:to="to"
-		:exact="to ? exact : null">
+		v-bind="{ ...to && { custom: true, to } }">
 		<li class="list-item__wrapper"
 			:class="{ 'list-item__wrapper--active' : isActive || active }">
 			<a :id="anchorId"
@@ -340,15 +338,6 @@ export default {
 			required: true,
 		},
 
-		/**
-		 * Pass in `true` if you want the matching behavior to
-		 * be non-inclusive: https://router.vuejs.org/api/#exact
-		 */
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-
 		/**
 		 * The route for the router link.
 		 */
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
index 091c152ec5..86db119bcb 100644
--- a/src/components/NcListItemIcon/NcListItemIcon.vue
+++ b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -128,7 +128,7 @@ It might be used for list rendering or within the multiselect for example
 	<span :id="id"
 		class="option"
 		:style="cssVars"
-		v-on="$listeners">
+		v-bind="$attrs">
 		<NcAvatar v-bind="$attrs"
 			:disable-menu="true"
 			:disable-tooltip="true"
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index 888103ee99..f8fbfed62d 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -21,7 +21,7 @@
   -->
 
 <docs>
-For showing the modal you can use either `:show.sync="showModal"` or `v-if` on the `NcModal`,
+For showing the modal you can use either `v-model:show="showModal"` or `v-if` on the `NcModal`,
 depending on whether you require the Modal to stay within the DOM or not. Do not mix both, as this will break the out transition animation.
 
 ```vue
@@ -29,7 +29,7 @@ depending on whether you require the Modal to stay within the DOM or not. Do not
 	<div>
 		<NcButton @click="showModal">Show Modal</NcButton>
 		<NcModal
-			:show.sync="modal"
+			v-model:show="modal"
 			@close="closeModal"
 			size="small"
 			name="Name"
@@ -77,8 +77,8 @@ export default {
 			name="Name inside modal">
 			<div class="modal__content">
 				<h2>Please enter your name</h2>
-				<NcTextField label="First Name" :value.sync="firstName" />
-				<NcTextField label="Last Name" :value.sync="lastName" />
+				<NcTextField label="First Name" v-model:value="firstName" />
+				<NcTextField label="Last Name" v-model:value="lastName" />
 				<NcButton
 					:disabled="!this.firstName || !this.lastName"
 					@click="closeModal"
@@ -168,7 +168,7 @@ export default {
 </docs>
 
 <template>
-	<transition name="fade"
+	<Transition name="fade"
 		appear
 		@after-enter="useFocusTrap"
 		@before-leave="clearFocusTrap">
@@ -183,7 +183,7 @@ export default {
 			:aria-describedby="'modal-description-' + randId"
 			tabindex="-1">
 			<!-- Header -->
-			<transition name="fade-visibility" appear>
+			<Transition name="fade-visibility" appear>
 				<div class="modal-header">
 					<h2 v-if="name.trim() !== ''"
 						:id="'modal-name-' + randId"
@@ -242,10 +242,10 @@ export default {
 						</NcButton>
 					</div>
 				</div>
-			</transition>
+			</Transition>
 
 			<!-- Content wrapper -->
-			<transition :name="modalTransitionName" appear>
+			<Transition :name="modalTransitionName" appear>
 				<div v-show="showModal"
 					:class="[
 						`modal-wrapper--${size}`,
@@ -254,7 +254,7 @@ export default {
 					class="modal-wrapper"
 					@mousedown.self="handleClickModalWrapper">
 					<!-- Navigation button -->
-					<transition name="fade-visibility" appear>
+					<Transition name="fade-visibility" appear>
 						<NcButton v-show="hasPrevious"
 							type="tertiary-no-background"
 							class="prev"
@@ -267,7 +267,7 @@ export default {
 								<ChevronLeft :size="40" />
 							</template>
 						</NcButton>
-					</transition>
+					</Transition>
 
 					<!-- Content -->
 					<div :id="'modal-description-' + randId" class="modal-container">
@@ -288,7 +288,7 @@ export default {
 					</div>
 
 					<!-- Navigation button -->
-					<transition name="fade-visibility" appear>
+					<Transition name="fade-visibility" appear>
 						<NcButton v-show="hasNext"
 							type="tertiary-no-background"
 							class="next"
@@ -301,11 +301,11 @@ export default {
 								<ChevronRight :size="40" />
 							</template>
 						</NcButton>
-					</transition>
+					</Transition>
 				</div>
-			</transition>
+			</Transition>
 		</div>
-	</transition>
+	</Transition>
 </template>
 
 <script>
@@ -558,7 +558,7 @@ export default {
 	beforeMount() {
 		window.addEventListener('keydown', this.handleKeydown)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('keydown', this.handleKeydown)
 		this.mc.stop()
 	},
@@ -572,14 +572,14 @@ export default {
 		if (this.container) {
 			if (this.container === 'body') {
 				// force mount the component to body
-				document.body.insertBefore(this.$el, document.body.lastChild)
+				document?.body.insertBefore(this.$el, document?.body.lastChild)
 			} else {
-				const container = document.querySelector(this.container)
+				const container = document?.querySelector(this.container)
 				container.appendChild(this.$el)
 			}
 		}
 	},
-	destroyed() {
+	unmounted() {
 		this.clearFocusTrap()
 		this.$el.remove()
 	},
@@ -1023,12 +1023,12 @@ export default {
 	transition: opacity 250ms;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
 }
 
-.fade-visibility-enter,
+.fade-visibility-enter-from,
 .fade-visibility-leave-to {
 	visibility: hidden;
 	opacity: 0;
@@ -1041,9 +1041,9 @@ export default {
 	transition: opacity 250ms;
 }
 
-.modal-in-enter,
+.modal-in-enter-from,
 .modal-in-leave-to,
-.modal-out-enter,
+.modal-out-enter-from,
 .modal-out-leave-to {
 	opacity: 0;
 }
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index a6c4bfe30c..d8455edfd4 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -31,7 +31,7 @@ This component displays contenteditable div with automated `@` [at] autocompleti
 <template>
 	<div>
 		<NcRichContenteditable
-			:value.sync="message"
+			v-model:value="message"
 			:auto-complete="autoComplete"
 			:maxlength="100"
 			:user-data="userData"
@@ -40,7 +40,7 @@ This component displays contenteditable div with automated `@` [at] autocompleti
 		<br>
 
 		<NcRichContenteditable
-			:value.sync="message"
+			v-model:value="message"
 			:auto-complete="autoComplete"
 			:maxlength="400"
 			:multiline="true"
@@ -181,7 +181,7 @@ export default {
 		aria-multiline="true"
 		class="rich-contenteditable__input"
 		role="textbox"
-		v-on="listeners"
+		v-bind="$attrs"
 		@input="onInput"
 		@compositionstart="isComposing = true"
 		@compositionend="isComposing = false"
@@ -462,7 +462,7 @@ export default {
 			 * As a result, it triggers handlers twice.
 			 * The v-on="listeners" directive should only set proxied native events handler without custom events
 			 */
-			const listeners = { ...this.$listeners }
+			const listeners = { ...this.$attrs }
 			delete listeners.paste
 			return listeners
 		},
@@ -514,7 +514,7 @@ export default {
 		// set to false.
 		this.$refs.contenteditable.contentEditable = this.canEdit
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		if (this.autocompleteTribute) {
 			this.autocompleteTribute.detach(this.$el)
 		}
diff --git a/src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue b/src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue
index e9e227bc29..5045440432 100644
--- a/src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue
+++ b/src/components/NcRichText/NcReferencePicker/NcCustomPickerElement.vue
@@ -31,7 +31,7 @@ export default {
 			this.renderElement()
 		}
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		if (this.isRegistered) {
 			destroyCustomPickerElement(this.provider.id, this.$el, this.renderResult)
 		}
diff --git a/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue b/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue
index c08769a33c..3703a9d38f 100644
--- a/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue
+++ b/src/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue
@@ -2,12 +2,12 @@
 	<div class="raw-link">
 		<div class="input-wrapper">
 			<NcTextField ref="url-input"
-				:value.sync="inputValue"
+				v-model:value="inputValue"
 				:show-trailing-button="inputValue !== ''"
 				:label="inputPlaceholder"
 				@trailing-button-click="onClear"
 				@update:value="onInput"
-				@keyup.native.enter="onSubmit">
+				@keyup.enter="onSubmit">
 				<NcLoadingIcon v-if="loading" :size="16" />
 				<LinkVariantIcon v-else :size="16" />
 			</NcTextField>
diff --git a/src/components/NcRichText/NcReferencePicker/NcSearch.vue b/src/components/NcRichText/NcReferencePicker/NcSearch.vue
index ad1c66a756..2b537d61a8 100644
--- a/src/components/NcRichText/NcReferencePicker/NcSearch.vue
+++ b/src/components/NcRichText/NcReferencePicker/NcSearch.vue
@@ -182,7 +182,7 @@ export default {
 	mounted() {
 		this.resetResults()
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		this.cancelSearchRequests()
 	},
 	methods: {
diff --git a/src/components/NcRichText/NcReferencePicker/referencePickerModal.js b/src/components/NcRichText/NcReferencePicker/referencePickerModal.js
index 9e51315c12..2442240cdf 100644
--- a/src/components/NcRichText/NcReferencePicker/referencePickerModal.js
+++ b/src/components/NcRichText/NcReferencePicker/referencePickerModal.js
@@ -1,7 +1,7 @@
 import NcReferencePickerModal from './NcReferencePickerModal.vue'
 import { getProvider } from './providerHelper.js'
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 /**
  * Creates a reference picker modal and return a promise which provides the result
@@ -21,14 +21,12 @@ export async function getLinkWithPicker(providerId = null, isInsideViewer = unde
 			? null
 			: (getProvider(providerId) ?? null)
 
-		const View = Vue.extend(NcReferencePickerModal)
-		const view = new View({
-			propsData: {
-				initialProvider,
-				isInsideViewer,
-			},
-		}).$mount(modalElement)
+		const view = createApp(NcReferencePickerModal, {
+			initialProvider,
+			isInsideViewer,
+		}).mount(modalElement)
 
+		// TODO adjust this for vue3
 		view.$on('cancel', () => {
 			view.$destroy()
 			reject(new Error('User cancellation'))
diff --git a/src/components/NcRichText/NcReferenceWidget.vue b/src/components/NcRichText/NcReferenceWidget.vue
index 369b47c9d1..d09a437322 100644
--- a/src/components/NcRichText/NcReferenceWidget.vue
+++ b/src/components/NcRichText/NcReferenceWidget.vue
@@ -85,7 +85,7 @@ export default {
 		})
 		this.observer.observe(this.$el)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		this.observer.disconnect()
 		destroyWidget(this.reference.richObjectType, this.$el)
 	},
diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue
index 99ea79d1af..14d0449706 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -25,8 +25,8 @@
 <template>
 	<div>
 		<textarea v-model="text" />
-		<NcCheckboxRadioSwitch :checked.sync="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
-		<NcCheckboxRadioSwitch :checked.sync="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model:checked="autolink" type="checkbox">Autolink</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model:checked="useMarkdown" type="checkbox">Use Markdown</NcCheckboxRadioSwitch>
 
 		<NcRichText
 			:text="text" :autolink="autolink" :arguments="args"
@@ -77,6 +77,7 @@ import breaks from 'remark-breaks'
 import remark2rehype from 'remark-rehype'
 import rehype2react from 'rehype-react'
 import remarkExternalLinks from 'remark-external-links'
+import { h, resolveComponent } from 'vue'
 
 export default {
 	name: 'NcRichText',
@@ -137,7 +138,7 @@ export default {
 		},
 	},
 	methods: {
-		renderPlaintext(h) {
+		renderPlaintext() {
 			const context = this
 			const placeholders = this.text.split(/(\{[a-z\-_.0-9]+\})/ig).map(function(entry, index, list) {
 				const matches = entry.match(/^\{([a-z\-_.0-9]+)\}$/i)
@@ -150,8 +151,8 @@ export default {
 				const argument = context.arguments[argumentId]
 				if (typeof argument === 'object') {
 					const { component, props } = argument
-					return h(component, {
-						props,
+					return h((typeof component === 'string') ? resolveComponent(component) : component, {
+						...props,
 						class: 'rich-text--component',
 					})
 				}
@@ -164,12 +165,12 @@ export default {
 				h('div', {}, placeholders.flat()),
 				this.referenceLimit > 0
 					? h('div', { class: 'rich-text--reference-widget' }, [
-						h(NcReferenceList, { props: { text: this.text, referenceData: this.references } }),
+						h(resolveComponent('NcReferenceList'), { text: this.text, referenceData: this.references }),
 					])
 					: null,
 			])
 		},
-		renderMarkdown(h) {
+		renderMarkdown() {
 			const renderedMarkdown = unified()
 				.use(markdown)
 				.use(remarkAutolink, {
@@ -193,23 +194,23 @@ export default {
 				.use(rehype2react, {
 					createElement: (tag, attrs, children) => {
 						if (!tag.startsWith('#')) {
-							return h(tag, attrs, children)
+							return h(tag, { ...attrs }, children)
 						}
 
 						const placeholder = this.arguments[tag.slice(1)]
 						if (!placeholder) {
-							return h('span', { ...{ attrs }, ...{ class: 'rich-text--fallback' } }, [`{${tag.slice(1)}}`])
+							return h('span', { ...attrs, class: 'rich-text--fallback' }, [`{${tag.slice(1)}}`])
 						}
 
 						if (!placeholder.component) {
-							return h('span', attrs, [placeholder])
+							return h('span', { ...attrs }, [placeholder])
 						}
 
 						return h(
-							placeholder.component,
+							(typeof placeholder.component === 'string') ? resolveComponent(placeholder.component) : placeholder.component,
 							{
-								attrs,
-								props: placeholder.props,
+								...attrs,
+								...placeholder.props,
 								class: 'rich-text--component',
 							},
 							children,
@@ -232,18 +233,18 @@ export default {
 				renderedMarkdown,
 				this.referenceLimit > 0
 					? h('div', { class: 'rich-text--reference-widget' }, [
-						h(NcReferenceList, { props: { text: this.text, referenceData: this.references } }),
+						h(resolveComponent('NcReferenceList'), { text: this.text, referenceData: this.references }),
 					])
 					: null,
 			])
 		},
 	},
-	render(h) {
+	render() {
 		if (!this.useMarkdown) {
-			return this.renderPlaintext(h)
+			return this.renderPlaintext()
 		}
 
-		return this.renderMarkdown(h)
+		return this.renderMarkdown()
 	},
 }
 </script>
diff --git a/src/components/NcRichText/autolink.js b/src/components/NcRichText/autolink.js
index 4db8e14acb..c51e1dbf67 100644
--- a/src/components/NcRichText/autolink.js
+++ b/src/components/NcRichText/autolink.js
@@ -2,6 +2,7 @@ import { URL_PATTERN_AUTOLINK } from './helpers.js'
 
 import { visit, SKIP } from 'unist-util-visit'
 import { u } from 'unist-builder'
+import { h } from 'vue'
 
 const NcLink = {
 	name: 'NcLink',
@@ -11,14 +12,12 @@ const NcLink = {
 			required: true,
 		},
 	},
-	render(h) {
+	render() {
 		return h('a', {
-			attrs: {
-				href: this.href,
-				rel: 'noopener noreferrer',
-				target: '_blank',
-				class: 'rich-text--external-link',
-			},
+			href: this.href,
+			rel: 'noopener noreferrer',
+			target: '_blank',
+			class: 'rich-text--external-link',
 		}, [this.href.trim()])
 	},
 }
diff --git a/src/components/NcRichText/placeholder.js b/src/components/NcRichText/placeholder.js
index f2ee5b4f91..9c9589b2b3 100644
--- a/src/components/NcRichText/placeholder.js
+++ b/src/components/NcRichText/placeholder.js
@@ -47,7 +47,7 @@ export const prepareTextNode = ({ h, context }, text) => {
 			// do not override class of NcLink
 			const componentClass = component.name === 'NcLink' ? undefined : 'rich-text--component'
 			return h(component, {
-				props,
+				...props,
 				class: componentClass,
 			})
 		})
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index 445a420761..34403cc87e 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -481,7 +481,6 @@ export default {
 			'select--no-wrap': noWrap,
 		}"
 		v-bind="propsToForward"
-		v-on="$listeners"
 		@search="searchString => search = searchString">
 		<template #search="{ attributes, events }">
 			<input :class="['vs__search', inputClass]"
@@ -518,7 +517,7 @@ export default {
 		<template #no-options>
 			{{ t('No results') }}
 		</template>
-		<template v-for="(_, name) in $scopedSlots" #[name]="data">
+		<template v-for="(_, name) in $slots" #[name]="data">
 			<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->
 			<slot :name="name" v-bind="data" />
 		</template>
@@ -526,8 +525,8 @@ export default {
 </template>
 
 <script>
-import { VueSelect } from '@nextcloud/vue-select'
-import '@nextcloud/vue-select/dist/vue-select.css'
+import VueSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
 import {
 	autoUpdate,
 	computePosition,
@@ -546,6 +545,8 @@ import NcLoadingIcon from '../NcLoadingIcon/index.js'
 
 import l10n from '../../mixins/l10n.js'
 
+import { h } from 'vue'
+
 export default {
 	name: 'NcSelect',
 
@@ -610,14 +611,12 @@ export default {
 			type: Object,
 			default: () => ({
 				Deselect: {
-					render: createElement => createElement(Close, {
-						props: {
-							size: 20,
-							fillColor: 'var(--vs-controls-color)',
-						},
-						style: {
-							cursor: 'pointer',
-						},
+					render: () => h(Close, {
+						size: 20,
+						fillColor: 'var(--vs-controls-color)',
+						style: [
+							{ cursor: 'pointer' },
+						],
 					}),
 				},
 			}),
@@ -808,7 +807,7 @@ export default {
 		 *
 		 * @see https://vue-select.org/api/props.html#value
 		 */
-		value: {
+		modelValue: {
 			type: [String, Number, Object, Array],
 			default: null,
 		},
@@ -939,6 +938,7 @@ export default {
 				calculatePosition: this.localCalculatePosition,
 				filterBy: this.localFilterBy,
 				label: this.localLabel,
+				...this.$attrs,
 			}
 
 			return propsToForward
diff --git a/src/components/NcSelectTags/NcSelectTags.vue b/src/components/NcSelectTags/NcSelectTags.vue
index bceb4214a1..97b98b5e30 100644
--- a/src/components/NcSelectTags/NcSelectTags.vue
+++ b/src/components/NcSelectTags/NcSelectTags.vue
@@ -134,12 +134,13 @@ export default {
 	<NcSelect v-bind="propsToForward"
 		:options="availableOptions"
 		:close-on-select="!multiple"
-		:value="passthru ? value : localValue"
+		:model-value="passthru ? value : localValue"
 		@search="searchString => search = searchString"
 		v-on="{
-			...$listeners,
-			input: passthru ? $listeners.input : handleInput,
+			...$attrs,
+			'update:model-value': passthru ? $attrs.input : handleInput,
 		}">
+		<!-- Do not forward input event listener to NcSelect as we emit custom input events programmatically -->
 		<template #option="option">
 			<NcEllipsisedOption :name="getOptionLabel(option)"
 				:search="search" />
@@ -148,7 +149,7 @@ export default {
 			<NcEllipsisedOption :name="getOptionLabel(selectedOption)"
 				:search="search" />
 		</template>
-		<template v-for="(_, name) in $scopedSlots" #[name]="data">
+		<template v-for="(_, name) in $slots" #[name]="data">
 			<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->
 			<slot :name="name" v-bind="data" />
 		</template>
@@ -259,7 +260,7 @@ export default {
 		/**
 		 * Currently selected value
 		 */
-		value: {
+		modelValue: {
 			type: [Number, Array],
 			default: null,
 		},
@@ -275,7 +276,7 @@ export default {
 	},
 
 	emits: [
-		'input',
+		'update:modelValue',
 		/**
 		 * All events from https://vue-select.org/api/events.html
 		 */
@@ -303,11 +304,11 @@ export default {
 				return []
 			}
 			if (this.multiple) {
-				return this.value
+				return this.modelValue
 					.filter(tag => tag !== '')
 					.map(id => this.tags.find(tag2 => tag2.id === id))
 			} else {
-				return this.tags.find(tag => tag.id === this.value)
+				return this.tags.find(tag => tag.id === this.modelValue)
 			}
 		},
 
@@ -321,7 +322,7 @@ export default {
 				...propsToForward
 			} = this.$props
 
-			return propsToForward
+			return { ...propsToForward, ...this.$attrs }
 		},
 
 		tags() {
@@ -352,12 +353,12 @@ export default {
 				 *
 				 * @type {number|number[]}
 				 */
-				this.$emit('input', value.map(element => element.id))
+				this.$emit('update:modelValue', value.map(element => element.id))
 			} else {
 				if (value === null) {
-					this.$emit('input', null)
+					this.$emit('update:modelValue', null)
 				} else {
-					this.$emit('input', value.id)
+					this.$emit('update:modelValue', value.id)
 				}
 			}
 		},
diff --git a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue b/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
index 214358644d..27b57e5ab1 100644
--- a/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
+++ b/src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
@@ -52,7 +52,7 @@ section * {
 <template>
 	<div>
 		<label v-if="label" :for="id" class="hidden-visually">{{ label }}</label>
-		<NcSelect :value="inputValue"
+		<NcSelect :model-value="inputValue"
 			:options="groupsArray"
 			:placeholder="placeholder || label"
 			:filter-by="filterGroups"
@@ -62,7 +62,7 @@ section * {
 			:multiple="true"
 			:close-on-select="false"
 			:disabled="disabled"
-			@input="update"
+			@update:model-value="update"
 			@search="onSearch" />
 	</div>
 </template>
@@ -115,7 +115,7 @@ export default {
 		 * value of the select group input
 		 * A list of group IDs can be provided
 		 */
-		value: {
+		modelValue: {
 			type: Array,
 			default: () => [],
 		},
@@ -146,7 +146,7 @@ export default {
 		 * @return {string[]}
 		 */
 		filteredValue() {
-			return this.value.filter((group) => group !== '' && typeof group === 'string')
+			return this.modelValue.filter((group) => group !== '' && typeof group === 'string')
 		},
 
 		/**
@@ -173,7 +173,7 @@ export default {
 		 * @return {object[]}
 		 */
 		groupsArray() {
-			return Object.values(this.groups).filter(g => !this.value.includes(g.id))
+			return Object.values(this.groups).filter(g => !this.modelValue.includes(g.id))
 		},
 	},
 	watch: {
@@ -217,7 +217,7 @@ export default {
 		update(updatedValue) {
 			const value = updatedValue.map((element) => element.id)
 			/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */
-			this.$emit('input', value)
+			this.$emit('update:model-value', value)
 		},
 
 		/**
diff --git a/src/components/NcUserBubble/NcUserBubble.vue b/src/components/NcUserBubble/NcUserBubble.vue
index b7bad6b38e..06a19ce44c 100644
--- a/src/components/NcUserBubble/NcUserBubble.vue
+++ b/src/components/NcUserBubble/NcUserBubble.vue
@@ -251,10 +251,7 @@ export default {
 		},
 
 		popoverEmpty() {
-			if ('default' in this.$slots) {
-				return false
-			}
-			return true
+			return !this.$slots.default
 		},
 
 		styles() {
diff --git a/src/components/NcVNodes/NcVNodes.vue b/src/components/NcVNodes/NcVNodes.vue
index bbdb40c2f5..ae5e4434bb 100644
--- a/src/components/NcVNodes/NcVNodes.vue
+++ b/src/components/NcVNodes/NcVNodes.vue
@@ -35,11 +35,10 @@ export default {
 	/**
 	 * The render function to display the component
 	 *
-	 * @param {Function} h The function to create VNodes
 	 * @return {object} The created VNode
 	 */
-	render(h) {
-		return this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()
+	render() {
+		return this.vnodes || this.$slots?.default?.({})
 	},
 }
 </script>
diff --git a/src/components/index.js b/src/components/index.js
index 7bfc662de2..50d5a23274 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -20,78 +20,73 @@
  *
  */
 
-// Not yet adjusted for vue3
-// export { default as NcActionButton } from './NcActionButton/index.js'
-// export { default as NcActionButtonGroup } from './NcActionButtonGroup/index.js'
-// export { default as NcActionCaption } from './NcActionCaption/index.js'
-// export { default as NcActionCheckbox } from './NcActionCheckbox/index.js'
-// export { default as NcActionInput } from './NcActionInput/index.js'
-// export { default as NcActionLink } from './NcActionLink/index.js'
-// export { default as NcActionRadio } from './NcActionRadio/index.js'
-// export { default as NcActionRouter } from './NcActionRouter/index.js'
-// export { default as NcActions } from './NcActions/index.js'
-// export { default as NcActionSeparator } from './NcActionSeparator/index.js'
-// export { default as NcActionText } from './NcActionText/index.js'
-// export { default as NcActionTextEditable } from './NcActionTextEditable/index.js'
-// export { default as NcAppContent } from './NcAppContent/index.js'
-// export { default as NcAppContentDetails } from './NcAppContentDetails/index.js'
-// export { default as NcAppContentList } from './NcAppContentList/index.js'
-// export { default as NcAppNavigation } from './NcAppNavigation/index.js'
-// export { default as NcAppNavigationCaption } from './NcAppNavigationCaption/index.js'
-// export { default as NcAppNavigationIconBullet } from './NcAppNavigationIconBullet/index.js'
-// export { default as NcAppNavigationItem } from './NcAppNavigationItem/index.js'
-// export { default as NcAppNavigationNew } from './NcAppNavigationNew/index.js'
-// export { default as NcAppNavigationNewItem } from './NcAppNavigationNewItem/index.js'
-// export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/index.js'
-// export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.js'
-// export { default as NcAppSettingsDialog } from './NcAppSettingsDialog/index.js'
-// export { default as NcAppSettingsSection } from './NcAppSettingsSection/index.js'
-// export { default as NcAppSidebar } from './NcAppSidebar/index.js'
-// export { default as NcAppSidebarTab } from './NcAppSidebarTab/index.js'
-// export { default as NcAvatar } from './NcAvatar/index.js'
-// export { default as NcBreadcrumb } from './NcBreadcrumb/index.js'
-// export { default as NcBreadcrumbs } from './NcBreadcrumbs/index.js'
+export { default as NcActionButton } from './NcActionButton/index.js'
+export { default as NcActionButtonGroup } from './NcActionButtonGroup/index.js'
+export { default as NcActionCaption } from './NcActionCaption/index.js'
+export { default as NcActionCheckbox } from './NcActionCheckbox/index.js'
+export { default as NcActionInput } from './NcActionInput/index.js'
+export { default as NcActionLink } from './NcActionLink/index.js'
+export { default as NcActionRadio } from './NcActionRadio/index.js'
+export { default as NcActionRouter } from './NcActionRouter/index.js'
+export { default as NcActions } from './NcActions/index.js'
+export { default as NcActionSeparator } from './NcActionSeparator/index.js'
+export { default as NcActionText } from './NcActionText/index.js'
+export { default as NcActionTextEditable } from './NcActionTextEditable/index.js'
+export { default as NcAppContent } from './NcAppContent/index.js'
+export { default as NcAppContentDetails } from './NcAppContentDetails/index.js'
+export { default as NcAppContentList } from './NcAppContentList/index.js'
+export { default as NcAppNavigation } from './NcAppNavigation/index.js'
+export { default as NcAppNavigationCaption } from './NcAppNavigationCaption/index.js'
+export { default as NcAppNavigationIconBullet } from './NcAppNavigationIconBullet/index.js'
+export { default as NcAppNavigationItem } from './NcAppNavigationItem/index.js'
+export { default as NcAppNavigationNew } from './NcAppNavigationNew/index.js'
+export { default as NcAppNavigationNewItem } from './NcAppNavigationNewItem/index.js'
+export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/index.js'
+export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.js'
+export { default as NcAppSettingsDialog } from './NcAppSettingsDialog/index.js'
+export { default as NcAppSettingsSection } from './NcAppSettingsSection/index.js'
+export { default as NcAppSidebar } from './NcAppSidebar/index.js'
+export { default as NcAppSidebarTab } from './NcAppSidebarTab/index.js'
+export { default as NcAvatar } from './NcAvatar/index.js'
+export { default as NcBreadcrumb } from './NcBreadcrumb/index.js'
+export { default as NcBreadcrumbs } from './NcBreadcrumbs/index.js'
 export { default as NcButton } from './NcButton/index.js'
-
-// Not yet adjusted for vue3
 export { default as NcCheckboxRadioSwitch } from './NcCheckboxRadioSwitch/index.js'
-// export { default as NcColorPicker } from './NcColorPicker/index.js'
-// export { default as NcContent } from './NcContent/index.js'
+export { default as NcColorPicker } from './NcColorPicker/index.js'
+export { default as NcContent } from './NcContent/index.js'
 export { default as NcCounterBubble } from './NcCounterBubble/index.js'
-// export { default as NcDashboardWidget } from './NcDashboardWidget/index.js'
-// export { default as NcDashboardWidgetItem } from './NcDashboardWidgetItem/index.js'
+export { default as NcDashboardWidget } from './NcDashboardWidget/index.js'
+export { default as NcDashboardWidgetItem } from './NcDashboardWidgetItem/index.js'
 export { default as NcDatetime } from './NcDatetime/index.js'
-// export { default as NcDatetimePicker } from './NcDatetimePicker/index.js'
-// export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/index.js'
+export { default as NcDatetimePicker } from './NcDatetimePicker/index.js'
+export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/index.js'
 // Not exported on purpose
 // export { default as NcEllipsisedOption } from './NcEllipsisedOption/index.js'
 
-// Not yet adjusted for vue3
-// export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
-// export { default as NcEmptyContent } from './NcEmptyContent/index.js'
+export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
+export { default as NcEmptyContent } from './NcEmptyContent/index.js'
 export { default as NcGuestContent } from './NcGuestContent/index.js'
-// export { default as NcHeaderMenu } from './NcHeaderMenu/index.js'
+export { default as NcHeaderMenu } from './NcHeaderMenu/index.js'
 export { default as NcHighlight } from './NcHighlight/index.js'
 export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.js'
 // Not exported on purpose as it is only meant as a base component
 // export { default as NcInputField } from './NcInputField/index.js'
 
-// Not yet adjusted for vue3
-// export { default as NcListItem } from './NcListItem/index.js'
-// export { default as NcListItemIcon } from './NcListItemIcon/index.js'
+export { default as NcListItem } from './NcListItem/index.js'
+export { default as NcListItemIcon } from './NcListItemIcon/index.js'
 export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'
-// export { default as NcModal } from './NcModal/index.js'
+export { default as NcModal } from './NcModal/index.js'
 export { default as NcNoteCard } from './NcNoteCard/index.js'
 export { default as NcPasswordField } from './NcPasswordField/index.js'
 export { default as NcPopover } from './NcPopover/index.js'
 export { default as NcProgressBar } from './NcProgressBar/index.js'
-// export { default as NcRelatedResourcesPanel } from './NcRelatedResourcesPanel/index.js'
-// export { default as NcRichContenteditable, NcAutoCompleteResult, NcMentionBubble } from './NcRichContenteditable/index.js'
-// export { default as NcRichText } from './NcRichText/index.js'
+export { default as NcRelatedResourcesPanel } from './NcRelatedResourcesPanel/index.js'
+export { default as NcRichContenteditable, NcAutoCompleteResult, NcMentionBubble } from './NcRichContenteditable/index.js'
+export { default as NcRichText } from './NcRichText/index.js'
 export { default as NcSavingIndicatorIcon } from './NcSavingIndicatorIcon/index.js'
-// export { default as NcSelect } from './NcSelect/index.js'
-// export { default as NcSelectTags } from './NcSelectTags/index.js'
-// export { default as NcSettingsSection } from './NcSettingsSection/index.js'
+export { default as NcSelect } from './NcSelect/index.js'
+export { default as NcSelectTags } from './NcSelectTags/index.js'
+export { default as NcSettingsSection } from './NcSettingsSection/index.js'
 export { default as NcTextField } from './NcTextField/index.js'
-// export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
-// export { default as NcUserBubble } from './NcUserBubble/index.js'
+export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
+export { default as NcUserBubble } from './NcUserBubble/index.js'
diff --git a/src/index.js b/src/index.js
index 74648d8e49..62cde5892a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,9 +22,8 @@
 
 export * from './components/index.js'
 
-// Not yet adjusted for vue3
-// export * from './functions/index.js'
+export * from './functions/index.js'
 export * from './directives/index.js'
-// export * from './mixins/index.js'
+export * from './mixins/index.js'
 
 export { NextcloudVuePlugin } from './plugin.ts'
diff --git a/src/mixins/actionGlobal.js b/src/mixins/actionGlobal.js
index 96015d31a9..43b9ed1231 100644
--- a/src/mixins/actionGlobal.js
+++ b/src/mixins/actionGlobal.js
@@ -19,14 +19,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)
+		if (!this.$slots.default() || this.text.trim() === '') {
+			warn(`${this.$options.name} cannot be empty and requires a meaningful text content`, this)
 			this.$destroy()
 			this.$el.remove()
 		}
@@ -52,7 +52,7 @@ export default {
 
 	methods: {
 		getText() {
-			return this.$slots.default ? this.$slots.default[0].text.trim() : ''
+			return this.$slots.default?.()[0].children?.trim?.() || ''
 		},
 	},
 }
diff --git a/src/mixins/isFullscreen/index.js b/src/mixins/isFullscreen/index.js
index 98ef6bd06d..091d8941a5 100644
--- a/src/mixins/isFullscreen/index.js
+++ b/src/mixins/isFullscreen/index.js
@@ -3,6 +3,10 @@
  *
  * @author John Molakvoæ <skjnldsv@protonmail.com>
  *
+ * @copyright Copyright (c) 2022 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
  * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
@@ -19,28 +23,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
 export default {
-	data() {
-		return {
-			isFullscreen: this._isFullscreen(),
-		}
-	},
-	beforeMount() {
-		window.addEventListener('resize', this._onResize)
-	},
-	beforeDestroy() {
-		window.removeEventListener('resize', this._onResize)
-	},
-	methods: {
-		_onResize() {
-			// Update fullscreen mode
-			this.isFullscreen = this._isFullscreen()
-		},
-		_isFullscreen() {
-			// if the window height is equal to the screen height,
-			// we're in full screen mode
-			return window.outerHeight === screen.height
-		},
-	},
+	inject: ['isFullscreen'],
 }
diff --git a/src/mixins/isMobile/index.js b/src/mixins/isMobile/index.js
index 386ff7022d..efad574123 100644
--- a/src/mixins/isMobile/index.js
+++ b/src/mixins/isMobile/index.js
@@ -3,6 +3,10 @@
  *
  * @author John Molakvoæ <skjnldsv@protonmail.com>
  *
+ * @copyright Copyright (c) 2022 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
  * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
@@ -19,25 +23,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
-import { IsMobileState } from '../../utils/IsMobileState.js'
-
 export default {
-	data() {
-		return {
-			isMobile: false,
-		}
-	},
-	mounted() {
-		IsMobileState.$on('changed', this.onIsMobileChanged)
-		this.isMobile = IsMobileState.isMobile
-	},
-	beforeDestroy() {
-		IsMobileState.$off('changed', this.onIsMobileChanged)
-	},
-	methods: {
-		onIsMobileChanged(val) {
-			this.isMobile = val
-		},
-	},
+	inject: ['isMobile'],
 }
diff --git a/src/mixins/richEditor/index.js b/src/mixins/richEditor/index.js
index 1502cdda0c..8b74d34e8b 100644
--- a/src/mixins/richEditor/index.js
+++ b/src/mixins/richEditor/index.js
@@ -25,7 +25,7 @@ import Linkify from '../../utils/Linkify.js'
 
 import escapeHtml from 'escape-html'
 import stripTags from 'striptags'
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 // Beginning or whitespace. Non-capturing group
 const MENTION_START = '(?:^|\\s)'
@@ -133,9 +133,8 @@ export default {
 		 * @return {string} the rendered html
 		 */
 		renderComponentHtml(propsData, component) {
-			const View = Vue.extend(component)
-			const Item = new View({
-				propsData,
+			const Item = createApp(component, {
+				...propsData,
 			})
 
 			// Prepare mountpoint
@@ -146,11 +145,11 @@ export default {
 			document.body.appendChild(wrapper)
 
 			// Mount and get raw html
-			Item.$mount(mount)
+			Item.mount(mount)
 			const renderedHtml = wrapper.innerHTML
 
 			// Destroy
-			Item.$destroy()
+			Item.unmount()
 			wrapper.remove()
 
 			return renderedHtml
diff --git a/src/utils/IsMobileState.js b/src/utils/IsMobileState.js
deleted file mode 100644
index d4f648757a..0000000000
--- a/src/utils/IsMobileState.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Kristof Hamann, Paul Schwörer
- *
- * @author Kristof Hamann
- * @author Paul Schwörer
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import Vue 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
-		},
-	},
-})
diff --git a/src/utils/ValidateChildren.js b/src/utils/ValidateChildren.js
index 77a8d9ed4e..0a6bf0a2a0 100644
--- a/src/utils/ValidateChildren.js
+++ b/src/utils/ValidateChildren.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
@@ -38,7 +38,7 @@ const ValidateChildren = (vm, allowed) => {
 		// that you import  with import myActionWrapper from 'myActionWrapper'
 		if (!(isChildren || isWrappedChildren)) {
 			// warn
-			Vue.util.warn(`${child.$options.name} is not allowed inside the ${vm.$options.name} component`, vm)
+			warn(`${child.$options.name} is not allowed inside the ${vm.$options.name} component`, vm)
 
 			// cleanup
 			vm.$children.splice(index, 1)
diff --git a/src/utils/ValidateSlot.js b/src/utils/ValidateSlot.js
index a954d9e165..500611f0fb 100644
--- a/src/utils/ValidateSlot.js
+++ b/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
diff --git a/styleguide.config.js b/styleguide.config.js
index fe5b477933..e286fe4670 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -113,107 +113,96 @@ module.exports = async () => {
 					'src/components/NcSelect*/*.vue',
 					'src/components/NcSettings*/*.vue',
 					'src/components/NcUserBubble/NcUserBubbleDiv.vue',
-
-					// Not yet adjusted for vue3
-					'src/components/NcAvatar*/*.vue',
-					'src/components/NcEmptyContent*/*.vue',
-					'src/components/NcHeaderMenu*/*.vue',
-					'src/components/NcModal*/*.vue',
-					'src/components/NcRelatedResourcesPanel*/*.vue',
-					'src/components/NcRichContenteditable*/*.vue',
-					'src/components/NcUserBubble*/*.vue',
-					'src/components/NcVNodes*/*.vue',
 				],
-				// Not yet adjusted for vue3
 				sections: [
-				// 	{
-				// 		name: 'NcActions',
-				// 		components: [
-				// 			// Put Actions component first
-				// 			'src/components/NcActions/*.vue',
-				// 			'src/components/NcAction[A-Z]*/*.vue',
-				// 		],
-				// 	},
-				// 	{
-				// 		name: 'App containers',
-				// 		components: [
-				// 			'src/components/NcContent/*.vue',
-				// 		],
-				// 		sections: [
-				// 			{
-				// 				name: 'NcAppNavigation',
-				// 				components: [
-				// 					'src/components/NcAppNavigation*/*.vue',
-				// 				],
-				// 			},
-				// 			{
-				// 				name: 'NcAppContent',
-				// 				components: [
-				// 					'src/components/NcAppContent*/*.vue',
-				// 				],
-				// 			},
-				// 			{
-				// 				name: 'NcAppSidebar',
-				// 				components: [
-				// 					'src/components/NcAppSidebar*/*.vue',
-				// 				],
-				// 			},
-				// 			{
-				// 				name: 'NcAppSettings',
-				// 				components: [
-				// 					'src/components/NcAppSettings*/*.vue',
-				// 				],
-				// 			},
-				// 		],
-				// 	},
-				// 	{
-				// 		name: 'NcBreadcrumbs',
-				// 		components: [
-				// 			'src/components/NcBreadcrumb*/*.vue',
-				// 		],
-				// 	},
-				// 	{
-				// 		name: 'NcDashboard',
-				// 		components: [
-				// 			'src/components/NcDashboard*/*.vue',
-				// 		],
-				// 	},
+					{
+						name: 'NcActions',
+						components: [
+							// Put Actions component first
+							'src/components/NcActions/*.vue',
+							'src/components/NcAction[A-Z]*/*.vue',
+						],
+					},
+					{
+						name: 'App containers',
+						components: [
+							'src/components/NcContent/*.vue',
+						],
+						sections: [
+							{
+								name: 'NcAppNavigation',
+								components: [
+									'src/components/NcAppNavigation*/*.vue',
+								],
+							},
+							{
+								name: 'NcAppContent',
+								components: [
+									'src/components/NcAppContent*/*.vue',
+								],
+							},
+							{
+								name: 'NcAppSidebar',
+								components: [
+									'src/components/NcAppSidebar*/*.vue',
+								],
+							},
+							{
+								name: 'NcAppSettings',
+								components: [
+									'src/components/NcAppSettings*/*.vue',
+								],
+							},
+						],
+					},
+					{
+						name: 'NcBreadcrumbs',
+						components: [
+							'src/components/NcBreadcrumb*/*.vue',
+						],
+					},
+					{
+						name: 'NcDashboard',
+						components: [
+							'src/components/NcDashboard*/*.vue',
+						],
+					},
 					{
 						name: 'NcFields',
 						components: [
 							'src/components/Nc*Field/*.vue',
 						],
 					},
-				// 	{
-				// 		name: 'NcListItems',
-				// 		components: [
-				// 			'src/components/NcListItem*/*.vue',
-				// 		],
-				// 	},
-				// 	{
-				// 		name: 'NcSelect',
-				// 		components: [
-				// 			'src/components/NcSelect*/*.vue',
-				// 		],
-				// 	},
-				// 	{
-				// 		name: 'NcPickers',
-				// 		components: [
-				// 			'src/components/Nc*Picker*/*.vue',
-				// 		],
-				// 	},
-				// 	{
-				// 		name: 'NcRichText',
-				// 		components: [
-				// 			'src/components/NcRichText/NcRichText.vue',
-				// 		],
-				// 	},
-				// 	{
-				// 		name: 'NcSettings',
-				// 		components: [
-				// 			'src/components/NcSettings*/*.vue',
-				// 		],
-				// 	},
+					{
+						name: 'NcListItems',
+						components: [
+							'src/components/NcListItem*/*.vue',
+						],
+					},
+					{
+						name: 'NcSelect',
+						components: [
+							'src/components/NcSelect*/*.vue',
+						],
+					},
+					{
+						name: 'NcPickers',
+						components: [
+							'src/components/Nc*Picker*/*.vue',
+						],
+					},
+					{
+						name: 'NcRichText',
+						components: [
+							'src/components/NcRichText/NcRichText.vue',
+						],
+					},
+					{
+						name: 'NcSettings',
+						components: [
+							'src/components/NcSettings*/*.vue',
+						],
+					},
 				],
 			},
 		],
diff --git a/tests/unit/components/NcActions/NcActions.spec.js b/tests/unit/components/NcActions/NcActions.spec.js
index f11d0a2516..0881b20f08 100644
--- a/tests/unit/components/NcActions/NcActions.spec.js
+++ b/tests/unit/components/NcActions/NcActions.spec.js
@@ -57,9 +57,11 @@ describe('NcActions.vue', () => {
 							'<NcActionButton>Test1</NcActionButton>',
 						],
 					},
-					stubs: {
-						// used to register custom components
-						NcActionButton,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcActionButton,
+						},
 					},
 				})
 			})
@@ -81,9 +83,11 @@ describe('NcActions.vue', () => {
 							'<NcActionButton>Test2</NcActionButton>',
 						],
 					},
-					stubs: {
-						// used to register custom components
-						NcActionButton,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcActionButton,
+						},
 					},
 				})
 			})
@@ -102,11 +106,13 @@ describe('NcActions.vue', () => {
 							'<NcActionButton>Test3</NcActionButton>',
 						],
 					},
-					stubs: {
-						// used to register custom components
-						NcActionButton,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcActionButton,
+						},
 					},
-					propsData: {
+					props: {
 						inline: 1,
 					},
 				})
diff --git a/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js b/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
index ca252420e7..15eacf2ea7 100644
--- a/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
+++ b/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
@@ -23,13 +23,12 @@
 
 import { mount } from '@vue/test-utils'
 
-import Vue from 'vue'
 import NcAppSidebarTabs from '../../../../src/components/NcAppSidebar/NcAppSidebarTabs.vue'
 import NcAppSidebarTab from '../../../../src/components/NcAppSidebarTab/NcAppSidebarTab.vue'
 import NcActionButton from '../../../../src/components/NcActionButton/NcActionButton.vue'
 
 let onWarning
-let consoleDebug
+let onDebug
 
 let wrapper
 
@@ -39,20 +38,18 @@ describe('NcAppSidebarTabs.vue', () => {
 	'use strict'
 	beforeEach(() => {
 		onWarning = jest.fn()
-		consoleDebug = jest.fn()
-		Vue.config.warnHandler = onWarning
-		global.console = { ...console, debug: consoleDebug }
+		onDebug = jest.fn()
+		global.console = { ...console, debug: onDebug, warn: onWarning }
 	})
 	afterEach(() => {
-		Vue.config.warnHandler = () => null
 		global.console = initialConsole
 	})
 	describe('when using the component without tabs', () => {
 		describe('with only one div', () => {
 			beforeEach(() => {
 				wrapper = mount(NcAppSidebarTabs, {
-					propsData: {
-						name: 'Sidebar name.',
+					props: {
+						title: 'Sidebar name.',
 					},
 					slots: {
 						default: ['<div />'],
@@ -61,7 +58,7 @@ describe('NcAppSidebarTabs.vue', () => {
 			})
 			it('Issues no warning nor logs to console.', () => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
-				expect(consoleDebug).toHaveBeenCalledTimes(0)
+				expect(onDebug).toHaveBeenCalledTimes(0)
 			})
 			it('does not display the tablist element', () => {
 				expect(wrapper.find('div[role="tablist"]').exists()).toBe(false)
@@ -70,16 +67,18 @@ describe('NcAppSidebarTabs.vue', () => {
 		describe('with div and secondary action', () => {
 			beforeEach(() => {
 				wrapper = mount(NcAppSidebarTabs, {
-					propsData: {
-						name: 'Sidebar name.',
+					props: {
+						title: 'Sidebar name.',
 					},
 					slots: {
 						default: '<div />',
 						'secondary-actions': ['<NcActionButton icon="icon-delete">Test</NcActionButton>'],
 					},
-					stubs: {
-						// used to register custom components
-						NcActionButton,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcActionButton,
+						},
 					},
 				})
 			})
@@ -103,9 +102,11 @@ describe('NcAppSidebarTabs.vue', () => {
 							'<nc-app-sidebar-tab id="last" icon="icon-details" name="Tab2">Tab2</nc-app-sidebar-tab>',
 						],
 					},
-					stubs: {
-					// used to register custom components
-						NcAppSidebarTab,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcAppSidebarTab,
+						},
 					},
 					attachTo: document.body,
 				})
@@ -120,29 +121,29 @@ describe('NcAppSidebarTabs.vue', () => {
 				const liList = wrapper.findAll('div[role="tablist"]>.checkbox-radio-switch')
 				expect(liList.length).toEqual(3)
 			})
-			it('emit "update:active" event with the selected tab id when clicking on a tab', () => {
+			it('emit "update:active" event with the selected tab id when clicking on a tab', async () => {
 				const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label')
-				lastLink.trigger('click')
+				await lastLink.trigger('click')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['last'])
 			})
-			it('emit "update:active" event with the first tab id when keydown pageup is pressed', () => {
+			it('emit "update:active" event with the first tab id when keydown pageup is pressed', async () => {
 				const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label')
-				lastLink.trigger('keydown.pageup')
+				await lastLink.trigger('keydown.pageup')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['first'])
 			})
-			it('emit "update:active" event with the last tab id when keydown pagedown is pressed', () => {
+			it('emit "update:active" event with the last tab id when keydown pagedown is pressed', async () => {
 				const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label')
-				lastLink.trigger('keydown.pagedown')
+				await lastLink.trigger('keydown.pagedown')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['last'])
 			})
 			describe('when we select the first element', () => {
 				beforeEach(() => {
 					wrapper.setData({ activeTab: 'first' })
 				})
-				it('does not emit "update:active" event when keydown left is pressed', () => {
+				it('does not emit "update:active" event when keydown left is pressed', async () => {
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 					const firstLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch>label')
-					firstLink.trigger('keydown.left')
+					await firstLink.trigger('keydown.left')
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 				})
 				it('emit "update:active" event with the next tab id when keydown right is pressed', () => {
@@ -155,15 +156,15 @@ describe('NcAppSidebarTabs.vue', () => {
 				beforeEach(() => {
 					wrapper.setData({ activeTab: 'last' })
 				})
-				it('emit "update:active" event with the previous tab id when keydown left is pressed', () => {
+				it('emit "update:active" event with the previous tab id when keydown left is pressed', async () => {
 					const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label')
-					lastLink.trigger('keydown.left')
+					await lastLink.trigger('keydown.left')
 					expect(wrapper.emitted('update:active')[0]).toEqual(['second'])
 				})
-				it('does not emit "update:active" event when keydown right is pressed', () => {
+				it('does not emit "update:active" event when keydown right is pressed', async () => {
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 					const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label')
-					lastLink.trigger('keydown.right')
+					await lastLink.trigger('keydown.right')
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 				})
 			})
@@ -176,9 +177,11 @@ describe('NcAppSidebarTabs.vue', () => {
 							'<nc-app-sidebar-tab id="1" icon="icon-details" name="Tab1">Tab1</nc-app-sidebar-tab>',
 						],
 					},
-					stubs: {
-						// used to register custom components
-						NcAppSidebarTab,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcAppSidebarTab,
+						},
 					},
 				})
 			})
diff --git a/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js b/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js
index 16e49995c8..f3b4c035a5 100644
--- a/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js
+++ b/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js
@@ -13,18 +13,18 @@ Tribute.mockImplementation(() => ({
  * Mount NcRichContentEditable
  *
  * @param {object} options mount options
- * @param {object} options.propsData mount options.propsData
+ * @param {object} options.props mount options.props
  * @param {object} options.listeners mount options.listeners
  * @param {object} options.attrs mount options.attrs
  * @return {object}
  */
-function mountNcRichContenteditable({ propsData, listeners, attrs } = {}) {
-	let currentValue = propsData?.value
+function mountNcRichContenteditable({ props, listeners, attrs } = {}) {
+	let currentValue = props?.value
 
 	const wrapper = mount(NcRichContenteditable, {
-		propsData: {
+		props: {
 			value: currentValue,
-			...propsData,
+			...props,
 		},
 		listeners: {
 			'update:value': ($event) => {
@@ -80,7 +80,7 @@ describe('NcRichContenteditable', () => {
 
 		await inputValue('Test Text')
 
-		await wrapper.trigger('keydown', { keyCode: 13 }) // Enter
+		await wrapper.trigger('keydown.enter') // Enter
 
 		expect(wrapper.emitted('submit')).toBeDefined()
 		expect(wrapper.emitted('submit')).toHaveLength(1)
@@ -91,10 +91,10 @@ describe('NcRichContenteditable', () => {
 
 		await wrapper.trigger('compositionstart')
 		await inputValue('猫')
-		await wrapper.trigger('keydown', { keyCode: 13 }) // Enter
+		await wrapper.trigger('keydown.enter') // Enter
 		await wrapper.trigger('compositionend')
 		await inputValue(' - means "Cat"')
-		await wrapper.trigger('keydown', { keyCode: 13 }) // Enter
+		await wrapper.trigger('keydown.enter') // Enter
 
 		expect(wrapper.emitted('submit')).toBeDefined()
 		expect(wrapper.emitted('submit')).toHaveLength(1)
diff --git a/tests/unit/components/NcRichText/NcRichText.spec.js b/tests/unit/components/NcRichText/NcRichText.spec.js
index 758442811c..180f5cd99d 100644
--- a/tests/unit/components/NcRichText/NcRichText.spec.js
+++ b/tests/unit/components/NcRichText/NcRichText.spec.js
@@ -1,10 +1,12 @@
 import { mount } from '@vue/test-utils'
 import NcRichText from '../../../../src/components/NcRichText/NcRichText.vue'
 
+import { h } from 'vue'
+
 describe('Foo', () => {
 	it('renders a message and responds correctly to props changes', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Test {placeholder}'
 			}
 		})
@@ -15,12 +17,12 @@ describe('Foo', () => {
 	it('properly inserts a child component', async() => {
 		const MyComponent = {
 			name: 'MyComponent',
-			render: (createElement) => {
-				return createElement('div', 'MYCOMPONENT')
+			render: () => {
+				return h('div', 'MYCOMPONENT')
 			}
 		}
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Test {placeholder}',
 				arguments: {
 					placeholder: {
@@ -38,12 +40,12 @@ describe('Foo', () => {
 		const MyComponent = {
 			name: 'MyComponent',
 			props: ['username'],
-			render: (createElement) => {
-				return createElement('div', 'MYCOMPONENT')
+			render: () => {
+				return h('div', 'MYCOMPONENT')
 			}
 		}
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Test {placeholder}',
 				arguments: {
 					placeholder: {
@@ -74,7 +76,7 @@ describe('Foo', () => {
 		['Test {placeholderA} {placeholderA} {placeholderB}', { placeholderA: 'A', placeholderB: 'B' }, 'Test A A B']
 	])('text: %s', (text, attrs, result) => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text,
 				arguments: attrs
 			}
@@ -84,7 +86,7 @@ describe('Foo', () => {
 
 	it('properly inserts a link', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Testwith a link to https://example.com - go visit it',
 				autolink: true
 			}
@@ -96,7 +98,7 @@ describe('Foo', () => {
 
 	it('properly inserts a newline', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Testwith a link to https://example.com \n go visit it',
 				autolink: true
 			}
@@ -109,7 +111,7 @@ describe('Foo', () => {
 
 	it('properly inserts a link with brackets', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Test with a link to (https://example.com) - go visit it',
 				autolink: true
 			}
@@ -120,7 +122,7 @@ describe('Foo', () => {
 
 	it('properly inserts a link containing brackets', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Test with a link to (https://example.com/Link%20(Sub)) - go visit it',
 				autolink: true,
 			}
@@ -131,7 +133,7 @@ describe('Foo', () => {
 
 	it('properly inserts a link containing brackets with markdown', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Test with a link to (https://example.com/Link%20(Sub)) - go visit it',
 				autolink: true,
 				useMarkdown: true,
@@ -143,7 +145,7 @@ describe('Foo', () => {
 
 	it('properly recognizes an url with a custom port and inserts a link', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Testwith a link to https://example.com:444 - go visit it',
 				autolink: true
 			}
@@ -154,7 +156,7 @@ describe('Foo', () => {
 
 	it('properly recognizes an url with an IP address and inserts a link', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: 'Testwith a link to https://127.0.0.1/status.php - go visit it',
 				autolink: true
 			}
@@ -165,7 +167,7 @@ describe('Foo', () => {
 
 	it('properly formats markdown', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: '**Testwith** a link *to* [Link](https://example:1337) - go visit it',
 				autolink: false,
 				useMarkdown: true
@@ -179,7 +181,7 @@ describe('Foo', () => {
 
 	it('formats markdown is disabled', async() => {
 		const wrapper = mount(NcRichText, {
-			propsData: {
+			props: {
 				text: '**Testwith** a ~~link~~ *to* [Link](https://example:1337) - go visit it',
 				autolink: true,
 				useMarkdown: false
diff --git a/tests/unit/mixins/richEditor.spec.js b/tests/unit/mixins/richEditor.spec.js
index 542eb73c33..0eb738c26a 100644
--- a/tests/unit/mixins/richEditor.spec.js
+++ b/tests/unit/mixins/richEditor.spec.js
@@ -23,9 +23,11 @@
 import { shallowMount } from '@vue/test-utils'
 import richEditor from '../../../src/mixins/richEditor/index.js'
 
+import { h } from 'vue'
+
 const TestEditor = {
 	mixins: [richEditor],
-	render: (h) => h('div'),
+	render: () => h('div'),
 }
 
 describe('richEditor.js', () => {
@@ -33,7 +35,7 @@ describe('richEditor.js', () => {
 
 	describe('renderContent', () => {
 		it('sanitizes the input', () => {
-			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const editor = shallowMount(TestEditor, { props: { userData: {} } })
 			const input = 'Some <table>html</table>'
 			const output = editor.vm.renderContent(input)
 
@@ -41,7 +43,7 @@ describe('richEditor.js', () => {
 		})
 
 		it('converts newline to hard line breaks', () => {
-			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const editor = shallowMount(TestEditor, { props: { userData: {} } })
 			const input = 'hard\nbreak'
 			const output = editor.vm.renderContent(input)
 
@@ -49,7 +51,7 @@ describe('richEditor.js', () => {
 		})
 
 		it('no duplicated ampersand (from Linkify)', () => {
-			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const editor = shallowMount(TestEditor, { props: { userData: {} } })
 			const input = 'hello &'
 			const output = editor.vm.renderContent(input)
 
@@ -57,7 +59,7 @@ describe('richEditor.js', () => {
 		})
 
 		it('keeps mentions without user data', () => {
-			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const editor = shallowMount(TestEditor, { props: { userData: {} } })
 			const input = 'hello @foobar'
 			const output = editor.vm.renderContent(input)
 
@@ -66,7 +68,7 @@ describe('richEditor.js', () => {
 
 		it('keeps mentions with user data', () => {
 			const editor = shallowMount(TestEditor, {
-				propsData: {
+				props: {
 					userData: {
 						jdoe: {
 							id: 'jdoe',
@@ -84,7 +86,7 @@ describe('richEditor.js', () => {
 		})
 
 		it('keep mentions with special characters', () => {
-			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const editor = shallowMount(TestEditor, { props: { userData: {} } })
 			const input = 'hello @foo@bar - hello @"bar @ foo"'
 			const output = editor.vm.renderContent(input)
 
diff --git a/vite.config.mts b/vite.config.mts
index e2ec9f9186..b7bfeae71e 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -26,39 +26,29 @@ const entryPoints = {
 		return acc
 	}, {}),
 
-	// while migrating the components this is commented out and only the button is included
-
-	...globSync('src/components/NcButton/index.js').reduce((acc, item) => {
+	...globSync('src/components/*/index.js').reduce((acc, item) => {
 		const name = item
-	 		.replace('/index.js', '')
+			.replace('/index.js', '')
 			.replace('src/components/', 'Components/')
 		acc[name] = join(__dirname, item)
 		return acc
 	}, {}),
 
-	// ...globSync('src/components/*/index.js').reduce((acc, item) => {
-	// 	const name = item
-	// 		.replace('/index.js', '')
-	// 		.replace('src/components/', 'Components/')
-	// 	acc[name] = join(__dirname, item)
-	// 	return acc
-	// }, {}),
-
-	// ...globSync('src/functions/*/index.js').reduce((acc, item) => {
-	// 	const name = item
-	// 		.replace('/index.js', '')
-	// 		.replace('src/functions/', 'Functions/')
-	// 	acc[name] = join(__dirname, item)
-	// 	return acc
-	// }, {}),
+	...globSync('src/functions/*/index.js').reduce((acc, item) => {
+		const name = item
+			.replace('/index.js', '')
+			.replace('src/functions/', 'Functions/')
+		acc[name] = join(__dirname, item)
+		return acc
+	}, {}),
 
-	// ...globSync('src/mixins/*/index.js').reduce((acc, item) => {
-	// 	const name = item
-	// 		.replace('/index.js', '')
-	// 		.replace('src/mixins/', 'Mixins/')
-	// 	acc[name] = join(__dirname, item)
-	// 	return acc
-	// }, {}),
+	...globSync('src/mixins/*/index.js').reduce((acc, item) => {
+		const name = item
+			.replace('/index.js', '')
+			.replace('src/mixins/', 'Mixins/')
+		acc[name] = join(__dirname, item)
+		return acc
+	}, {}),
 
 	index: resolve(__dirname, 'src/index.js'),
 }