diff --git a/.eslintrc.js b/.eslintrc.js
index a9ddb93bfd..f155eea6c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,10 +14,6 @@ module.exports = {
 	plugins: [
 		'cypress',
 	],
-	ignorePatterns: [
-		'src/components/NcDashboard*/*.vue',
-		'src/components/NcRich*/**/*.vue',
-	],
 	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/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index d95a70de62..36945b2ea8 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"
@@ -225,7 +225,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/index.js b/src/components/index.js
index bad8dfbe19..9f1a017ebf 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -55,8 +55,8 @@ export { default as NcCheckboxRadioSwitch } from './NcCheckboxRadioSwitch/index.
 export { default as NcColorPicker } from './NcColorPicker/index.js'
 export { default as NcContent } from './NcContent/index.js'
 export { default as NcCounterBubble } from './NcCounterBubble/index.js'
-// export { default as NcDashboardWidget } from './NcDashboardWidget/index.js'
-// export { default as NcDashboardWidgetItem } from './NcDashboardWidgetItem/index.js'
+export { default as NcDashboardWidget } from './NcDashboardWidget/index.js'
+export { default as NcDashboardWidgetItem } from './NcDashboardWidgetItem/index.js'
 export { default as NcDateTime } from './NcDateTime/index.js'
 export { default as NcDateTimePicker } from './NcDateTimePicker/index.js'
 export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/index.js'
@@ -83,8 +83,8 @@ 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 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'
diff --git a/src/index.js b/src/index.js
index dd1a03910d..c396fce45b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,9 +23,8 @@
 export * from './components/index.js'
 
 export * from './composables/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/index.js b/src/mixins/index.js
index 41412b1870..6715b7dc80 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -21,5 +21,5 @@
  */
 
 export { default as clickOutsideOptions } from './clickOutsideOptions/index.js'
-// export { default as richEditor } from './richEditor/index.js'
+export { default as richEditor } from './richEditor/index.js'
 export { default as userStatus } from './userStatus.js'
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/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 23f074a9a0..3687922865 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -117,9 +117,6 @@ module.exports = async () => {
 					'src/components/NcTextArea/*.vue',
 					'src/components/NcUserBubble/NcUserBubbleDiv.vue',
 					'src/components/NcVNodes*/*.vue',
-
-					// Not yet adjusted for vue3
-					'src/components/NcRichContenteditable*/*.vue',
 				],
 				sections: [
 					{
@@ -168,12 +165,12 @@ module.exports = async () => {
 							'src/components/NcBreadcrumb*/*.vue',
 						],
 					},
-				// 	{
-				// 		name: 'NcDashboard',
-				// 		components: [
-				// 			'src/components/NcDashboard*/*.vue',
-				// 		],
-				// 	},
+					{
+						name: 'NcDashboard',
+						components: [
+							'src/components/NcDashboard*/*.vue',
+						],
+					},
 					{
 						name: 'NcDialog',
 						components: [
@@ -205,13 +202,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/NcRichContenteditable/NcRichContenteditable.spec.js b/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js
index e68f463e1c..167a6cdda4 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 0186243d8b..d4dab117d2 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
+	}, {}),
 
 	...globSync('src/composables/*/index.js').reduce((acc, item) => {
 		const name = item
@@ -103,12 +92,6 @@ const overrides = defineConfig({
 	test: {
 		environment: 'jsdom',
 		setupFiles: resolve(__dirname, './tests/setup.js'),
-		exclude:[
-			...configDefaults.exclude,
-			'./tests/unit/components/NcRichContenteditable',
-			'./tests/unit/components/NcRichText',
-			'./tests/unit/mixins/*',
-		],
 	},
 })