diff --git a/src/client/components/acct.vue b/src/client/components/acct.vue
index 250e8b2371..ce39678f5c 100644
--- a/src/client/components/acct.vue
+++ b/src/client/components/acct.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import { host } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['user', 'detail'],
 	data() {
 		return {
diff --git a/src/client/components/analog-clock.vue b/src/client/components/analog-clock.vue
index 81c6598c7a..5477a65c49 100644
--- a/src/client/components/analog-clock.vue
+++ b/src/client/components/analog-clock.vue
@@ -34,10 +34,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			now: new Date(),
diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue
index e77b0d1a99..14a0f15779 100644
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
 import contains from '../scripts/contains';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
@@ -74,7 +74,7 @@ for (const x of lib) {
 
 emjdb.sort((a, b) => a.name.length - b.name.length);
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
diff --git a/src/client/components/avatar.vue b/src/client/components/avatar.vue
index fd4ab78ce1..a116a23182 100644
--- a/src/client/components/avatar.vue
+++ b/src/client/components/avatar.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
diff --git a/src/client/components/avatars.vue b/src/client/components/avatars.vue
index db618dc7bf..43fb4ceb68 100644
--- a/src/client/components/avatars.vue
+++ b/src/client/components/avatars.vue
@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		userIds: {
 			required: true
diff --git a/src/client/components/captcha.vue b/src/client/components/captcha.vue
index 1a894d9350..8edd4842ed 100644
--- a/src/client/components/captcha.vue
+++ b/src/client/components/captcha.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 type Captcha = {
 	render(container: string | Node, options: {
@@ -29,7 +29,7 @@ declare global {
 	}
 }
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		provider: {
 			type: String,
diff --git a/src/client/components/code-core.vue b/src/client/components/code-core.vue
index a9253528d9..6ea814f461 100644
--- a/src/client/components/code-core.vue
+++ b/src/client/components/code-core.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import 'prismjs';
 import 'prismjs/themes/prism-okaidia.css';
 import XPrism from 'vue-prism-component';
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPrism
 	},
diff --git a/src/client/components/code.vue b/src/client/components/code.vue
index 94cad57be4..cceaf9bece 100644
--- a/src/client/components/code.vue
+++ b/src/client/components/code.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	components: {
 		XCode: () => import('./code-core.vue').then(m => m.default)
 	},
diff --git a/src/client/components/cw-button.vue b/src/client/components/cw-button.vue
index 16a9b84f62..cd8e58df95 100644
--- a/src/client/components/cw-button.vue
+++ b/src/client/components/cw-button.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { length } from 'stringz';
 import { concat } from '../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Boolean,
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 6d42429166..ecd429fb41 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -13,10 +13,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		items: {
 			type: Array,
diff --git a/src/client/components/deck/antenna-column.vue b/src/client/components/deck/antenna-column.vue
index 83fe14f2cc..46426367fe 100644
--- a/src/client/components/deck/antenna-column.vue
+++ b/src/client/components/deck/antenna-column.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
diff --git a/src/client/components/deck/column-core.vue b/src/client/components/deck/column-core.vue
index 44f19e7eda..270f50ad5e 100644
--- a/src/client/components/deck/column-core.vue
+++ b/src/client/components/deck/column-core.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XTlColumn from './tl-column.vue';
 import XAntennaColumn from './antenna-column.vue';
 import XListColumn from './list-column.vue';
@@ -20,7 +20,7 @@ import XWidgetsColumn from './widgets-column.vue';
 import XMentionsColumn from './mentions-column.vue';
 import XDirectColumn from './direct-column.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XTlColumn,
 		XAntennaColumn,
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
index f7620e5749..9dd74849cb 100644
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		column: {
 			type: Object,
diff --git a/src/client/components/deck/direct-column.vue b/src/client/components/deck/direct-column.vue
index f340048d6a..8a85a69cbd 100644
--- a/src/client/components/deck/direct-column.vue
+++ b/src/client/components/deck/direct-column.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XDirect from '../../pages/messages.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XDirect
diff --git a/src/client/components/deck/list-column.vue b/src/client/components/deck/list-column.vue
index a3576e8d67..8aa860e571 100644
--- a/src/client/components/deck/list-column.vue
+++ b/src/client/components/deck/list-column.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
diff --git a/src/client/components/deck/mentions-column.vue b/src/client/components/deck/mentions-column.vue
index 19e49d2a89..5c32e83d21 100644
--- a/src/client/components/deck/mentions-column.vue
+++ b/src/client/components/deck/mentions-column.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XMentions from '../../pages/mentions.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XMentions
diff --git a/src/client/components/deck/notifications-column.vue b/src/client/components/deck/notifications-column.vue
index 58873aa130..19ce324eac 100644
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -7,13 +7,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { faBell } from '@fortawesome/free-regular-svg-icons';
 import XColumn from './column.vue';
 import XNotifications from '../notifications.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XNotifications
diff --git a/src/client/components/deck/tl-column.vue b/src/client/components/deck/tl-column.vue
index d2d1749c7c..8ef379b09d 100644
--- a/src/client/components/deck/tl-column.vue
+++ b/src/client/components/deck/tl-column.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
diff --git a/src/client/components/deck/widgets-column.vue b/src/client/components/deck/widgets-column.vue
index 417027a8e7..2836e8a243 100644
--- a/src/client/components/deck/widgets-column.vue
+++ b/src/client/components/deck/widgets-column.vue
@@ -26,14 +26,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
 import { v4 as uuid } from 'uuid';
 import { faWindowMaximize, faTimes, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import { widgets } from '../../widgets';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XDraggable,
diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index 0ca9a5c69e..8d59662537 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faInfoCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
 import MkButton from './ui/button.vue';
@@ -58,7 +58,7 @@ import MkSelect from './ui/select.vue';
 import MkSignin from './signin.vue';
 import parseAcct from '../../misc/acct/parse';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,
diff --git a/src/client/components/drive-file-thumbnail.vue b/src/client/components/drive-file-thumbnail.vue
index 4bc1e569b7..d3f18ed05a 100644
--- a/src/client/components/drive-file-thumbnail.vue
+++ b/src/client/components/drive-file-thumbnail.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import {
 	faFile,
 	faFileAlt,
@@ -28,7 +28,7 @@ import {
 	} from '@fortawesome/free-solid-svg-icons';
 import ImgWithBlurhash from './img-with-blurhash.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},
diff --git a/src/client/components/drive-window.vue b/src/client/components/drive-window.vue
index c42cb66617..c9dbb42968 100644
--- a/src/client/components/drive-window.vue
+++ b/src/client/components/drive-window.vue
@@ -11,11 +11,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XDrive from './drive.vue';
 import XWindow from './window.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDrive,
 		XWindow,
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index b31a4e6375..cf6c4869a0 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import copyToClipboard from '../scripts/copy-to-clipboard';
 //import updateAvatar from '../api/update-avatar';
@@ -38,7 +38,7 @@ import copyToClipboard from '../scripts/copy-to-clipboard';
 import XFileThumbnail from './drive-file-thumbnail.vue';
 import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XFileThumbnail
 	},
diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue
index 9e80653194..1f9afefdbd 100644
--- a/src/client/components/drive.folder.vue
+++ b/src/client/components/drive.folder.vue
@@ -26,10 +26,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFolder, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,
diff --git a/src/client/components/drive.nav-folder.vue b/src/client/components/drive.nav-folder.vue
index 9e805a5e93..205094fd0a 100644
--- a/src/client/components/drive.nav-folder.vue
+++ b/src/client/components/drive.nav-folder.vue
@@ -13,10 +13,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCloud } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,
diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index 3e7b7d04ae..f351fd8b1e 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import XNavFolder from './drive.nav-folder.vue';
 import XFolder from './drive.folder.vue';
@@ -54,7 +54,7 @@ import XFile from './drive.file.vue';
 import XUploader from './uploader.vue';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNavFolder,
 		XFolder,
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index 7871b438c9..67a07dd672 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
@@ -71,7 +71,7 @@ import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import { groupByX } from '../../prelude/array';
 import XPopup from './popup.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPopup,
 	},
diff --git a/src/client/components/emoji.vue b/src/client/components/emoji.vue
index 277ba1a07d..05ecff4edc 100644
--- a/src/client/components/emoji.vue
+++ b/src/client/components/emoji.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		name: {
 			type: String,
diff --git a/src/client/components/error.vue b/src/client/components/error.vue
index 90efa700b2..84f7bb5bc9 100644
--- a/src/client/components/error.vue
+++ b/src/client/components/error.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 	},
diff --git a/src/client/components/file-type-icon.vue b/src/client/components/file-type-icon.vue
index 8492567ad7..cdfbee6669 100644
--- a/src/client/components/file-type-icon.vue
+++ b/src/client/components/file-type-icon.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFileImage } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index 7967c0e159..8ed4300206 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -29,10 +29,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
diff --git a/src/client/components/form-window.vue b/src/client/components/form-window.vue
index 25eee91647..d518b6f32d 100644
--- a/src/client/components/form-window.vue
+++ b/src/client/components/form-window.vue
@@ -15,13 +15,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XWindow from './window.vue';
 import MkInput from './ui/input.vue';
 import MkTextarea from './ui/textarea.vue';
 import MkSwitch from './ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XWindow,
 		MkInput,
diff --git a/src/client/components/formula-core.vue b/src/client/components/formula-core.vue
index 45b27f9026..f8accdd0a1 100644
--- a/src/client/components/formula-core.vue
+++ b/src/client/components/formula-core.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as katex from 'katex';
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		formula: {
 			type: String,
diff --git a/src/client/components/formula.vue b/src/client/components/formula.vue
index 4aaad1bf3e..ce5d61dc8b 100644
--- a/src/client/components/formula.vue
+++ b/src/client/components/formula.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	components: {
 		XFormula: () => import('./formula-core.vue').then(m => m.default)
 	},
diff --git a/src/client/components/google.vue b/src/client/components/google.vue
index 630e8b83bc..301c9e0b75 100644
--- a/src/client/components/google.vue
+++ b/src/client/components/google.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['q'],
 	data() {
 		return {
diff --git a/src/client/components/header-clock.vue b/src/client/components/header-clock.vue
index 696fd4eb67..b4083cc825 100644
--- a/src/client/components/header-clock.vue
+++ b/src/client/components/header-clock.vue
@@ -14,10 +14,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkClock from './analog-clock.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkClock
 	},
diff --git a/src/client/components/image-viewer.vue b/src/client/components/image-viewer.vue
index c78112b988..081308da44 100644
--- a/src/client/components/image-viewer.vue
+++ b/src/client/components/image-viewer.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XModal from './modal.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XModal,
 	},
diff --git a/src/client/components/img-with-blurhash.vue b/src/client/components/img-with-blurhash.vue
index 6e6a2a8965..7858931e45 100644
--- a/src/client/components/img-with-blurhash.vue
+++ b/src/client/components/img-with-blurhash.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { decode } from 'blurhash';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: String,
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index 552e3523f7..851a5bbcd1 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -122,7 +122,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faChartBar, faUser, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
@@ -138,7 +138,7 @@ const alpha = (hex, a) => {
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSelect
 	},
diff --git a/src/client/components/link.vue b/src/client/components/link.vue
index 7a364d0986..bf964d23b9 100644
--- a/src/client/components/link.vue
+++ b/src/client/components/link.vue
@@ -10,13 +10,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { url as local } from '../config';
 import MkUrlPreview from './url-preview-popup.vue';
 import { isDeviceTouch } from '../scripts/is-device-touch';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,
diff --git a/src/client/components/loading.vue b/src/client/components/loading.vue
index b819c692e8..cc2f2e0e1a 100644
--- a/src/client/components/loading.vue
+++ b/src/client/components/loading.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		inline: {
 			type: Boolean,
diff --git a/src/client/components/media-banner.vue b/src/client/components/media-banner.vue
index 0f746d4340..fac17ee789 100644
--- a/src/client/components/media-banner.vue
+++ b/src/client/components/media-banner.vue
@@ -26,10 +26,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		media: {
 			type: Object,
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index f6ed45daec..4f46a32789 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import ImageViewer from './image-viewer.vue';
 import ImgWithBlurhash from './img-with-blurhash.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},
diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index fd0035f10c..e5880de811 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -15,12 +15,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XBanner from './media-banner.vue';
 import XImage from './media-image.vue';
 import XVideo from './media-video.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBanner,
 		XImage,
diff --git a/src/client/components/media-video.vue b/src/client/components/media-video.vue
index a5e06bfaa9..291224f8f6 100644
--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		video: {
 			type: Object,
diff --git a/src/client/components/mention.vue b/src/client/components/mention.vue
index 0303e0e5b5..ced8fe8098 100644
--- a/src/client/components/mention.vue
+++ b/src/client/components/mention.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import { host as localHost } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		username: {
 			type: String,
diff --git a/src/client/components/menu.vue b/src/client/components/menu.vue
index 74e9a29ccf..b68f50190a 100644
--- a/src/client/components/menu.vue
+++ b/src/client/components/menu.vue
@@ -33,12 +33,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';
 import XPopup from './popup.vue';
 import { focusPrev, focusNext } from '../scripts/focus';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPopup
 	},
diff --git a/src/client/components/misskey-flavored-markdown.vue b/src/client/components/misskey-flavored-markdown.vue
index 7425f1f7be..0097ac3aa1 100644
--- a/src/client/components/misskey-flavored-markdown.vue
+++ b/src/client/components/misskey-flavored-markdown.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MfmCore from './mfm';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MfmCore
 	}
diff --git a/src/client/components/modal.vue b/src/client/components/modal.vue
index 6ae46d451e..b0a5818d33 100644
--- a/src/client/components/modal.vue
+++ b/src/client/components/modal.vue
@@ -10,9 +10,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		canClose: {
 			type: Boolean,
diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
index 039287818f..2cf06f2cd0 100644
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -23,11 +23,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,
diff --git a/src/client/components/note-preview.vue b/src/client/components/note-preview.vue
index 14314889a3..5dfceabab2 100644
--- a/src/client/components/note-preview.vue
+++ b/src/client/components/note-preview.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNoteHeader,
 		XSubNoteContent,
diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index fcdb06bd9e..1d6d87b79a 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'x-sub',
 
 	components: {
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 63a803c7f4..c885aaa664 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -88,7 +88,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
@@ -107,7 +107,7 @@ import { focusPrev, focusNext } from '../scripts/focus';
 import { url } from '../config';
 import copyToClipboard from '../scripts/copy-to-clipboard';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XSub,
 		XNoteHeader,
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 7653062ba0..12ad1f0668 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -28,13 +28,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import paging from '../scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNote, XList, MkButton
 	},
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index 9e4806f05f..7544c60bd6 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -58,14 +58,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faCheck, faPollH } from '@fortawesome/free-solid-svg-icons';
 import { faClock } from '@fortawesome/free-regular-svg-icons';
 import noteSummary from '../../misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon, MkFollowButton
 	},
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index fa1e2fad71..8bee88e785 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import paging from '../scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotification,
 		XList,
diff --git a/src/client/components/page-preview.vue b/src/client/components/page-preview.vue
index 8c41a070bd..17275e6761 100644
--- a/src/client/components/page-preview.vue
+++ b/src/client/components/page-preview.vue
@@ -15,9 +15,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		page: {
 			type: Object,
diff --git a/src/client/components/page/page.block.vue b/src/client/components/page/page.block.vue
index 0a4b068b63..412c91ee0d 100644
--- a/src/client/components/page/page.block.vue
+++ b/src/client/components/page/page.block.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XText from './page.text.vue';
 import XSection from './page.section.vue';
 import XImage from './page.image.vue';
@@ -19,7 +19,7 @@ import XCounter from './page.counter.vue';
 import XRadioButton from './page.radio-button.vue';
 import XCanvas from './page.canvas.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas
 	},
diff --git a/src/client/components/page/page.button.vue b/src/client/components/page/page.button.vue
index 83753b4e80..cea7ecb6fe 100644
--- a/src/client/components/page/page.button.vue
+++ b/src/client/components/page/page.button.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
diff --git a/src/client/components/page/page.canvas.vue b/src/client/components/page/page.canvas.vue
index 2d7cc1f8f9..1080c93856 100644
--- a/src/client/components/page/page.canvas.vue
+++ b/src/client/components/page/page.canvas.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.counter.vue b/src/client/components/page/page.counter.vue
index a3674b87a2..5d2df0b67f 100644
--- a/src/client/components/page/page.counter.vue
+++ b/src/client/components/page/page.counter.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
diff --git a/src/client/components/page/page.if.vue b/src/client/components/page/page.if.vue
index 6bdf9cd97d..cf07930c51 100644
--- a/src/client/components/page/page.if.vue
+++ b/src/client/components/page/page.if.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.image.vue b/src/client/components/page/page.image.vue
index f515958515..f8551bc820 100644
--- a/src/client/components/page/page.image.vue
+++ b/src/client/components/page/page.image.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue
index 56899b1b20..1dc54e2a52 100644
--- a/src/client/components/page/page.number-input.vue
+++ b/src/client/components/page/page.number-input.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
index da5bc8bfab..d7cb753143 100644
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -6,13 +6,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import MkTextarea from '../ui/textarea.vue';
 import MkButton from '../ui/button.vue';
 import { apiUrl } from '../../config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea,
 		MkButton,
diff --git a/src/client/components/page/page.radio-button.vue b/src/client/components/page/page.radio-button.vue
index 99d9ead385..5add209869 100644
--- a/src/client/components/page/page.radio-button.vue
+++ b/src/client/components/page/page.radio-button.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkRadio from '../ui/radio.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkRadio
 	},
diff --git a/src/client/components/page/page.section.vue b/src/client/components/page/page.section.vue
index c9758a0dbe..989c1b379a 100644
--- a/src/client/components/page/page.section.vue
+++ b/src/client/components/page/page.section.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.switch.vue b/src/client/components/page/page.switch.vue
index 9f04ad19c4..f40013ade9 100644
--- a/src/client/components/page/page.switch.vue
+++ b/src/client/components/page/page.switch.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkSwitch from '../ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSwitch
 	},
diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue
index 0d09f9fb5e..d4ddf698fe 100644
--- a/src/client/components/page/page.text-input.vue
+++ b/src/client/components/page/page.text-input.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},
diff --git a/src/client/components/page/page.text.vue b/src/client/components/page/page.text.vue
index 66e2acb90a..b565cdd3fb 100644
--- a/src/client/components/page/page.text.vue
+++ b/src/client/components/page/page.text.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from '../../../mfm/parse';
 import { unique } from '../../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.textarea-input.vue b/src/client/components/page/page.textarea-input.vue
index 5e0cc43779..fed7450352 100644
--- a/src/client/components/page/page.textarea-input.vue
+++ b/src/client/components/page/page.textarea-input.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea
 	},
diff --git a/src/client/components/page/page.textarea.vue b/src/client/components/page/page.textarea.vue
index abb30d78ee..1c6563ef3d 100644
--- a/src/client/components/page/page.textarea.vue
+++ b/src/client/components/page/page.textarea.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea
 	},
diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
index b3cc01ec22..490df8cc72 100644
--- a/src/client/components/page/page.vue
+++ b/src/client/components/page/page.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from '@syuilo/aiscript';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
 import { faHeart } from '@fortawesome/free-regular-svg-icons';
@@ -13,7 +13,7 @@ import XBlock from './page.block.vue';
 import { Hpml } from '../../scripts/hpml/evaluator';
 import { url } from '../../config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBlock
 	},
diff --git a/src/client/components/particle.vue b/src/client/components/particle.vue
index bcdc56be63..f55e1ed4b9 100644
--- a/src/client/components/particle.vue
+++ b/src/client/components/particle.vue
@@ -47,9 +47,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		x: {
 			type: Number,
diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue
index 0687e999b5..0376f82b50 100644
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { erase } from '../../prelude/array';
 import { addTime } from '../../prelude/time';
@@ -59,7 +59,7 @@ import MkSelect from './ui/select.vue';
 import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput,
 		MkSelect,
diff --git a/src/client/components/poll.vue b/src/client/components/poll.vue
index f67abf1543..283e740ca1 100644
--- a/src/client/components/poll.vue
+++ b/src/client/components/poll.vue
@@ -22,11 +22,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sum } from '../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,
diff --git a/src/client/components/popup.vue b/src/client/components/popup.vue
index 6d27ff7ae0..825f9987cd 100644
--- a/src/client/components/popup.vue
+++ b/src/client/components/popup.vue
@@ -10,9 +10,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		source: {
 			required: true
diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue
index 2415bf28ec..f177dfe8af 100644
--- a/src/client/components/post-form-attaches.vue
+++ b/src/client/components/post-form-attaches.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
 import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
 import XFileThumbnail from './drive-file-thumbnail.vue'
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDraggable,
 		XFileThumbnail
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index 14227fec5d..96142867df 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -25,10 +25,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XPostForm from './post-form.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPostForm
 	},
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index f0de602c29..9c78f57acb 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
@@ -70,7 +70,7 @@ import { formatTimeString } from '../../misc/format-time-string';
 import { selectDriveFile } from '../scripts/select-drive-file';
 import { noteVisibilities } from '../../types';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotePreview,
 		XUploader: () => import('./uploader.vue').then(m => m.default),
diff --git a/src/client/components/reaction-icon.vue b/src/client/components/reaction-icon.vue
index fe2b528368..8995684e27 100644
--- a/src/client/components/reaction-icon.vue
+++ b/src/client/components/reaction-icon.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	props: {
 		reaction: {
 			type: String,
diff --git a/src/client/components/reaction-picker.vue b/src/client/components/reaction-picker.vue
index cf5de327a3..11e0f7aaf6 100644
--- a/src/client/components/reaction-picker.vue
+++ b/src/client/components/reaction-picker.vue
@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojiRegex } from '../../misc/emoji-regex';
 import XReactionIcon from './reaction-icon.vue';
 import XPopup from './popup.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPopup,
 		XReactionIcon,
diff --git a/src/client/components/reactions-viewer.details.vue b/src/client/components/reactions-viewer.details.vue
index 96d1408fc1..38734b6753 100644
--- a/src/client/components/reactions-viewer.details.vue
+++ b/src/client/components/reactions-viewer.details.vue
@@ -17,10 +17,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTooltip from './ui/tooltip.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTooltip
 	},
diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index 639a1603ca..7a6f528e88 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XDetails from './reactions-viewer.details.vue';
 import XReactionIcon from './reaction-icon.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon
 	},
diff --git a/src/client/components/reactions-viewer.vue b/src/client/components/reactions-viewer.vue
index 88e7df4646..0cb62a35c9 100644
--- a/src/client/components/reactions-viewer.vue
+++ b/src/client/components/reactions-viewer.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XReaction from './reactions-viewer.reaction.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReaction
 	},
diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue
index 21af9f766a..02bd5e8f7f 100644
--- a/src/client/components/remote-caution.vue
+++ b/src/client/components/remote-caution.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		href: {
 			type: String,
diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index 558087f1d8..c216aa18a8 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -45,13 +45,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { host, instanceName } from '../config';
 import { search } from '../scripts/search';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			host: host,
diff --git a/src/client/components/signin-dialog.vue b/src/client/components/signin-dialog.vue
index 98b75e627c..650997b430 100644
--- a/src/client/components/signin-dialog.vue
+++ b/src/client/components/signin-dialog.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XWindow from './window.vue';
 import MkSignin from './signin.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSignin,
 		XWindow,
diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index a7653b17b0..6a13f771eb 100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import { faLock, faGavel } from '@fortawesome/free-solid-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
@@ -52,7 +52,7 @@ import MkInput from './ui/input.vue';
 import { apiUrl, host } from '../config';
 import { byteify, hexify } from '../scripts/2fa';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,
diff --git a/src/client/components/signup-dialog.vue b/src/client/components/signup-dialog.vue
index eff1f79c48..31c06abee2 100644
--- a/src/client/components/signup-dialog.vue
+++ b/src/client/components/signup-dialog.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XWindow from './window.vue';
 import XSignup from './signup.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XSignup,
 		XWindow,
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index ff1932b42d..4056cbf4f6 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faLock, faExclamationTriangle, faSpinner, faCheck, faKey } from '@fortawesome/free-solid-svg-icons';
 const getPasswordStrength = require('syuilo-password-strength');
 import { toUnicode } from 'punycode';
