diff --git a/src/client/components/page/page.if.vue b/src/client/components/page/page.if.vue
index 50c28ec34f..64081d5b5d 100644
--- a/src/client/components/page/page.if.vue
+++ b/src/client/components/page/page.if.vue
@@ -5,9 +5,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 
 export default defineComponent({
+	components: {
+		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+	},
 	props: {
 		value: {
 			required: true
@@ -22,8 +25,5 @@ export default defineComponent({
 			required: true
 		}
 	},
-	beforeCreate() {
-		this.$options.components.XBlock = require('./page.block.vue').default;
-	},
 });
 </script>
diff --git a/src/client/components/page/page.section.vue b/src/client/components/page/page.section.vue
index d31610bc87..9f05f3a0ce 100644
--- a/src/client/components/page/page.section.vue
+++ b/src/client/components/page/page.section.vue
@@ -9,10 +9,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import * as os from '@/os';
 
 export default defineComponent({
+	components: {
+		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+	},
 	props: {
 		value: {
 			required: true
@@ -27,9 +30,6 @@ export default defineComponent({
 			required: true
 		}
 	},
-	beforeCreate() {
-		this.$options.components.XBlock = require('./page.block.vue').default;
-	},
 });
 </script>
 
diff --git a/src/client/pages/page-editor/els/page-editor.el.if.vue b/src/client/pages/page-editor/els/page-editor.el.if.vue
index 415c5ff4c0..2f1213853d 100644
--- a/src/client/pages/page-editor/els/page-editor.el.if.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.if.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
@@ -34,7 +34,8 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XContainer, MkSelect
+		XContainer, MkSelect,
+		XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
 	},
 
 	inject: ['getPageBlockList'],
@@ -54,10 +55,6 @@ export default defineComponent({
 		};
 	},
 
-	beforeCreate() {
-		this.$options.components.XBlocks = require('../page-editor.blocks.vue').default
-	},
-
 	created() {
 		if (this.value.children == null) this.value.children = [];
 		if (this.value.var === undefined) this.value.var = null;
diff --git a/src/client/pages/page-editor/els/page-editor.el.section.vue b/src/client/pages/page-editor/els/page-editor.el.section.vue
index df423f0020..fdad140638 100644
--- a/src/client/pages/page-editor/els/page-editor.el.section.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.section.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
@@ -26,7 +26,8 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XContainer
+		XContainer,
+		XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
 	},
 
 	inject: ['getPageBlockList'],
@@ -46,10 +47,6 @@ export default defineComponent({
 		};
 	},
 
-	beforeCreate() {
-		this.$options.components.XBlocks = require('../page-editor.blocks.vue').default
-	},
-
 	created() {
 		if (this.value.title == null) this.value.title = null;
 		if (this.value.children == null) this.value.children = [];