From 487b8f8caf4c0e2eecf935c3cfbc0371ee7dff6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sat, 2 Apr 2022 17:44:26 +0200
Subject: [PATCH] Migrate to vue 3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .eslintrc.js                                  |  18 --
 cypress/component/modal.cy.ts                 |  11 +-
 cypress/component/richtext.cy.ts              |  82 +++----
 .../NcActionInput/NcActionInput.vue           |  20 +-
 .../NcActionRouter/NcActionRouter.vue         |  10 +-
 src/components/NcActions/NcActions.vue        | 229 ++++++++----------
 src/components/NcAppContent/NcAppContent.vue  |   2 +-
 .../NcAppContent/NcAppDetailsToggle.vue       |   2 +-
 .../NcAppNavigation/NcAppNavigation.vue       |   9 +-
 .../NcAppNavigationCaption.vue                |   5 +-
 .../NcAppNavigationItem.vue                   |  12 +-
 .../NcAppNavigationSettings.vue               |   6 +-
 .../NcAppSettingsDialog.vue                   |  13 +-
 src/components/NcAppSidebar/NcAppSidebar.vue  |  57 +++--
 .../NcAppSidebar/NcAppSidebarTabs.vue         |   6 +-
 .../NcAppSidebarTab/NcAppSidebarTab.vue       |   6 +-
 src/components/NcAvatar/NcAvatar.vue          |   2 +-
 src/components/NcBreadcrumb/NcBreadcrumb.vue  |  19 +-
 .../NcBreadcrumbs/NcBreadcrumbs.vue           | 179 ++++++--------
 src/components/NcContent/NcContent.vue        |  35 ++-
 src/components/NcHeaderMenu/NcHeaderMenu.vue  |   2 +-
 src/components/NcListItem/NcListItem.vue      |  13 +-
 src/components/NcModal/NcModal.vue            |  44 ++--
 .../NcRichContenteditable.vue                 |  10 +-
 .../NcCustomPickerElement.vue                 |   2 +-
 .../NcReferencePicker/NcRawLinkInput.vue      |   4 +-
 .../NcRichText/NcReferencePicker/NcSearch.vue |   2 +-
 .../NcReferencePicker/referencePickerModal.js |  14 +-
 .../NcRichText/NcReferenceWidget.vue          |   2 +-
 src/components/NcRichText/NcRichText.vue      |  35 +--
 src/components/NcRichText/autolink.js         |  13 +-
 src/components/NcRichText/placeholder.js      |   2 +-
 src/components/NcUserBubble/NcUserBubble.vue  |   5 +-
 src/components/NcVNodes/NcVNodes.vue          |   5 +-
 src/components/index.js                       |  82 +++----
 src/index.js                                  |   5 +-
 src/mixins/actionGlobal.js                    |   8 +-
 src/mixins/isFullscreen/index.js              |  28 +--
 src/mixins/isMobile/index.js                  |  25 +-
 src/mixins/richEditor/index.js                |  11 +-
 src/utils/IsMobileState.js                    |  49 ----
 src/utils/ValidateChildren.js                 |   4 +-
 src/utils/ValidateSlot.js                     |   4 +-
 styleguide.config.js                          | 131 +++++-----
 .../components/NcActions/NcActions.spec.js    |  26 +-
 .../NcAppSidebar/NcAppSidebarTabs.spec.js     |  71 +++---
 .../NcRichContenteditable.spec.js             |  46 ++--
 .../components/NcRichText/NcRichText.spec.js  |  38 +--
 tests/unit/mixins/richEditor.spec.js          |  17 +-
 vite.config.mts                               |  53 ++--
 50 files changed, 639 insertions(+), 835 deletions(-)
 delete mode 100644 src/utils/IsMobileState.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 6b51eae605..f155eea6c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,24 +14,6 @@ module.exports = {
 	plugins: [
 		'cypress',
 	],
-	ignorePatterns: [
-		'src/components/NcAction*/*.vue',
-		'src/components/NcAppContent*/*.vue',
-		'src/components/NcAppNavigation*/*.vue',
-		'src/components/NcAppSettings*/*.vue',
-		'src/components/NcAppSidebar*/*.vue',
-		'src/components/NcBreadcrumb*/*.vue',
-		'src/components/NcContent/*.vue',
-		'src/components/NcDashboard*/*.vue',
-		'src/components/NcAvatar*/*.vue',
-		'src/components/NcHeaderMenu*/*.vue',
-		'src/components/NcModal*/*.vue',
-		'src/components/NcRelatedResourcesPanel*/*.vue',
-		'src/components/NcRich*/**/*.vue',
-		'src/components/NcUserBubble*/*.vue',
-		'src/components/NcVNodes*/*.vue',
-		'src/utils/IsMobileState.js',
-	],
 	parserOptions: {
 		babelOptions: {
 			plugins: [
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 28ae7e6f77..9a156b91bb 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', () => {
@@ -9,7 +9,7 @@ describe('NcRichText', () => {
 		describe('normal text', () => {
 			it('XML-like text (escaped and unescaped)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '<span>text&lt;/span&gt;',
 						useMarkdown: true,
 					},
@@ -31,7 +31,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -44,7 +44,7 @@ describe('NcRichText', () => {
 
 			it('ignored heading (with hash (#) syntax padded to the text)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '#heading',
 						useMarkdown: true,
 					},
@@ -55,7 +55,7 @@ describe('NcRichText', () => {
 
 			it('heading 1 (with equal (=) syntax on the next line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'heading 1\n==',
 						useMarkdown: true,
 					},
@@ -66,7 +66,7 @@ describe('NcRichText', () => {
 
 			it('heading 2 (with dash (-) syntax on the next line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'heading 2\n--',
 						useMarkdown: true,
 					},
@@ -79,7 +79,7 @@ describe('NcRichText', () => {
 		describe('bold text', () => {
 			it('bold text (single with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '**bold asterisk**',
 						useMarkdown: true,
 					},
@@ -90,7 +90,7 @@ describe('NcRichText', () => {
 
 			it('bold text (single with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '__bold underscore__',
 						useMarkdown: true,
 					},
@@ -102,7 +102,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,
 					},
@@ -116,7 +116,7 @@ describe('NcRichText', () => {
 
 			it('bold text (between normal texts with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text**bold**text',
 						useMarkdown: true,
 					},
@@ -127,7 +127,7 @@ describe('NcRichText', () => {
 
 			it('ignored bold text (between normal texts with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text__bold__text',
 						useMarkdown: true,
 					},
@@ -139,7 +139,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,
 					},
@@ -155,7 +155,7 @@ describe('NcRichText', () => {
 		describe('italic text', () => {
 			it('italic text (single with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '*italic asterisk*',
 						useMarkdown: true,
 					},
@@ -166,7 +166,7 @@ describe('NcRichText', () => {
 
 			it('italic text (single with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '_italic underscore_',
 						useMarkdown: true,
 					},
@@ -178,7 +178,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,
 					},
@@ -192,7 +192,7 @@ describe('NcRichText', () => {
 
 			it('italic text (between normal texts with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text*italic*text',
 						useMarkdown: true,
 					},
@@ -203,7 +203,7 @@ describe('NcRichText', () => {
 
 			it('ignored italic text (between normal texts with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text_italic_text',
 						useMarkdown: true,
 					},
@@ -215,7 +215,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,
 					},
@@ -231,7 +231,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,
 					},
@@ -242,7 +242,7 @@ describe('NcRichText', () => {
 
 			it('inline code (single with double backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text ``inline code`` normal text',
 						useMarkdown: true,
 					},
@@ -253,7 +253,7 @@ describe('NcRichText', () => {
 
 			it('inline code (single with triple backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text ```inline code``` normal text',
 						useMarkdown: true,
 					},
@@ -265,7 +265,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,
 					},
@@ -279,7 +279,7 @@ describe('NcRichText', () => {
 
 			it('inline code (between normal texts)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text`inline code`text',
 						useMarkdown: true,
 					},
@@ -290,7 +290,7 @@ describe('NcRichText', () => {
 
 			it('inline code (with ignored bold, italic, XML-like syntax))', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '`inline code **bold text** _italic text_ <span>text&lt;/span&gt;`',
 						useMarkdown: true,
 					},
@@ -303,7 +303,7 @@ describe('NcRichText', () => {
 		describe('multiline code', () => {
 			it('multiline code (with triple backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\nmultiline code\n```',
 						useMarkdown: true,
 					},
@@ -314,7 +314,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (ignored info)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```vue\nmultiline code\n```',
 						useMarkdown: true,
 					},
@@ -325,7 +325,7 @@ describe('NcRichText', () => {
 
 			it('empty multiline code', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '``````',
 						useMarkdown: true,
 					},
@@ -336,7 +336,7 @@ describe('NcRichText', () => {
 
 			it('empty multiline code (with new line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\n```',
 						useMarkdown: true,
 					},
@@ -347,7 +347,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (with several lines)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\nline 1\nline 2\nline 3\n```',
 						useMarkdown: true,
 					},
@@ -359,7 +359,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (with ignored bold, italic, inline code, XML-like syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\n**bold text**\n_italic text_\n`inline code`\n<span>text&lt;/span&gt;\n```',
 						useMarkdown: true,
 					},
@@ -372,7 +372,7 @@ describe('NcRichText', () => {
 		describe('blockquote', () => {
 			it('blockquote (with greater then (>) syntax - normal)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> blockquote',
 						useMarkdown: true,
 					},
@@ -383,7 +383,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with greater then (&gt;) syntax - escaped)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '&gt; blockquote',
 						useMarkdown: true,
 					},
@@ -394,7 +394,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,
 					},
@@ -408,7 +408,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with several lines)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> line 1\nline 2\n line 3',
 						useMarkdown: true,
 					},
@@ -419,7 +419,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,
 					},
@@ -430,7 +430,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with several paragraphs)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> line 1\n>\n> line 3',
 						useMarkdown: true,
 					},
@@ -441,7 +441,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with nested blockquote)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> blockquote\n>\n>> nested blockquote',
 						useMarkdown: true,
 					},
@@ -460,7 +460,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -481,7 +481,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -502,7 +502,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -518,7 +518,7 @@ describe('NcRichText', () => {
 		describe('dividers', () => {
 			it('dividers (with different syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '***\n---\n___',
 						useMarkdown: true,
 					},
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index fa2033343c..ccac48f69c 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 dbc3651ed5..b53aa3db25 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -92,6 +92,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: {
@@ -101,12 +104,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 c37dbff266..0064f07b64 100644
--- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
+++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -91,8 +91,7 @@
 		<!-- Actions -->
 		<div v-if="hasActions"
 			class="app-navigation-caption__actions">
-			<NcActions v-bind="$attrs"
-				v-on="$listeners">
+			<NcActions v-bind="$attrs">
 				<!-- @slot Slot for the actions menu -->
 				<slot name="actions" />
 				<template #icon>
@@ -132,7 +131,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 488506991d..686eaa1e3a 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 f6baa13201..b413ba0a38 100644
--- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue
+++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -36,8 +36,8 @@
 			@keydown.tab.exact.prevent.stop="focusActiveTabContent"
 			@keydown.home.exact.prevent.stop="focusFirstTab"
 			@keydown.end.exact.prevent.stop="focusLastTab"
-			@keydown.33.exact.prevent.stop="focusFirstTab"
-			@keydown.34.exact.prevent.stop="focusLastTab">
+			@keydown.page-up.exact.prevent.stop="focusFirstTab"
+			@keydown.page-down.exact.prevent.stop="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 e88c402c14..59435f5f27 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/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/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index a20a5c193a..780906e419 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -215,7 +215,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/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index 62c8bbb4c7..15735e5625 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"
@@ -79,10 +79,10 @@ export default {
 			<div class="modal__content">
 				<h2>Please enter your name</h2>
 				<div class="form-group">
-					<NcTextField label="First Name" :value.sync="firstName" />
+					<NcTextField label="First Name" v-model:value="firstName" />
 				</div>
 				<div class="form-group">
-					<NcTextField label="Last Name" :value.sync="lastName" />
+					<NcTextField label="Last Name" v-model:value="lastName" />
 				</div>
 				<div class="form-group">
 					<label for="pizza">What is the most important pizza item?</label>
@@ -198,7 +198,7 @@ export default {
 </docs>
 
 <template>
-	<transition name="fade"
+	<Transition name="fade"
 		appear
 		@after-enter="useFocusTrap"
 		@before-leave="clearFocusTrap">
@@ -213,7 +213,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"
@@ -272,10 +272,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}`,
@@ -284,7 +284,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"
@@ -297,7 +297,7 @@ export default {
 								<ChevronLeft :size="40" />
 							</template>
 						</NcButton>
-					</transition>
+					</Transition>
 
 					<!-- Content -->
 					<div :id="'modal-description-' + randId" class="modal-container">
@@ -318,7 +318,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"
@@ -331,11 +331,11 @@ export default {
 								<ChevronRight :size="40" />
 							</template>
 						</NcButton>
-					</transition>
+					</Transition>
 				</div>
-			</transition>
+			</Transition>
 		</div>
-	</transition>
+	</Transition>
 </template>
 
 <script>
@@ -588,7 +588,7 @@ export default {
 	beforeMount() {
 		window.addEventListener('keydown', this.handleKeydown)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('keydown', this.handleKeydown)
 		this.mc.stop()
 	},
@@ -602,14 +602,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()
 	},
@@ -1053,12 +1053,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;
@@ -1071,9 +1071,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 66641d4f5f..44f40c80cb 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -33,7 +33,7 @@ Try mentioning user @Test01 or inserting emoji :smile
 <template>
 	<div>
 		<NcRichContenteditable
-			:value.sync="message"
+			v-model:value="message"
 			:auto-complete="autoComplete"
 			:maxlength="100"
 			:user-data="userData"
@@ -41,7 +41,7 @@ Try mentioning user @Test01 or inserting emoji :smile
 		<br>
 
 		<NcRichContenteditable
-			:value.sync="message"
+			v-model:value="message"
 			:auto-complete="autoComplete"
 			:maxlength="400"
 			:multiline="true"
@@ -226,7 +226,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"
@@ -507,7 +507,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
 		},
@@ -559,7 +559,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 cca5629da3..3539b61466 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 1ba2bcce3a..3732611117 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 ebc12d83d4..f5937ed01a 100644
--- a/src/components/NcRichText/NcRichText.vue
+++ b/src/components/NcRichText/NcRichText.vue
@@ -29,8 +29,8 @@ This component displays rich text with optional autolink or [Markdown support](h
 <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
 			:class="{'plain-text': !useMarkdown }"
@@ -244,6 +244,7 @@ import breaks from 'remark-breaks'
 import remark2rehype from 'remark-rehype'
 import rehype2react from 'rehype-react'
 import rehypeExternalLinks from 'rehype-external-links'
+import { h, resolveComponent } from 'vue'
 
 export default {
 	name: 'NcRichText',
@@ -304,7 +305,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)
@@ -317,8 +318,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',
 					})
 				}
@@ -331,12 +332,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, {
@@ -366,23 +367,23 @@ export default {
 						)
 
 						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,
@@ -402,16 +403,16 @@ 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() {
 		return this.useMarkdown
-			? this.renderMarkdown(h)
-			: this.renderPlaintext(h)
+			? this.renderMarkdown()
+			: this.renderPlaintext()
 	},
 }
 </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 accc69048c..d739c9dc64 100644
--- a/src/components/NcRichText/placeholder.js
+++ b/src/components/NcRichText/placeholder.js
@@ -44,7 +44,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/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 34942d216e..669652daf1 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -20,44 +20,43 @@
  *
  */
 
-// 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'
 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 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'
@@ -67,24 +66,23 @@ export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/inde
 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 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'
@@ -93,4 +91,4 @@ export { default as NcSettingsSection } from './NcSettingsSection/index.js'
 export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/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 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 e9a0328814..e286fe4670 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -113,70 +113,60 @@ 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/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: [
@@ -186,8 +176,7 @@ module.exports = async () => {
 					{
 						name: 'NcListItems',
 						components: [
-							//'src/components/NcListItem*/*.vue',
-							'src/components/NcListItemIcon/*.vue',
+							'src/components/NcListItem*/*.vue',
 						],
 					},
 					{
@@ -202,13 +191,13 @@ module.exports = async () => {
 							'src/components/Nc*Picker*/*.vue',
 						],
 					},
-				// 	{
-				// 		name: 'NcRichText',
-				// 		components: [
-				// 			'src/components/NcRichText/NcRichText.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 45b45b4c71..09584e8375 100644
--- a/tests/unit/components/NcActions/NcActions.spec.js
+++ b/tests/unit/components/NcActions/NcActions.spec.js
@@ -58,9 +58,11 @@ describe('NcActions.vue', () => {
 							'<NcActionButton>Test1</NcActionButton>',
 						],
 					},
-					stubs: {
-						// used to register custom components
-						NcActionButton,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcActionButton,
+						},
 					},
 				})
 			})
@@ -82,9 +84,11 @@ describe('NcActions.vue', () => {
 							'<NcActionButton>Test2</NcActionButton>',
 						],
 					},
-					stubs: {
-						// used to register custom components
-						NcActionButton,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcActionButton,
+						},
 					},
 				})
 			})
@@ -103,11 +107,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 7357a68d69..d57a25dcfd 100644
--- a/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
+++ b/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
@@ -24,7 +24,6 @@
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-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'
@@ -36,13 +35,11 @@ describe('NcAppSidebarTabs.vue', () => {
 
 	beforeEach((ctx) => {
 		ctx.onWarning = vi.fn()
-		ctx.consoleDebug = vi.fn()
-		Vue.config.warnHandler = ctx.onWarning
-		global.console = { ...console, debug: ctx.consoleDebug }
+		ctx.onDebug = vi.fn()
+		global.console = { ...console, debug: ctx.onDebug, warn: ctx.onWarning }
 	})
 
 	afterEach(() => {
-		Vue.config.warnHandler = () => null
 		global.console = initialConsole
 	})
 
@@ -50,7 +47,7 @@ describe('NcAppSidebarTabs.vue', () => {
 		describe('with only one div', () => {
 			beforeEach((ctx) => {
 				ctx.wrapper = mount(NcAppSidebarTabs, {
-					propsData: {
+					props: {
 						name: 'Sidebar name.',
 					},
 					slots: {
@@ -59,12 +56,12 @@ describe('NcAppSidebarTabs.vue', () => {
 				})
 			})
 
-			it('does not display the nav element', ({wrapper}) => {
+			it('does not display the nav element', ({ wrapper }) => {
 				expect(wrapper.find('nav').exists()).toBe(false)
 			})
-			it('Issues no warning nor logs to console.', ({ consoleDebug, onWarning }) => {
+			it('Issues no warning nor logs to console.', ({ onDebug, onWarning }) => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
-				expect(consoleDebug).toHaveBeenCalledTimes(0)
+				expect(onDebug).toHaveBeenCalledTimes(0)
 			})
 			it('does not display the tablist element', ({ wrapper }) => {
 				expect(wrapper.find('div[role="tablist"]').exists()).toBe(false)
@@ -74,16 +71,18 @@ describe('NcAppSidebarTabs.vue', () => {
 		describe('with div and secondary action', () => {
 			beforeEach((ctx) => {
 				ctx.wrapper = mount(NcAppSidebarTabs, {
-					propsData: {
+					props: {
 						name: '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,
+						},
 					},
 				})
 			})
@@ -92,14 +91,14 @@ describe('NcAppSidebarTabs.vue', () => {
 			})
 		})
 
-		it('does not display the tablist element', () => {
+		it('does not display the tablist element', ({ wrapper }) => {
 			expect(wrapper.find('div[role="tablist"]').exists()).toBe(false)
 		})
 	})
 	describe('when only children of type AppSidebarTab is used', () => {
 		describe('when 3 children of type AppSidebarTab are used', () => {
-			beforeEach(() => {
-				wrapper = mount(NcAppSidebarTabs, {
+			beforeEach((ctx) => {
+				ctx.wrapper = mount(NcAppSidebarTabs, {
 					slots: {
 						default: [
 							'<nc-app-sidebar-tab id="first" icon="icon-details" name="Tab1">Tab1</nc-app-sidebar-tab>',
@@ -107,9 +106,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,
 				})
@@ -124,29 +125,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', ({ wrapper }) => {
+			it('emit "update:active" event with the selected tab id when clicking on a tab', async ({ wrapper }) => {
 				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', ({ wrapper }) => {
+			it('emit "update:active" event with the first tab id when keydown pageup is pressed', async ({ wrapper }) => {
 				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', ({ wrapper }) => {
+			it('emit "update:active" event with the last tab id when keydown pagedown is pressed', async ({ wrapper }) => {
 				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((ctx) => {
 					ctx.wrapper.setData({ activeTab: 'first' })
 				})
-				it('does not emit "update:active" event when keydown left is pressed', ({ wrapper }) => {
+				it('does not emit "update:active" event when keydown left is pressed', async ({ wrapper }) => {
 					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', ({ wrapper }) => {
@@ -159,15 +160,15 @@ describe('NcAppSidebarTabs.vue', () => {
 				beforeEach((ctx) => {
 					ctx.wrapper.setData({ activeTab: 'last' })
 				})
-				it('emit "update:active" event with the previous tab id when keydown left is pressed', ({ wrapper }) => {
+				it('emit "update:active" event with the previous tab id when keydown left is pressed', async ({ wrapper }) => {
 					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', ({ wrapper }) => {
+				it('does not emit "update:active" event when keydown right is pressed', async ({ wrapper }) => {
 					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()
 				})
 			})
@@ -180,9 +181,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 e88e8ee38f..df00a963d6 100644
--- a/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js
+++ b/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js
@@ -1,40 +1,36 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import NcRichContenteditable from '../../../../src/components/NcRichContenteditable/NcRichContenteditable.vue'
 import Tribute from 'tributejs/dist/tribute.esm.js'
 
 // FIXME: find a way to use Tribute in JSDOM or test with e2e
-jest.mock('tributejs/dist/tribute.esm.js')
+vi.mock('tributejs/dist/tribute.esm.js')
 Tribute.mockImplementation(() => ({
-	attach: jest.fn(),
-	detach: jest.fn(),
+	attach: vi.fn(),
+	detach: vi.fn(),
 }))
 
 /**
  * Mount NcRichContentEditable
  *
  * @param {object} options mount options
- * @param {object} options.propsData mount options.propsData
- * @param {object} options.listeners mount options.listeners
+ * @param {object} options.props mount options.props
  * @param {object} options.attrs mount options.attrs
  * @return {object}
  */
-function mountNcRichContenteditable({ propsData, listeners, attrs } = {}) {
-	let currentValue = propsData?.value
+function mountNcRichContenteditable({ props, attrs } = {}) {
+	let currentValue = props?.value
 
 	const wrapper = mount(NcRichContenteditable, {
-		propsData: {
+		props: {
 			value: currentValue,
-			...propsData,
+			...props,
 		},
-		listeners: {
+		attrs: {
 			'update:value': ($event) => {
 				currentValue = $event
 				wrapper.setProps({ value: $event })
 			},
-			...listeners,
-		},
-		attrs: {
 			...attrs,
 		},
 		attachTo: document.body,
@@ -81,7 +77,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)
@@ -92,10 +88,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)
@@ -103,27 +99,27 @@ describe('NcRichContenteditable', () => {
 
 	it('should proxy component events listeners to native event handlers', async () => {
 		const handlers = {
-			focus: jest.fn(),
-			paste: jest.fn(),
-			blur: jest.fn(),
+			onFocus: vi.fn(),
+			onPaste: vi.fn(),
+			onBlur: vi.fn(),
 		}
 		const { wrapper } = mountNcRichContenteditable({
-			listeners: handlers,
+			attrs: handlers,
 		})
 
 		await wrapper.trigger('focus')
 		await wrapper.trigger('paste', { clipboardData: { getData: () => 'PASTED_TEXT', files: [], items: {} } })
 		await wrapper.trigger('blur')
 
-		expect(handlers.focus).toHaveBeenCalledTimes(1)
-		expect(handlers.paste).toHaveBeenCalledTimes(1)
-		expect(handlers.blur).toHaveBeenCalledTimes(1)
+		expect(handlers.onFocus).toHaveBeenCalledTimes(1)
+		expect(handlers.onPaste).toHaveBeenCalledTimes(1)
+		expect(handlers.onBlur).toHaveBeenCalledTimes(1)
 	})
 
 	it('should has accessible placeholder from placeholder prop', async () => {
 		const PLACEHOLDER = 'TEST_PLACEHOLDER'
 		const { wrapper } = mountNcRichContenteditable({
-			propsData: {
+			props: {
 				placeholder: PLACEHOLDER,
 			},
 		})
diff --git a/tests/unit/components/NcRichText/NcRichText.spec.js b/tests/unit/components/NcRichText/NcRichText.spec.js
index b185586453..25edeb4dfe 100644
--- a/tests/unit/components/NcRichText/NcRichText.spec.js
+++ b/tests/unit/components/NcRichText/NcRichText.spec.js
@@ -2,10 +2,12 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 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}'
 			}
 		})
@@ -16,12 +18,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: {
@@ -39,12 +41,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: {
@@ -61,7 +63,7 @@ describe('Foo', () => {
 		expect(wrapper.findComponent(MyComponent).exists()).toBe(true)
 		expect(wrapper.findComponent(MyComponent).vm.username).toBe('Jane')
 	})
-	test.each([
+	it.each([
 		['Fallback {placeholder}', {}, 'Fallback {placeholder}'],
 		['{placeholder} fallback', {}, '{placeholder} fallback'],
 		['Test {placeholder} {placeholder}', {}, 'Test {placeholder} {placeholder}'],
@@ -75,7 +77,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
 			}
@@ -85,7 +87,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
 			}
@@ -97,7 +99,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
 			}
@@ -110,7 +112,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
 			}
@@ -121,7 +123,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,
 			}
@@ -132,7 +134,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,
@@ -144,7 +146,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
 			}
@@ -155,7 +157,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
 			}
@@ -166,7 +168,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
@@ -180,7 +182,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..9d427359b7 100644
--- a/tests/unit/mixins/richEditor.spec.js
+++ b/tests/unit/mixins/richEditor.spec.js
@@ -21,11 +21,14 @@
  */
 
 import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
 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 +36,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 +44,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 +52,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 +60,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 +69,7 @@ describe('richEditor.js', () => {
 
 		it('keeps mentions with user data', () => {
 			const editor = shallowMount(TestEditor, {
-				propsData: {
+				props: {
 					userData: {
 						jdoe: {
 							id: 'jdoe',
@@ -84,7 +87,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 ec01a07943..9ab53b983d 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -3,7 +3,6 @@ import { createLibConfig } from '@nextcloud/vite-config'
 import { globSync } from 'glob'
 import { join, resolve } from 'node:path'
 import { defineConfig } from 'vite'
-import { configDefaults } from 'vitest/config'
 
 import md5 from 'md5'
 import * as url from 'url'
@@ -27,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'),
 }
@@ -95,16 +84,6 @@ const overrides = defineConfig({
 	test: {
 		environment: 'happy-dom',
 		setupFiles: resolve(__dirname, './tests/setup.js'),
-		exclude:[
-			...configDefaults.exclude,
-			'./tests/unit/components/NcActions',
-			'./tests/unit/components/NcAppNavigation',
-			'./tests/unit/components/NcAppSidebar',
-			'./tests/unit/components/NcModal',
-			'./tests/unit/components/NcRichContenteditable',
-			'./tests/unit/components/NcRichText',
-			'./tests/unit/mixins/*',
-		],
 	},
 })