@@ -58,7 +58,7 @@ import MkButton from './ui/button.vue';
 import MkInput from './ui/input.vue';
 import MkSwitch from './ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,
diff --git a/src/client/components/stream-indicator.vue b/src/client/components/stream-indicator.vue
index ec00f4cbfe..3b774e00b4 100644
--- a/src/client/components/stream-indicator.vue
+++ b/src/client/components/stream-indicator.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			hasDisconnected: false,
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index a14c832ea8..2fe3565285 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faReply } from '@fortawesome/free-solid-svg-icons';
 import XPoll from './poll.vue';
 import XMediaList from './media-list.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPoll,
 		XMediaList,
diff --git a/src/client/components/time.vue b/src/client/components/time.vue
index e84f0aa25c..f14613b4e5 100644
--- a/src/client/components/time.vue
+++ b/src/client/components/time.vue
@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		time: {
 			type: [Date, String],
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index ce0fd95caf..cbdd08906c 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNotes from './notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotes
 	},
diff --git a/src/client/components/toast.vue b/src/client/components/toast.vue
index fefe91e3bd..97998efd8a 100644
--- a/src/client/components/toast.vue
+++ b/src/client/components/toast.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNotification from './notification.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotification
 	},
diff --git a/src/client/components/token-generate-window.vue b/src/client/components/token-generate-window.vue
index e58dcbda78..f11a96c793 100644
--- a/src/client/components/token-generate-window.vue
+++ b/src/client/components/token-generate-window.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { kinds } from '../../misc/api-permissions';
 import XWindow from './window.vue';
 import MkInput from './ui/input.vue';
