diff --git a/package-lock.json b/package-lock.json
index 85940a0..4f0aec0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "3.0.0-dev.0",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
+        "@vue/web-component-wrapper": "^1.3.0",
         "vue": "^2.6.14"
       },
       "devDependencies": {
@@ -3370,6 +3371,12 @@
         }
       }
     },
+    "node_modules/@vue/web-component-wrapper": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
+      "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
+      "license": "MIT"
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
diff --git a/package.json b/package.json
index 433d756..e6847a6 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   },
   "homepage": "https://github.com/nextcloud/flow_notifications#readme",
   "dependencies": {
+    "@vue/web-component-wrapper": "^1.3.0",
     "vue": "^2.6.14"
   },
   "browserslist": [
diff --git a/src/main.js b/src/main.js
index a772921..d5df9ad 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,11 +3,23 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import wrap from '@vue/web-component-wrapper'
+import Vue from 'vue'
+
 import FlowNotify from './views/FlowNotify.vue'
 
+const FlowNotifyComponent = wrap(Vue, FlowNotify)
+const customElementId = 'oca-flow_notifications-operation-flow_notify'
+window.customElements.define(customElementId, FlowNotifyComponent)
+
+// In Vue 2, wrap doesn't support disabling shadow :(
+// Disable with a hack
+Object.defineProperty(FlowNotifyComponent.prototype, 'attachShadow', { value() { return this } })
+Object.defineProperty(FlowNotifyComponent.prototype, 'shadowRoot', { get() { return this } })
+
 window.OCA.WorkflowEngine.registerOperator({
 	id: 'OCA\\FlowNotifications\\Flow\\Operation',
 	color: '#f1d340',
 	operation: '',
-	options: FlowNotify,
+	element: customElementId,
 })
diff --git a/src/views/FlowNotify.vue b/src/views/FlowNotify.vue
index 9741bdb..66632c0 100644
--- a/src/views/FlowNotify.vue
+++ b/src/views/FlowNotify.vue
@@ -4,10 +4,10 @@
 -->
 <template>
 	<div>
-		<input type="text"
+		<input v-model="currentInscription"
+			type="text"
 			maxlength="80"
 			:placeholder="placeholder"
-			:value="currentInscription"
 			@input="emitInput">
 	</div>
 </template>
@@ -18,11 +18,12 @@ export default {
 	name: 'FlowNotify',
 	components: {},
 	props: {
-		value: {
-			default: JSON.stringify({ inscription: '' }),
+		modelValue: {
+			default: '',
 			type: String,
 		},
 	},
+	emits: ['update:model-value'],
 	data() {
 		return {
 			inscription: '',
@@ -31,17 +32,18 @@ export default {
 	},
 	computed: {
 		currentInscription() {
-			if (!this.value) {
+			if (!this.modelValue) {
 				return ''
 			}
-			return JSON.parse(this.value).inscription
+			return JSON.parse(this.modelValue).inscription
 		},
 	},
 	methods: {
 		emitInput(value) {
-			if (value !== null) {
-				this.$emit('input', JSON.stringify({ inscription: value.target.value }))
+			if (value === null) {
+				return
 			}
+			this.$emit('update:model-value', JSON.stringify({ inscription: value.target.value }))
 		},
 	},
 }