diff --git a/.eslintrc.js b/.eslintrc.js
index 14fee57dc4..f155eea6c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,20 +14,6 @@ module.exports = {
 	plugins: [
 		'cypress',
 	],
-	ignorePatterns: [
-		'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/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/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/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
index 725886192f..d03327bbfc 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 bfc8c334ee..daccd0beaa 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 7b04ad02c4..eacfdb8909 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -260,9 +260,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,
@@ -467,14 +465,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 33a3c8183a..ff90fd8df9 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -29,7 +29,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>
@@ -109,6 +109,7 @@ import isMobile from '../../mixins/isMobile/index.js'
 import { t } from '../../l10n.js'
 
 import debounce from 'debounce'
+import { h } from 'vue'
 
 export default {
 
@@ -205,7 +206,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() {
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 085d5655e0..655d272ea1 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 45899ac7bc..793cf7a708 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/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 f2cb596852..405bd6a33c 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/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 a31c4dbbf3..3f3f753b37 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 1b36f78064..4da77ee8e8 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/index.js b/src/components/index.js
index 05a4b25585..9f1a017ebf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -32,31 +32,31 @@ 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 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 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'
@@ -82,9 +82,9 @@ 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'
@@ -94,4 +94,4 @@ export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/index.
 export { default as NcTextArea } from './NcTextArea/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/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 8d27c70f79..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 = /* @__PURE__ */ 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 4f751f809a..52c538f12d 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -116,12 +116,6 @@ module.exports = async () => {
 					'src/components/NcSettings*/*.vue',
 					'src/components/NcTextArea/*.vue',
 					'src/components/NcUserBubble/NcUserBubbleDiv.vue',
-
-					// Not yet adjusted for vue3
-					'src/components/NcRelatedResourcesPanel*/*.vue',
-					'src/components/NcRichContenteditable*/*.vue',
-					'src/components/NcUserBubble*/*.vue',
-					'src/components/NcVNodes*/*.vue',
 				],
 				sections: [
 					{
@@ -132,50 +126,50 @@ module.exports = async () => {
 							'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: '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: 'NcDialog',
 						components: [
@@ -207,13 +201,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/NcAppSidebar/NcAppSidebarTabs.spec.js b/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
index 67927769e1..dfa6cb93a1 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,
+						},
 					},
 				})
 			})
@@ -91,15 +90,11 @@ describe('NcAppSidebarTabs.vue', () => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
 			})
 		})
-
-		it('does not display the tablist element', () => {
-			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 +102,11 @@ describe('NcAppSidebarTabs.vue', () => {
 							'<nc-app-sidebar-tab id="last" icon="icon-details" name="Tab2">Tab2</nc-app-sidebar-tab>',
 						],
 					},
-					stubs: {
-					// used to register custom components
-						NcAppSidebarTab,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcAppSidebarTab,
+						},
 					},
 					attachTo: document.body,
 				})
@@ -124,29 +121,29 @@ describe('NcAppSidebarTabs.vue', () => {
 				const liList = wrapper.findAll('div[role="tablist"]>.checkbox-radio-switch')
 				expect(liList.length).toEqual(3)
 			})
-			it('emit "update:active" event with the selected tab id when clicking on a tab', ({ 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"]>button.checkbox-radio-switch:last-of-type')
-				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"]>button.checkbox-radio-switch:last-of-type')
-				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"]>button.checkbox-radio-switch:last-of-type')
-				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"]>button.checkbox-radio-switch')
-					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 +156,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"]>button.checkbox-radio-switch:last-of-type')
-					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"]>button.checkbox-radio-switch:last-of-type')
-					lastLink.trigger('keydown.right')
+					await lastLink.trigger('keydown.right')
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 				})
 			})
@@ -180,9 +177,11 @@ describe('NcAppSidebarTabs.vue', () => {
 							'<nc-app-sidebar-tab id="1" icon="icon-details" name="Tab1">Tab1</nc-app-sidebar-tab>',
 						],
 					},
-					stubs: {
-						// used to register custom components
-						NcAppSidebarTab,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcAppSidebarTab,
+						},
 					},
 				})
 			})
diff --git a/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js b/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js
index 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 8cdd0a2db0..968c08f1c6 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,14 +84,6 @@ const overrides = defineConfig({
 	test: {
 		environment: 'jsdom',
 		setupFiles: resolve(__dirname, './tests/setup.js'),
-		exclude:[
-			...configDefaults.exclude,
-			'./tests/unit/components/NcAppNavigation',
-			'./tests/unit/components/NcAppSidebar',
-			'./tests/unit/components/NcRichContenteditable',
-			'./tests/unit/components/NcRichText',
-			'./tests/unit/mixins/*',
-		],
 	},
 })