@@ -28,7 +28,7 @@ import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
 import MkInfo from './ui/info.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XWindow,
 		MkInput,
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index e5abf37be3..0dcf1a5bf0 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index e5b11770af..d8fa682f35 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -22,10 +22,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		showHeader: {
 			type: Boolean,
diff --git a/src/client/components/ui/hr.vue b/src/client/components/ui/hr.vue
index ae7f7dbf8e..9941b50f82 100644
--- a/src/client/components/ui/hr.vue
+++ b/src/client/components/ui/hr.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({});
+import { defineComponent } from 'vue';
+export default defineComponent({});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/client/components/ui/info.vue b/src/client/components/ui/info.vue
index 3e87fe261d..1cacea4c54 100644
--- a/src/client/components/ui/info.vue
+++ b/src/client/components/ui/info.vue
@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		warn: {
 			type: Boolean,
diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index d5317db7f9..5476006af3 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -69,11 +69,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import debounce from 'v-debounce';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	directives: {
 		debounce
 	},
diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue
index 79d322bbc4..7e725ba6b1 100644
--- a/src/client/components/ui/pagination.vue
+++ b/src/client/components/ui/pagination.vue
@@ -14,11 +14,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from './button.vue';
 import paging from '../../scripts/paging';
 
-export default Vue.extend({
+export default defineComponent({
 	mixins: [
 		paging({}),
 	],
diff --git a/src/client/components/ui/radio.vue b/src/client/components/ui/radio.vue
index 0b0fad6773..94d2facf1e 100644
--- a/src/client/components/ui/radio.vue
+++ b/src/client/components/ui/radio.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	model: {
 		prop: 'model',
 		event: 'change'
diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index 2c815912bb..5a40b22914 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Number,
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index 55f76553a7..271989f2df 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -20,9 +20,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: false
diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue
index 9652a01024..7e70376c98 100644
--- a/src/client/components/ui/switch.vue
+++ b/src/client/components/ui/switch.vue
@@ -26,8 +26,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	model: {
 		prop: 'value',
 		event: 'change'
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
index a42813ee64..30accf8ffd 100644
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -19,9 +19,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: false
diff --git a/src/client/components/ui/tooltip.vue b/src/client/components/ui/tooltip.vue
index b7a56708b7..6de6f4dd6e 100644
--- a/src/client/components/ui/tooltip.vue
+++ b/src/client/components/ui/tooltip.vue
@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		source: {
 			required: true,
diff --git a/src/client/components/uploader.vue b/src/client/components/uploader.vue
index 2d28bc84ac..283021af92 100644
--- a/src/client/components/uploader.vue
+++ b/src/client/components/uploader.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { apiUrl } from '../config';
 //import getMD5 from '../../scripts/get-md5';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			uploads: [],
diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 6d00d18607..7fcbb6e365 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkUrlPreview from './url-preview.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkUrlPreview
 	},
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index 78afe6a65c..93f901027c 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -33,12 +33,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faTwitter } from '@fortawesome/free-brands-svg-icons'; 
 import { url as local, lang } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index 0a5a5bc508..7f59024b13 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -19,14 +19,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode';
 import { url as local } from '../config';
 import MkUrlPreview from './url-preview-popup.vue';
 import { isDeviceTouch } from '../scripts/is-device-touch';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,
diff --git a/src/client/components/user-list.vue b/src/client/components/user-list.vue
index 0204cf9d06..9fda55a01d 100644
--- a/src/client/components/user-list.vue
+++ b/src/client/components/user-list.vue
@@ -30,12 +30,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import paging from '../scripts/paging';
 import MkContainer from './ui/container.vue';
 import MkFollowButton from './follow-button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkContainer,
 		MkFollowButton,
diff --git a/src/client/components/user-menu.vue b/src/client/components/user-menu.vue
index cbfa7b346d..f437c80ee0 100644
--- a/src/client/components/user-menu.vue
+++ b/src/client/components/user-menu.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faSnowflake, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import XMenu from './menu.vue';
@@ -11,7 +11,7 @@ import copyToClipboard from '../scripts/copy-to-clipboard';
 import { host } from '../config';
 import getAcct from '../../misc/acct/render';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XMenu
 	},
diff --git a/src/client/components/user-name.vue b/src/client/components/user-name.vue
index 425cb587c4..f4a2f7c667 100644
--- a/src/client/components/user-name.vue
+++ b/src/client/components/user-name.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index 410de6b488..f9ea2a3a1b 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -27,11 +27,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import parseAcct from '../../misc/acct/parse';
 import MkFollowButton from './follow-button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkFollowButton
 	},
diff --git a/src/client/components/user-select.vue b/src/client/components/user-select.vue
index a0d1f3432a..13a5c7caeb 100644
--- a/src/client/components/user-select.vue
+++ b/src/client/components/user-select.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import MkInput from './ui/input.vue';
 import XWindow from './window.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput,
 		XWindow,
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index 575d031182..ed9e9170d5 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -28,12 +28,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import paging from '../scripts/paging';
 import XModal from './modal.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XModal,
 	},
diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue
index 75368cd60d..16a0285933 100644
--- a/src/client/components/visibility-chooser.vue
+++ b/src/client/components/visibility-chooser.vue
@@ -43,12 +43,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import XPopup from './popup.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPopup
 	},
diff --git a/src/client/components/window.vue b/src/client/components/window.vue
index a0bff869b9..9a858a4aca 100644
--- a/src/client/components/window.vue
+++ b/src/client/components/window.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import XModal from './modal.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XModal,
 	},
diff --git a/src/client/deck.vue b/src/client/deck.vue
index d4d1fc07e6..fe46356bf4 100644
--- a/src/client/deck.vue
+++ b/src/client/deck.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlus, faPencilAlt, faChevronLeft, faBars, faCircle } from '@fortawesome/free-solid-svg-icons';
 import {  } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
@@ -51,7 +51,7 @@ import DeckColumn from './components/deck/column.vue';
 import XSidebar from './components/sidebar.vue';
 import { getScrollContainer } from './scripts/scroll';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XSidebar,
 		DeckColumn,
diff --git a/src/client/default.vue b/src/client/default.vue
index 093e65d16e..2bbb73c0ff 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
@@ -102,7 +102,7 @@ import XSidebar from './components/sidebar.vue';
 
 const DESKTOP_THRESHOLD = 1100;
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XSidebar,
 		XClock: () => import('./components/header-clock.vue').then(m => m.default),
diff --git a/src/client/pages/about-misskey.vue b/src/client/pages/about-misskey.vue
index 2c4a257b15..424241e9d9 100644
--- a/src/client/pages/about-misskey.vue
+++ b/src/client/pages/about-misskey.vue
@@ -60,12 +60,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { version } from '../config';
 import MkLink from '../components/link.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkLink
 	},
diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index 25fb0ca13e..102fd218a5 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { version } from '../config';
 import MkInstanceStats from '../components/instance-stats.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('instance') as string
diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index 089475ed60..ac67891b53 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck, faBroadcastTower } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../components/ui/pagination.vue';
 import MkButton from '../components/ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('announcements') as string
diff --git a/src/client/pages/apps.vue b/src/client/pages/apps.vue
index 445bba34c8..c1ff5f22db 100644
--- a/src/client/pages/apps.vue
+++ b/src/client/pages/apps.vue
@@ -41,11 +41,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTrashAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../components/ui/pagination.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('installedApps') as string
diff --git a/src/client/pages/auth.form.vue b/src/client/pages/auth.form.vue
index c5a9b769ac..368d465bf0 100644
--- a/src/client/pages/auth.form.vue
+++ b/src/client/pages/auth.form.vue
@@ -22,10 +22,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../components/ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
diff --git a/src/client/pages/auth.vue b/src/client/pages/auth.vue
index 5c40842da1..8cb011e594 100755
--- a/src/client/pages/auth.vue
+++ b/src/client/pages/auth.vue
@@ -29,11 +29,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XForm from './auth.form.vue';
 import MkSignin from '../components/signin.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XForm,
 		MkSignin,
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index e4c4ef5c6c..629e6ffd5f 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFileAlt } from '@fortawesome/free-solid-svg-icons'
 import MarkdownIt from 'markdown-it';
 import MarkdownItAnchor from 'markdown-it-anchor';
@@ -30,7 +30,7 @@ markdown.use(MarkdownItAnchor, {
 	slugify: (s) => encodeURIComponent(String(s).trim().replace(/\s+/g, '-'))
 });
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.title,
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index a880e8abe4..0d24b2a475 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 import { url, lang } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('help') as string,
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index 30202b7070..4eb2595c60 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCloud, faAngleDown, faAngleUp, faFolderPlus, faUpload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import XDrive from '../components/drive.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('drive') as string
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index 39904846cf..4a5a1fd032 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -54,13 +54,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faChartLine, faPlus, faHashtag, faRocket } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
 import XUserList from '../components/user-list.vue';
 import MkContainer from '../components/ui/container.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('explore') as string
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 59bef2ca91..339e34442e 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faStar } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../scripts/loading';
 import XNotes from '../components/notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('favorites') as string
diff --git a/src/client/pages/featured.vue b/src/client/pages/featured.vue
index e6293e9e83..5be5d878d5 100644
--- a/src/client/pages/featured.vue
+++ b/src/client/pages/featured.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFireAlt } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../scripts/loading';
 import XNotes from '../components/notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('featured') as string
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index b310d9f581..71c73809a3 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -33,11 +33,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faUserClock, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../components/ui/pagination.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('followRequests') as string
diff --git a/src/client/pages/follow.vue b/src/client/pages/follow.vue
index 8659763bb7..58bc638e7e 100644
--- a/src/client/pages/follow.vue
+++ b/src/client/pages/follow.vue
@@ -4,9 +4,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	created() {
 		const acct = new URL(location.href).searchParams.get('acct');
 		if (acct == null) return;
diff --git a/src/client/pages/index.home.tutorial.vue b/src/client/pages/index.home.tutorial.vue
index dc255bf6a3..c8f1db1faa 100644
--- a/src/client/pages/index.home.tutorial.vue
+++ b/src/client/pages/index.home.tutorial.vue
@@ -60,11 +60,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faInfoCircle, faChevronLeft, faChevronRight, faCheck } from '@fortawesome/free-solid-svg-icons'
 import MkButton from '../components/ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 	},
diff --git a/src/client/pages/index.home.vue b/src/client/pages/index.home.vue
index b40086c310..5f72f5cde4 100644
--- a/src/client/pages/index.home.vue
+++ b/src/client/pages/index.home.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { faComments } from '@fortawesome/free-regular-svg-icons';
 import Progress from '../scripts/loading';
@@ -32,7 +32,7 @@ import XTimeline from '../components/timeline.vue';
 import XPostForm from '../components/post-form.vue';
 import { scroll } from '../scripts/scroll';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('timeline') as string
diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index 788df3929a..f27a692fbd 100644
--- a/src/client/pages/index.vue
+++ b/src/client/pages/index.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Home from './index.home.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'index',
 
 	components: {
diff --git a/src/client/pages/index.welcome.entrance.vue b/src/client/pages/index.welcome.entrance.vue
index 9bb2e85fc3..830c2c2525 100644
--- a/src/client/pages/index.welcome.entrance.vue
+++ b/src/client/pages/index.welcome.entrance.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import XSigninDialog from '../components/signin-dialog.vue';
 import XSignupDialog from '../components/signup-dialog.vue';
@@ -22,7 +22,7 @@ import MkButton from '../components/ui/button.vue';
 import XNotes from '../components/notes.vue';
 import { host } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		XNotes,
diff --git a/src/client/pages/index.welcome.setup.vue b/src/client/pages/index.welcome.setup.vue
index 9a66a4dffb..a85b78f84e 100644
--- a/src/client/pages/index.welcome.setup.vue
+++ b/src/client/pages/index.welcome.setup.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../components/ui/button.vue';
 import MkInput from '../components/ui/input.vue';
 import { host } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	
 	components: {
 		MkButton,
diff --git a/src/client/pages/index.welcome.vue b/src/client/pages/index.welcome.vue
index fb4aba6588..f09f70cd9c 100644
--- a/src/client/pages/index.welcome.vue
+++ b/src/client/pages/index.welcome.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XSetup from './index.welcome.setup.vue';
 import XEntrance from './index.welcome.entrance.vue';
 import { instanceName } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XSetup,
 		XEntrance,
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index 0e11e2932e..314f0cdc46 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -25,14 +25,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBroadcastTower, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
 import MkTextarea from '../../components/ui/textarea.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('announcements') as string
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 26e238b128..a67601d3f8 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlus, faSave } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
@@ -67,7 +67,7 @@ import MkPagination from '../../components/ui/pagination.vue';
 import { selectFile } from '../../scripts/select-file';
 import { unique } from '../../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: `${this.$t('customEmojis')} | ${this.$t('instance')}`
diff --git a/src/client/pages/instance/federation.instance.vue b/src/client/pages/instance/federation.instance.vue
index 6b6352a151..eea10ee7b1 100644
--- a/src/client/pages/instance/federation.instance.vue
+++ b/src/client/pages/instance/federation.instance.vue
@@ -118,7 +118,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Chart from 'chart.js';
 import { faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown, faMinusCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '../../components/window.vue';
@@ -139,7 +139,7 @@ const alpha = hex => {
 	return `rgba(${r}, ${g}, ${b}, 0.1)`;
 };
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XWindow,
 		MkSelect,
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 77819235d7..7b29523969 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faGlobe, faCircle, faExchangeAlt, faCaretDown, faCaretUp, faTrafficLight } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
@@ -68,7 +68,7 @@ import MkSelect from '../../components/ui/select.vue';
 import MkPagination from '../../components/ui/pagination.vue';
 import MkInstanceInfo from './federation.instance.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('federation') as string
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index 0bc1c81e6f..5fcb7c807f 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -8,13 +8,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCloud } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkPagination from '../../components/ui/pagination.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: `${this.$t('files')} | ${this.$t('instance')}`
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index d21f8d455e..d4b0aec360 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -98,7 +98,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import VueJsonPretty from 'vue-json-pretty';
@@ -116,7 +116,7 @@ const alpha = (hex, a) => {
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('instance') as string
diff --git a/src/client/pages/instance/queue.queue.vue b/src/client/pages/instance/queue.queue.vue
index 1649d1e172..b35b0119b5 100644
--- a/src/client/pages/instance/queue.queue.vue
+++ b/src/client/pages/instance/queue.queue.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import Chart from 'chart.js';
 
 const alpha = (hex, a) => {
@@ -34,7 +34,7 @@ const alpha = (hex, a) => {
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		domain: {
 			required: true
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 7a2204e519..d808769957 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -18,13 +18,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import XQueue from './queue.queue.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: `${this.$t('jobQueue')} | ${this.$t('instance')}`
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index dd18867b6a..4402cbd544 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -25,13 +25,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlus, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('relays') as string
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 0436e87804..3a7edb7627 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -199,7 +199,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPencilAlt, faShareAlt, faGhost, faCog, faPlus, faCloud, faInfoCircle, faBan, faSave, faServer, faLink, faThumbtack, faUser, faShieldAlt, faKey, faBolt } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
@@ -212,7 +212,7 @@ import MkUserSelect from '../../components/user-select.vue';
 import { url } from '../../config';
 import getAcct from '../../../misc/acct/render';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('instance') as string
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
index 25f0260637..f6b8db593d 100644
--- a/src/client/pages/instance/users.user.vue
+++ b/src/client/pages/instance/users.user.vue
@@ -34,14 +34,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTimes, faBookmark, faKey, faSync, faMicrophoneSlash, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { faSnowflake, faTrashAlt, faBookmark as farBookmark  } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 import Progress from '../../scripts/loading';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkSwitch,
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index b209ab68cf..58e45e99a6 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -83,7 +83,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlus, faUsers, faSearch, faBookmark, faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons';
 import { faSnowflake, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import parseAcct from '../../../misc/acct/parse';
@@ -93,7 +93,7 @@ import MkSelect from '../../components/ui/select.vue';
 import MkPagination from '../../components/ui/pagination.vue';
 import MkUserSelect from '../../components/user-select.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: `${this.$t('users')} | ${this.$t('instance')}`
diff --git a/src/client/pages/mentions.vue b/src/client/pages/mentions.vue
index 8c57a1342d..9fea3afd83 100644
--- a/src/client/pages/mentions.vue
+++ b/src/client/pages/mentions.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../scripts/loading';
 import XNotes from '../components/notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('mentions') as string
diff --git a/src/client/pages/messages.vue b/src/client/pages/messages.vue
index e607b86546..49ac32e827 100644
--- a/src/client/pages/messages.vue
+++ b/src/client/pages/messages.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../scripts/loading';
 import XNotes from '../components/notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('directNotes') as string
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index f8e3e0db67..49084961b5 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -40,13 +40,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
 import getAcct from '../../../misc/acct/render';
 import MkButton from '../../components/ui/button.vue';
 import MkUserSelect from '../../components/user-select.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index be47efd2ce..3a2e903784 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -23,14 +23,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-solid-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as autosize from 'autosize';
 import { formatTimeString } from '../../../misc/format-time-string';
 import { selectFile } from '../../scripts/select-file';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XUploader: () => import('../../components/uploader.vue').then(m => m.default),
 	},
diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index 4461740df7..78f8768531 100644
--- a/src/client/pages/messaging/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -36,12 +36,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from '../../../mfm/parse';
 import { unique } from '../../../prelude/array';
 import MkUrlPreview from '../../components/url-preview.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkUrlPreview
 	},
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index e8c6257f3f..a77eebd64f 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faArrowCircleDown, faFlag, faUsers, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import XList from '../../components/date-separated-list.vue';
 import XMessage from './messaging-room.message.vue';
@@ -43,7 +43,7 @@ import XForm from './messaging-room.form.vue';
 import parseAcct from '../../../misc/acct/parse';
 import { isBottom, onScrollBottom } from '../../scripts/scroll';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XMessage,
 		XForm,
diff --git a/src/client/pages/miauth.vue b/src/client/pages/miauth.vue
index 15cde8bc25..71e89761f4 100644
--- a/src/client/pages/miauth.vue
+++ b/src/client/pages/miauth.vue
@@ -39,11 +39,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkSignin from '../components/signin.vue';
 import MkButton from '../components/ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSignin,
 		MkButton,
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
index 6435e4fc9a..c5582f2b62 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/index.antenna.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
@@ -56,7 +56,7 @@ import MkSwitch from '../../components/ui/switch.vue';
 import MkUserSelect from '../../components/user-select.vue';
 import getAcct from '../../../misc/acct/render';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton, MkInput, MkTextarea, MkSelect, MkSwitch
 	},
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index a5f6076ebf..7943161c94 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatellite, faPlus } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../../components/ui/pagination.vue';
 import MkButton from '../../components/ui/button.vue';
 import XAntenna from './index.antenna.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('manageAntennas') as string,
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index 0132bc2c33..124a47e75b 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -39,13 +39,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTimes, faUsers } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../../scripts/loading';
 import MkButton from '../../components/ui/button.vue';
 import MkUserSelect from '../../components/user-select.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.group ? `${this.group.name} | ${this.$t('manageGroups')}` : this.$t('manageGroups')
diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue
index 30d7dabbfb..88f63e49c5 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -42,14 +42,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faUsers, faPlus, faEnvelopeOpenText } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../../components/ui/pagination.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkContainer from '../../components/ui/container.vue';
 import MkAvatars from '../../components/avatars.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('groups') as string,
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index c3f6d9c774..edca872eda 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -14,12 +14,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faListUl, faPlus } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../../components/ui/pagination.vue';
 import MkButton from '../../components/ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('manageLists') as string,
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 7052c55160..3c006c0fec 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -38,13 +38,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTimes, faListUl } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../../scripts/loading';
 import MkButton from '../../components/ui/button.vue';
 import MkUserSelect from '../../components/user-select.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.list ? `${this.list.name} | ${this.$t('manageLists')}` : this.$t('manageLists')
diff --git a/src/client/pages/my-settings/2fa.vue b/src/client/pages/my-settings/2fa.vue
index 58ba03c41c..c5f2f35715 100644
--- a/src/client/pages/my-settings/2fa.vue
+++ b/src/client/pages/my-settings/2fa.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
 import { hostname } from '../../config';
 import { byteify, hexify, stringify } from '../../scripts/2fa';
@@ -72,7 +72,7 @@ import MkInfo from '../../components/ui/info.vue';
 import MkInput from '../../components/ui/input.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton, MkInfo, MkInput, MkSwitch
 	},
diff --git a/src/client/pages/my-settings/api.vue b/src/client/pages/my-settings/api.vue
index 44f099ea1d..bd0014c738 100644
--- a/src/client/pages/my-settings/api.vue
+++ b/src/client/pages/my-settings/api.vue
@@ -9,12 +9,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faKey, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton, MkInput
 	},
diff --git a/src/client/pages/my-settings/drive.vue b/src/client/pages/my-settings/drive.vue
index 7612c5011f..d01c8fb36a 100644
--- a/src/client/pages/my-settings/drive.vue
+++ b/src/client/pages/my-settings/drive.vue
@@ -9,13 +9,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import { faClock, faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import { selectDriveFolder } from '../../scripts/select-drive-folder';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 	},
diff --git a/src/client/pages/my-settings/import-export.vue b/src/client/pages/my-settings/import-export.vue
index cc148d48d4..b2a1428cbe 100644
--- a/src/client/pages/my-settings/import-export.vue
+++ b/src/client/pages/my-settings/import-export.vue
@@ -17,13 +17,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faDownload, faUpload, faBoxes } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkSelect from '../../components/ui/select.vue';
 import { apiUrl } from '../../config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkSelect,
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index 3af896d78e..a5b9e5c013 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/src/client/pages/my-settings/index.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import XProfileSetting from './profile.vue';
 import XPrivacySetting from './privacy.vue';
@@ -54,7 +54,7 @@ import XApi from './api.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('settings') as string
diff --git a/src/client/pages/my-settings/integration.vue b/src/client/pages/my-settings/integration.vue
index 2d6e57e22c..e044adcf51 100644
--- a/src/client/pages/my-settings/integration.vue
+++ b/src/client/pages/my-settings/integration.vue
@@ -26,13 +26,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { apiUrl } from '../../config';
 import MkButton from '../../components/ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
diff --git a/src/client/pages/my-settings/mute-block.vue b/src/client/pages/my-settings/mute-block.vue
index 8eb43a6e29..85f51d7d82 100644
--- a/src/client/pages/my-settings/mute-block.vue
+++ b/src/client/pages/my-settings/mute-block.vue
@@ -31,11 +31,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBan } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../../components/ui/pagination.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkPagination,
 	},
