diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue
index 7f50169672..5b70177928 100644
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -11,6 +11,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import define from '../../../common/define-widget-define-component';
+
 const widget = define({
 	name: 'analog-clock',
 	props: () => ({
diff --git a/src/client/app/common/views/widgets/instance.vue b/src/client/app/common/views/widgets/instance.vue
index 96d6184d1e..9a712ffb2a 100644
--- a/src/client/app/common/views/widgets/instance.vue
+++ b/src/client/app/common/views/widgets/instance.vue
@@ -7,8 +7,14 @@
 </template>
 
 <script lang="ts">
-import define from '../../../common/define-widget';
-export default define({
+import { defineComponent } from 'vue';
+import define from '../../../common/define-widget-define-component';
+
+const widget = define({
 	name: 'instance'
 });
+
+export default defineComponent({
+	extends: widget,
+})
 </script>
diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue
index 2b8caa7be8..b5c3a0fbfe 100644
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@@ -9,10 +9,16 @@
 </template>
 
 <script lang="ts">
-import define from '../../../common/define-widget';
-export default define({
+import { defineComponent } from 'vue';
+import define from '../../../common/define-widget-define-component';
+
+const widget = define({
 	name: 'nav'
 });
+
+export default defineComponent({
+	extends: widget,
+})
 </script>
 
 <style lang="stylus" scoped>