diff --git a/src/client/pages/my-settings/privacy.vue b/src/client/pages/my-settings/privacy.vue
index 527ac9ea37..d9cc601b44 100644
--- a/src/client/pages/my-settings/privacy.vue
+++ b/src/client/pages/my-settings/privacy.vue
@@ -20,12 +20,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
 import MkSelect from '../../components/ui/select.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSelect,
 		MkSwitch,
diff --git a/src/client/pages/my-settings/profile.vue b/src/client/pages/my-settings/profile.vue
index 16bba7a270..c31f4ab3f6 100644
--- a/src/client/pages/my-settings/profile.vue
+++ b/src/client/pages/my-settings/profile.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake } from '@fortawesome/free-solid-svg-icons';
 import { faSave } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '../../components/ui/button.vue';
@@ -65,7 +65,7 @@ import MkSwitch from '../../components/ui/switch.vue';
 import { host } from '../../config';
 import { selectFile } from '../../scripts/select-file';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,
diff --git a/src/client/pages/my-settings/reaction.vue b/src/client/pages/my-settings/reaction.vue
index ef4f6f6723..12b3270b5c 100644
--- a/src/client/pages/my-settings/reaction.vue
+++ b/src/client/pages/my-settings/reaction.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import MkInput from '../../components/ui/input.vue';
@@ -24,7 +24,7 @@ import MkReactionPicker from '../../components/reaction-picker.vue';
 import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
 import { defaultSettings } from '../../store';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput,
 		MkButton,
diff --git a/src/client/pages/my-settings/security.vue b/src/client/pages/my-settings/security.vue
index dc77ca12c5..b750c35829 100644
--- a/src/client/pages/my-settings/security.vue
+++ b/src/client/pages/my-settings/security.vue
@@ -8,11 +8,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 	},
diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue
index 5bc4d4589a..b4142cf225 100644
--- a/src/client/pages/not-found.vue
+++ b/src/client/pages/not-found.vue
@@ -11,10 +11,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('notFound') as string
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 5464875dfb..3e58c7c937 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -28,14 +28,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../scripts/loading';
 import XNote from '../components/note.vue';
 import XNotes from '../components/notes.vue';
 import MkRemoteCaution from '../components/remote-caution.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('note') as string
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 49e67bc8f7..04ca4e1ba6 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBell } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../scripts/loading';
 import XNotifications from '../components/notifications.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('notifications') as string
diff --git a/src/client/pages/page-editor/els/page-editor.el.button.vue b/src/client/pages/page-editor/els/page-editor.el.button.vue
index 9821201666..1b69dd0a3c 100644
--- a/src/client/pages/page-editor/els/page-editor.el.button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.button.vue
@@ -38,14 +38,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkSelect from '../../../components/ui/select.vue';
 import MkInput from '../../../components/ui/input.vue';
 import MkSwitch from '../../../components/ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkSelect, MkInput, MkSwitch
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.canvas.vue b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
index a499207806..b5c12f3cf9 100644
--- a/src/client/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPaintBrush, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '../../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkInput
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.counter.vue b/src/client/pages/page-editor/els/page-editor.el.counter.vue
index f439f3e6ff..1b6900b4d7 100644
--- a/src/client/pages/page-editor/els/page-editor.el.counter.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.counter.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '../../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkInput
 	},
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 53cb9e2aee..3cf085f40e 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,13 +25,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkSelect from '../../../components/ui/select.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkSelect
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.image.vue b/src/client/pages/page-editor/els/page-editor.el.image.vue
index d26d7f603f..04fe89d5f4 100644
--- a/src/client/pages/page-editor/els/page-editor.el.image.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.image.vue
@@ -14,14 +14,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkFileThumbnail from '../../../components/drive-file-thumbnail.vue';
 import { selectDriveFile } from '../../../scripts/select-drive-file';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkFileThumbnail
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.number-input.vue b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
index 62d2e1bf8a..a56493da0f 100644
--- a/src/client/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '../../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkInput
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.post.vue b/src/client/pages/page-editor/els/page-editor.el.post.vue
index 06dea51c1f..cf02294ff2 100644
--- a/src/client/pages/page-editor/els/page-editor.el.post.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.post.vue
@@ -11,14 +11,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '../../../components/ui/textarea.vue';
 import MkInput from '../../../components/ui/input.vue';
 import MkSwitch from '../../../components/ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkTextarea, MkInput, MkSwitch
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
index 34a9366d62..b209d61322 100644
--- a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -12,13 +12,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '../../../components/ui/textarea.vue';
 import MkInput from '../../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkTextarea, MkInput
 	},
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 e89a8b840c..0b5db0f2ae 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,13 +17,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } 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';
 import XContainer from '../page-editor.container.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.switch.vue b/src/client/pages/page-editor/els/page-editor.el.switch.vue
index 5055da4f6f..4899ec6045 100644
--- a/src/client/pages/page-editor/els/page-editor.el.switch.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.switch.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkSwitch from '../../../components/ui/switch.vue';
 import MkInput from '../../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkSwitch, MkInput
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.text-input.vue b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
index bd5fb37617..f9f8b674fd 100644
--- a/src/client/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '../../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkInput
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.text.vue b/src/client/pages/page-editor/els/page-editor.el.text.vue
index a50b1113bd..f222e23178 100644
--- a/src/client/pages/page-editor/els/page-editor.el.text.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
index 33c49c705b..0ad595b2ba 100644
--- a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -11,13 +11,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '../../../components/ui/textarea.vue';
 import MkInput from '../../../components/ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkTextarea, MkInput
 	},
diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea.vue b/src/client/pages/page-editor/els/page-editor.el.textarea.vue
index e2e8848ccf..524252502f 100644
--- a/src/client/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer
 	},
diff --git a/src/client/pages/page-editor/page-editor.blocks.vue b/src/client/pages/page-editor/page-editor.blocks.vue
index 6e9408e0b7..c22c192909 100644
--- a/src/client/pages/page-editor/page-editor.blocks.vue
+++ b/src/client/pages/page-editor/page-editor.blocks.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
 import XSection from './els/page-editor.el.section.vue';
 import XText from './els/page-editor.el.text.vue';
@@ -22,7 +22,7 @@ import XCounter from './els/page-editor.el.counter.vue';
 import XRadioButton from './els/page-editor.el.radio-button.vue';
 import XCanvas from './els/page-editor.el.canvas.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas
 	},
diff --git a/src/client/pages/page-editor/page-editor.container.vue b/src/client/pages/page-editor/page-editor.container.vue
index be243b8990..ce96da1bca 100644
--- a/src/client/pages/page-editor/page-editor.container.vue
+++ b/src/client/pages/page-editor/page-editor.container.vue
@@ -25,11 +25,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBars, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		expanded: {
 			type: Boolean,
diff --git a/src/client/pages/page-editor/page-editor.script-block.vue b/src/client/pages/page-editor/page-editor.script-block.vue
index f3270f02e3..5aca3bd171 100644
--- a/src/client/pages/page-editor/page-editor.script-block.vue
+++ b/src/client/pages/page-editor/page-editor.script-block.vue
@@ -56,14 +56,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPencilAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { v4 as uuid } from 'uuid';
 import XContainer from './page-editor.container.vue';
 import MkTextarea from '../../components/ui/textarea.vue';
 import { isLiteralBlock, funcDefs, blockDefs } from '../../scripts/hpml/index';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XContainer, MkTextarea
 	},
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index 2beb2df389..44b16ce026 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -83,7 +83,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
 import "prismjs";
 import 'prismjs/themes/prism-okaidia.css';
@@ -105,7 +105,7 @@ import { url } from '../../config';
 import { collectPageVars } from '../../scripts/collect-page-vars';
 import { selectDriveFile } from '../../scripts/select-drive-file';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDraggable, XVariable, XBlocks, MkTextarea, MkContainer, MkButton, MkSelect, MkSwitch, MkInput, PrismEditor
 	},
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 093a3e5e2f..fafa217a26 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -30,12 +30,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
 import { faHeart as faHeartR } from '@fortawesome/free-regular-svg-icons';
 import XPage from '../components/page/page.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPage
 	},
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index a261785715..832cb05748 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlus, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { faStickyNote, faHeart } from '@fortawesome/free-regular-svg-icons';
 import MkPagePreview from '../components/page-preview.vue';
@@ -33,7 +33,7 @@ import MkPagination from '../components/ui/pagination.vue';
 import MkButton from '../components/ui/button.vue';
 import MkContainer from '../components/ui/container.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkPagePreview, MkPagination, MkButton, MkContainer
 	},
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index c2226235b0..a6c8100625 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute, faColumns } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
@@ -148,7 +148,7 @@ const sounds = [
 	'noizenecio/kick_gaba',
 ];
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('settings') as string
diff --git a/src/client/pages/preferences/plugins.vue b/src/client/pages/preferences/plugins.vue
index 8bd522ddc6..ca6ff72c61 100644
--- a/src/client/pages/preferences/plugins.vue
+++ b/src/client/pages/preferences/plugins.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { AiScript, parse } from '@syuilo/aiscript';
 import { serialize } from '@syuilo/aiscript/built/serializer';
 import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons';
@@ -50,7 +50,7 @@ import MkTextarea from '../../components/ui/textarea.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkInfo from '../../components/ui/info.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkTextarea,
diff --git a/src/client/pages/preferences/sidebar.vue b/src/client/pages/preferences/sidebar.vue
index 34c9916cf5..500510c501 100644
--- a/src/client/pages/preferences/sidebar.vue
+++ b/src/client/pages/preferences/sidebar.vue
@@ -15,13 +15,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faListUl, faSave, faRedo } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkTextarea from '../../components/ui/textarea.vue';
 import { defaultDeviceUserSettings } from '../../store';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkTextarea,
diff --git a/src/client/pages/preferences/theme.vue b/src/client/pages/preferences/theme.vue
index 173ccd7091..5618f3a0e7 100644
--- a/src/client/pages/preferences/theme.vue
+++ b/src/client/pages/preferences/theme.vue
@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
 import MkInput from '../../components/ui/input.vue';
@@ -89,7 +89,7 @@ import { Theme, builtinThemes, applyTheme, validateTheme } from '../../scripts/t
 import { selectFile } from '../../scripts/select-file';
 import { isDeviceDarkmode } from '../../scripts/is-device-darkmode';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput,
 		MkButton,
diff --git a/src/client/pages/room/preview.vue b/src/client/pages/room/preview.vue
index 22228cf8cb..a110e0ef0a 100644
--- a/src/client/pages/room/preview.vue
+++ b/src/client/pages/room/preview.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as THREE from 'three';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			selected: null,
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index 05b93c04e8..fe38441503 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { Room } from '../../scripts/room/room';
 import parseAcct from '../../../misc/acct/parse';
 import XPreview from './preview.vue';
@@ -72,7 +72,7 @@ import { selectFile } from '../../scripts/select-file';
 
 let room: Room;
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPreview,
 		MkButton,
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 025505295b..8c77f6d535 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTerminal, faPlay } from '@fortawesome/free-solid-svg-icons';
 import "prismjs";
 import 'prismjs/themes/prism-okaidia.css';
@@ -32,7 +32,7 @@ import MkContainer from '../components/ui/container.vue';
 import MkButton from '../components/ui/button.vue';
 import { createAiScriptEnv } from '../scripts/aiscript/api';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('scratchpad') as string
diff --git a/src/client/pages/search.vue b/src/client/pages/search.vue
index c3e87c0d0c..33ef687c80 100644
--- a/src/client/pages/search.vue
+++ b/src/client/pages/search.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../scripts/loading';
 import XNotes from '../components/notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('searchWith', { q: this.$route.query.q }) as string
diff --git a/src/client/pages/share.vue b/src/client/pages/share.vue
index 153de76801..be813af9a6 100644
--- a/src/client/pages/share.vue
+++ b/src/client/pages/share.vue
@@ -16,12 +16,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
 import PostFormDialog from '../components/post-form-dialog.vue';
 import MkButton from '../components/ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: this.$t('share') as string
diff --git a/src/client/pages/tag.vue b/src/client/pages/tag.vue
index 81a96960f7..0571dab575 100644
--- a/src/client/pages/tag.vue
+++ b/src/client/pages/tag.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import Progress from '../scripts/loading';
 import XNotes from '../components/notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	metaInfo() {
 		return {
 			title: '#' + this.$route.params.tag
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index 2ad95c065e..5c61b53949 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -75,7 +75,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPalette, faChevronDown, faKeyboard } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
 
@@ -90,7 +90,7 @@ import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } f
 import { toUnicode } from 'punycode';
 import { host } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkRadio,
 		MkButton,
diff --git a/src/client/pages/user/follow-list.vue b/src/client/pages/user/follow-list.vue
index 666e2d04fe..7d2ce353f9 100644
--- a/src/client/pages/user/follow-list.vue
+++ b/src/client/pages/user/follow-list.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import parseAcct from '../../../misc/acct/parse';
 import MkFollowButton from '../../components/follow-button.vue';
 import MkPagination from '../../components/ui/pagination.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkPagination,
 		MkFollowButton,
diff --git a/src/client/pages/user/index.activity.vue b/src/client/pages/user/index.activity.vue
index 29dcca0664..2a0bf78375 100644
--- a/src/client/pages/user/index.activity.vue
+++ b/src/client/pages/user/index.activity.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import ApexCharts from 'apexcharts';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue
index 83a2618403..e810a6b992 100644
--- a/src/client/pages/user/index.photos.vue
+++ b/src/client/pages/user/index.photos.vue
@@ -13,10 +13,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '../../scripts/get-static-image-url';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['user'],
 	data() {
 		return {
diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue
index f03c4adf8d..4e35a88d94 100644
--- a/src/client/pages/user/index.timeline.vue
+++ b/src/client/pages/user/index.timeline.vue
@@ -10,10 +10,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNotes from '../../components/notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotes
 	},
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 20eaca3687..b6aec7a062 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -106,7 +106,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker } from '@fortawesome/free-solid-svg-icons';
 import { faCalendarAlt, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import * as age from 's-age';
@@ -120,7 +120,7 @@ import Progress from '../../scripts/loading';
 import parseAcct from '../../../misc/acct/parse';
 import { getScrollPosition } from '../../scripts/scroll';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XUserTimeline,
 		XNote,
diff --git a/src/client/root.vue b/src/client/root.vue
index aa2cb0c038..ef30ac2499 100644
--- a/src/client/root.vue
+++ b/src/client/root.vue
@@ -4,12 +4,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import DefaultUI from './default.vue';
 import DeckUI from './deck.vue';
 import { instanceName, deckmode } from './config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		DefaultUI,
 		DeckUI,
diff --git a/src/client/vuex-shim.d.ts b/src/client/vuex-shim.d.ts
new file mode 100644
index 0000000000..b15424d792
--- /dev/null
+++ b/src/client/vuex-shim.d.ts
@@ -0,0 +1,11 @@
+import { ComponentCustomProperties } from 'vue';
+import { Store } from 'vuex';
+
+declare module '@vue/runtime-core' {
+	interface State {
+	}
+
+	interface ComponentCustomProperties {
+		$store: Store<State>
+	}
+}
diff --git a/src/client/widgets/activity.calendar.vue b/src/client/widgets/activity.calendar.vue
index 334c2ea56e..70d9dbfec0 100644
--- a/src/client/widgets/activity.calendar.vue
+++ b/src/client/widgets/activity.calendar.vue
@@ -24,9 +24,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['data'],
 	created() {
 		for (const d of this.data) {
diff --git a/src/client/widgets/activity.chart.vue b/src/client/widgets/activity.chart.vue
index 2b70493552..3252df4d5b 100644
--- a/src/client/widgets/activity.chart.vue
+++ b/src/client/widgets/activity.chart.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 function dragListen(fn) {
 	window.addEventListener('mousemove',  fn);
@@ -39,7 +39,7 @@ function dragClear(fn) {
 	window.removeEventListener('mouseup',    dragClear);
 }
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['data'],
 	data() {
 		return {
diff --git a/src/client/widgets/trends.chart.vue b/src/client/widgets/trends.chart.vue
index 5c4f74b6b4..c554cd436b 100644
--- a/src/client/widgets/trends.chart.vue
+++ b/src/client/widgets/trends.chart.vue
@@ -30,10 +30,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: Array,