From 54d40420ada996e844eed231117619928e130fce Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 18 Feb 2019 09:48:00 +0900
Subject: [PATCH] Use v-slot instead of slot

---
 src/client/app/admin/views/abuse.vue          |  2 +-
 src/client/app/admin/views/announcements.vue  |  2 +-
 src/client/app/admin/views/drive.vue          |  8 +--
 src/client/app/admin/views/emoji.vue          | 12 ++--
 src/client/app/admin/views/federation.vue     |  8 +--
 src/client/app/admin/views/hashtags.vue       |  2 +-
 src/client/app/admin/views/instance.vue       | 58 +++++++++----------
 src/client/app/admin/views/moderators.vue     |  4 +-
 src/client/app/admin/views/queue.vue          |  2 +-
 src/client/app/admin/views/users.vue          | 10 ++--
 .../common/views/components/api-settings.vue  |  4 +-
 .../app/common/views/components/dialog.vue    |  2 +-
 .../views/components/drive-settings.vue       |  2 +-
 .../views/components/integration-settings.vue |  2 +-
 .../views/components/language-settings.vue    |  2 +-
 .../views/components/mute-and-block.vue       |  4 +-
 .../components/notification-settings.vue      |  4 +-
 .../views/components/profile-editor.vue       | 26 ++++-----
 .../app/common/views/components/signin.vue    |  8 +--
 .../app/common/views/components/signup.vue    | 34 +++++------
 .../app/common/views/components/theme.vue     |  6 +-
 .../views/components/user-list-editor.vue     |  4 +-
 .../app/common/views/components/user-list.vue |  2 +-
 src/client/app/common/views/pages/explore.vue |  2 +-
 .../app/common/views/widgets/hashtags.vue     |  2 +-
 src/client/app/common/views/widgets/memo.vue  |  2 +-
 .../app/common/views/widgets/photo-stream.vue |  2 +-
 .../common/views/widgets/posts-monitor.vue    |  4 +-
 src/client/app/common/views/widgets/rss.vue   |  4 +-
 .../app/common/views/widgets/server.vue       |  4 +-
 .../app/desktop/views/components/activity.vue |  4 +-
 .../choose-file-from-drive-window.vue         | 10 ++--
 .../choose-folder-from-drive-window.vue       |  4 +-
 .../desktop/views/components/crop-window.vue  |  2 +-
 .../desktop/views/components/drive-window.vue |  2 +-
 .../desktop/views/components/game-window.vue  |  6 +-
 .../components/messaging-room-window.vue      |  6 +-
 .../views/components/messaging-window.vue     |  2 +-
 .../views/components/post-form-window.vue     | 16 ++---
 .../views/components/progress-dialog.vue      |  2 +-
 .../received-follow-requests-window.vue       |  2 +-
 .../views/components/renote-form-window.vue   |  2 +-
 .../views/components/settings-window.vue      |  2 +-
 .../app/desktop/views/components/settings.vue | 40 ++++++-------
 .../views/components/user-list-timeline.vue   |  2 +-
 .../views/components/user-list-window.vue     |  2 +-
 .../views/components/user-lists-window.vue    |  2 +-
 .../app/desktop/views/deck/deck.column.vue    |  2 +-
 .../desktop/views/deck/deck.direct-column.vue |  2 +-
 .../views/deck/deck.explore-column.vue        |  4 +-
 .../views/deck/deck.favorites-column.vue      |  4 +-
 .../views/deck/deck.featured-column.vue       |  4 +-
 .../views/deck/deck.hashtag-column.vue        |  4 +-
 .../views/deck/deck.mentions-column.vue       |  2 +-
 .../desktop/views/deck/deck.note-column.vue   |  4 +-
 .../views/deck/deck.notifications-column.vue  |  2 +-
 .../desktop/views/deck/deck.search-column.vue |  4 +-
 .../app/desktop/views/deck/deck.tl-column.vue |  4 +-
 .../views/deck/deck.user-column.home.vue      |  8 +--
 .../desktop/views/deck/deck.user-column.vue   |  4 +-
 .../views/deck/deck.widgets-column.vue        |  2 +-
 src/client/app/desktop/views/home/search.vue  |  8 ++-
 src/client/app/desktop/views/home/tag.vue     |  8 ++-
 .../app/desktop/views/home/timeline.core.vue  |  6 +-
 .../app/desktop/views/home/user/user.home.vue |  2 +-
 .../desktop/views/home/user/user.photos.vue   |  2 +-
 .../desktop/views/home/user/user.timeline.vue | 16 ++---
 .../app/desktop/views/widgets/messaging.vue   |  4 +-
 .../desktop/views/widgets/notifications.vue   |  4 +-
 .../app/desktop/views/widgets/polls.vue       | 12 ++--
 .../app/desktop/views/widgets/post-form.vue   |  2 +-
 .../app/desktop/views/widgets/trends.vue      |  4 +-
 .../app/desktop/views/widgets/users.vue       | 12 ++--
 src/client/app/mobile/views/components/ui.vue |  2 +-
 .../mobile/views/components/user-timeline.vue |  4 +-
 src/client/app/mobile/views/pages/drive.vue   |  6 +-
 src/client/app/mobile/views/pages/explore.vue |  2 +-
 .../app/mobile/views/pages/favorites.vue      |  2 +-
 .../app/mobile/views/pages/featured.vue       |  2 +-
 .../app/mobile/views/pages/games/reversi.vue  |  2 +-
 .../app/mobile/views/pages/home.timeline.vue  |  4 +-
 src/client/app/mobile/views/pages/home.vue    | 36 ++++++------
 .../app/mobile/views/pages/messaging-room.vue |  4 +-
 .../app/mobile/views/pages/messaging.vue      |  2 +-
 src/client/app/mobile/views/pages/note.vue    |  2 +-
 .../app/mobile/views/pages/notifications.vue  |  4 +-
 .../views/pages/received-follow-requests.vue  |  2 +-
 src/client/app/mobile/views/pages/search.vue  |  2 +-
 .../app/mobile/views/pages/settings.vue       | 14 ++---
 src/client/app/mobile/views/pages/tag.vue     |  2 +-
 .../app/mobile/views/pages/user-list.vue      |  2 +-
 .../app/mobile/views/pages/user-lists.vue     |  4 +-
 .../app/mobile/views/pages/user/index.vue     |  2 +-
 src/client/app/mobile/views/pages/widgets.vue |  4 +-
 .../app/mobile/views/widgets/activity.vue     |  2 +-
 src/client/app/test/views/index.vue           |  4 +-
 96 files changed, 291 insertions(+), 283 deletions(-)

diff --git a/src/client/app/admin/views/abuse.vue b/src/client/app/admin/views/abuse.vue
index 11be43eeb..141e0376c 100644
--- a/src/client/app/admin/views/abuse.vue
+++ b/src/client/app/admin/views/abuse.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title"><fa :icon="faExclamationCircle"/> {{ $t('title') }}</div>
+		<template v-slot:title><fa :icon="faExclamationCircle"/> {{ $t('title') }}</template>
 		<section class="fit-top">
 			<sequential-entrance animation="entranceFromTop" delay="25">
 				<div v-for="report in userReports" :key="report.id" class="haexwsjc">
diff --git a/src/client/app/admin/views/announcements.vue b/src/client/app/admin/views/announcements.vue
index f50239e09..4f2f85306 100644
--- a/src/client/app/admin/views/announcements.vue
+++ b/src/client/app/admin/views/announcements.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title"><fa icon="broadcast-tower"/> {{ $t('announcements') }}</div>
+		<template v-slot:title><fa icon="broadcast-tower"/> {{ $t('announcements') }}</template>
 		<section v-for="(announcement, i) in announcements" class="fit-top">
 			<ui-input v-model="announcement.title" @change="save">
 				<span>{{ $t('title') }}</span>
diff --git a/src/client/app/admin/views/drive.vue b/src/client/app/admin/views/drive.vue
index f973465ea..fe265637d 100644
--- a/src/client/app/admin/views/drive.vue
+++ b/src/client/app/admin/views/drive.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title"><fa :icon="faTerminal"/> {{ $t('operation') }}</div>
+		<template v-slot:title><fa :icon="faTerminal"/> {{ $t('operation') }}</template>
 		<section class="fit-top">
 			<ui-input v-model="target" type="text">
 				<span>{{ $t('fileid-or-url') }}</span>
@@ -17,18 +17,18 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="faCloud"/> {{ $t('@.drive') }}</div>
+		<template v-slot:title><fa :icon="faCloud"/> {{ $t('@.drive') }}</template>
 		<section class="fit-top">
 			<ui-horizon-group inputs>
 				<ui-select v-model="sort">
-					<span slot="label">{{ $t('sort.title') }}</span>
+					<template v-slot:label>{{ $t('sort.title') }}</template>
 					<option value="-createdAt">{{ $t('sort.createdAtAsc') }}</option>
 					<option value="+createdAt">{{ $t('sort.createdAtDesc') }}</option>
 					<option value="-size">{{ $t('sort.sizeAsc') }}</option>
 					<option value="+size">{{ $t('sort.sizeDesc') }}</option>
 				</ui-select>
 				<ui-select v-model="origin">
-					<span slot="label">{{ $t('origin.title') }}</span>
+					<template v-slot:label>{{ $t('origin.title') }}</template>
 					<option value="combined">{{ $t('origin.combined') }}</option>
 					<option value="local">{{ $t('origin.local') }}</option>
 					<option value="remote">{{ $t('origin.remote') }}</option>
diff --git a/src/client/app/admin/views/emoji.vue b/src/client/app/admin/views/emoji.vue
index 1a623f424..ae272b4df 100644
--- a/src/client/app/admin/views/emoji.vue
+++ b/src/client/app/admin/views/emoji.vue
@@ -1,20 +1,20 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title"><fa icon="plus"/> {{ $t('add-emoji.title') }}</div>
+		<template v-slot:title><fa icon="plus"/> {{ $t('add-emoji.title') }}</template>
 		<section class="fit-top">
 			<ui-horizon-group inputs>
 				<ui-input v-model="name">
 					<span>{{ $t('add-emoji.name') }}</span>
-					<span slot="desc">{{ $t('add-emoji.name-desc') }}</span>
+					<template v-slot:desc>{{ $t('add-emoji.name-desc') }}</template>
 				</ui-input>
 				<ui-input v-model="aliases">
 					<span>{{ $t('add-emoji.aliases') }}</span>
-					<span slot="desc">{{ $t('add-emoji.aliases-desc') }}</span>
+					<template v-slot:desc>{{ $t('add-emoji.aliases-desc') }}</template>
 				</ui-input>
 			</ui-horizon-group>
 			<ui-input v-model="url">
-				<i slot="icon"><fa icon="link"/></i>
+				<template v-slot:icon><fa icon="link"/></template>
 				<span>{{ $t('add-emoji.url') }}</span>
 			</ui-input>
 			<ui-info>{{ $t('add-emoji.info') }}</ui-info>
@@ -23,7 +23,7 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="faGrin"/> {{ $t('emojis.title') }}</div>
+		<template v-slot:title><fa :icon="faGrin"/> {{ $t('emojis.title') }}</template>
 		<section v-for="emoji in emojis" class="oryfrbft">
 			<div>
 				<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
@@ -38,7 +38,7 @@
 					</ui-input>
 				</ui-horizon-group>
 				<ui-input v-model="emoji.url">
-					<i slot="icon"><fa icon="link"/></i>
+					<template v-slot:icon><fa icon="link"/></template>
 					<span>{{ $t('add-emoji.url') }}</span>
 				</ui-input>
 				<ui-horizon-group class="fit-bottom">
diff --git a/src/client/app/admin/views/federation.vue b/src/client/app/admin/views/federation.vue
index 365ffdeae..c5f3d4e0e 100644
--- a/src/client/app/admin/views/federation.vue
+++ b/src/client/app/admin/views/federation.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title"><fa :icon="faTerminal"/> {{ $t('federation') }}</div>
+		<template v-slot:title><fa :icon="faTerminal"/> {{ $t('federation') }}</template>
 		<section class="fit-top">
 			<ui-input class="target" v-model="target" type="text" @enter="showInstance()">
 				<span>{{ $t('host') }}</span>
@@ -74,11 +74,11 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="faServer"/> {{ $t('instances') }}</div>
+		<template v-slot:title><fa :icon="faServer"/> {{ $t('instances') }}</template>
 		<section class="fit-top">
 			<ui-horizon-group inputs>
 				<ui-select v-model="sort">
-					<span slot="label">{{ $t('sort') }}</span>
+					<template v-slot:label>{{ $t('sort') }}</template>
 					<option value="-caughtAt">{{ $t('sorts.caughtAtAsc') }}</option>
 					<option value="+caughtAt">{{ $t('sorts.caughtAtDesc') }}</option>
 					<option value="-lastCommunicatedAt">{{ $t('sorts.lastCommunicatedAtAsc') }}</option>
@@ -97,7 +97,7 @@
 					<option value="+driveFiles">{{ $t('sorts.driveFilesDesc') }}</option>
 				</ui-select>
 				<ui-select v-model="state">
-					<span slot="label">{{ $t('state') }}</span>
+					<template v-slot:label>{{ $t('state') }}</template>
 					<option value="all">{{ $t('states.all') }}</option>
 					<option value="blocked">{{ $t('states.blocked') }}</option>
 					<option value="notResponding">{{ $t('states.not-responding') }}</option>
diff --git a/src/client/app/admin/views/hashtags.vue b/src/client/app/admin/views/hashtags.vue
index dc9f0b015..67b1ccde7 100644
--- a/src/client/app/admin/views/hashtags.vue
+++ b/src/client/app/admin/views/hashtags.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title">{{ $t('hided-tags') }}</div>
+		<template v-slot:title>{{ $t('hided-tags') }}</template>
 		<section>
 			<textarea class="jdnqwkzlnxcfftthoybjxrebyolvoucw" v-model="hidedTags"></textarea>
 			<ui-button @click="save">{{ $t('save') }}</ui-button>
diff --git a/src/client/app/admin/views/instance.vue b/src/client/app/admin/views/instance.vue
index bf30913b2..014b1743a 100644
--- a/src/client/app/admin/views/instance.vue
+++ b/src/client/app/admin/views/instance.vue
@@ -1,20 +1,20 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title"><fa icon="cog"/> {{ $t('instance') }}</div>
+		<template v-slot:title><fa icon="cog"/> {{ $t('instance') }}</template>
 		<section class="fit-top fit-bottom">
 			<ui-input :value="host" readonly>{{ $t('host') }}</ui-input>
 			<ui-input v-model="name">{{ $t('instance-name') }}</ui-input>
 			<ui-textarea v-model="description">{{ $t('instance-description') }}</ui-textarea>
-			<ui-input v-model="mascotImageUrl"><i slot="icon"><fa icon="link"/></i>{{ $t('logo-url') }}</ui-input>
-			<ui-input v-model="bannerUrl"><i slot="icon"><fa icon="link"/></i>{{ $t('banner-url') }}</ui-input>
-			<ui-input v-model="errorImageUrl"><i slot="icon"><fa icon="link"/></i>{{ $t('error-image-url') }}</ui-input>
-			<ui-input v-model="languages"><i slot="icon"><fa icon="language"/></i>{{ $t('languages') }}<span slot="desc">{{ $t('languages-desc') }}</span></ui-input>
+			<ui-input v-model="mascotImageUrl"><template v-slot:icon><fa icon="link"/></template>{{ $t('logo-url') }}</ui-input>
+			<ui-input v-model="bannerUrl"><template v-slot:icon><fa icon="link"/></template>{{ $t('banner-url') }}</ui-input>
+			<ui-input v-model="errorImageUrl"><template v-slot:icon><fa icon="link"/></template>{{ $t('error-image-url') }}</ui-input>
+			<ui-input v-model="languages"><template v-slot:icon><fa icon="language"/></template>{{ $t('languages') }}<template v-slot:desc>{{ $t('languages-desc') }}</template></ui-input>
 		</section>
 		<section class="fit-bottom">
 			<header><fa :icon="faHeadset"/> {{ $t('maintainer-config') }}</header>
 			<ui-input v-model="maintainerName">{{ $t('maintainer-name') }}</ui-input>
-			<ui-input v-model="maintainerEmail" type="email"><i slot="icon"><fa :icon="farEnvelope"/></i>{{ $t('maintainer-email') }}</ui-input>
+			<ui-input v-model="maintainerEmail" type="email"><template v-slot:icon><fa :icon="farEnvelope"/></template>{{ $t('maintainer-email') }}</ui-input>
 		</section>
 		<section class="fit-top fit-bottom">
 			<ui-input v-model="maxNoteTextLength">{{ $t('max-note-text-length') }}</ui-input>
@@ -27,28 +27,28 @@
 		</section>
 		<section class="fit-bottom">
 			<header><fa icon="cloud"/> {{ $t('drive-config') }}</header>
-			<ui-switch v-model="cacheRemoteFiles">{{ $t('cache-remote-files') }}<span slot="desc">{{ $t('cache-remote-files-desc') }}</span></ui-switch>
-			<ui-input v-model="localDriveCapacityMb" type="number">{{ $t('local-drive-capacity-mb') }}<span slot="suffix">MB</span><span slot="desc">{{ $t('mb') }}</span></ui-input>
-			<ui-input v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles">{{ $t('remote-drive-capacity-mb') }}<span slot="suffix">MB</span><span slot="desc">{{ $t('mb') }}</span></ui-input>
+			<ui-switch v-model="cacheRemoteFiles">{{ $t('cache-remote-files') }}<template v-slot:desc>{{ $t('cache-remote-files-desc') }}</template></ui-switch>
+			<ui-input v-model="localDriveCapacityMb" type="number">{{ $t('local-drive-capacity-mb') }}<template v-slot:suffix>MB</template><template v-slot:desc>{{ $t('mb') }}</template></ui-input>
+			<ui-input v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles">{{ $t('remote-drive-capacity-mb') }}<template v-slot:suffix>MB</template><template v-slot:desc>{{ $t('mb') }}</template></ui-input>
 		</section>
 		<section class="fit-bottom">
 			<header><fa :icon="faShieldAlt"/> {{ $t('recaptcha-config') }}</header>
 			<ui-switch v-model="enableRecaptcha">{{ $t('enable-recaptcha') }}</ui-switch>
 			<ui-info>{{ $t('recaptcha-info') }}</ui-info>
 			<ui-horizon-group inputs>
-				<ui-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><i slot="icon"><fa icon="key"/></i>{{ $t('recaptcha-site-key') }}</ui-input>
-				<ui-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><i slot="icon"><fa icon="key"/></i>{{ $t('recaptcha-secret-key') }}</ui-input>
+				<ui-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><template v-slot:icon><fa icon="key"/></template>{{ $t('recaptcha-site-key') }}</ui-input>
+				<ui-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><template v-slot:icon><fa icon="key"/></template>{{ $t('recaptcha-secret-key') }}</ui-input>
 			</ui-horizon-group>
 		</section>
 		<section>
 			<header><fa :icon="faGhost"/> {{ $t('proxy-account-config') }}</header>
 			<ui-info>{{ $t('proxy-account-info') }}</ui-info>
-			<ui-input v-model="proxyAccount"><span slot="prefix">@</span>{{ $t('proxy-account-username') }}<span slot="desc">{{ $t('proxy-account-username-desc') }}</span></ui-input>
+			<ui-input v-model="proxyAccount"><template v-slot:prefix>@</template>{{ $t('proxy-account-username') }}<template v-slot:desc>{{ $t('proxy-account-username-desc') }}</template></ui-input>
 			<ui-info warn>{{ $t('proxy-account-warn') }}</ui-info>
 		</section>
 		<section>
 			<header><fa :icon="farEnvelope"/> {{ $t('email-config') }}</header>
-			<ui-switch v-model="enableEmail">{{ $t('enable-email') }}<span slot="desc">{{ $t('email-config-info') }}</span></ui-switch>
+			<ui-switch v-model="enableEmail">{{ $t('enable-email') }}<template v-slot:desc>{{ $t('email-config-info') }}</template></ui-switch>
 			<ui-input v-model="email" type="email" :disabled="!enableEmail">{{ $t('email') }}</ui-input>
 			<ui-horizon-group inputs>
 				<ui-input v-model="smtpHost" :disabled="!enableEmail">{{ $t('smtp-host') }}</ui-input>
@@ -58,15 +58,15 @@
 				<ui-input v-model="smtpUser" :disabled="!enableEmail">{{ $t('smtp-user') }}</ui-input>
 				<ui-input v-model="smtpPass" type="password" :withPasswordToggle="true" :disabled="!enableEmail">{{ $t('smtp-pass') }}</ui-input>
 			</ui-horizon-group>
-			<ui-switch v-model="smtpSecure" :disabled="!enableEmail">{{ $t('smtp-secure') }}<span slot="desc">{{ $t('smtp-secure-info') }}</span></ui-switch>
+			<ui-switch v-model="smtpSecure" :disabled="!enableEmail">{{ $t('smtp-secure') }}<template v-slot:desc>{{ $t('smtp-secure-info') }}</template></ui-switch>
 		</section>
 		<section>
 			<header><fa :icon="faBolt"/> {{ $t('serviceworker-config') }}</header>
-			<ui-switch v-model="enableServiceWorker">{{ $t('enable-serviceworker') }}<span slot="desc">{{ $t('serviceworker-info') }}</span></ui-switch>
+			<ui-switch v-model="enableServiceWorker">{{ $t('enable-serviceworker') }}<template v-slot:desc>{{ $t('serviceworker-info') }}</template></ui-switch>
 			<ui-info>{{ $t('vapid-info') }}<br><code>npm i web-push -g<br>web-push generate-vapid-keys</code></ui-info>
 			<ui-horizon-group inputs class="fit-bottom">
-				<ui-input v-model="swPublicKey" :disabled="!enableServiceWorker"><i slot="icon"><fa icon="key"/></i>{{ $t('vapid-publickey') }}</ui-input>
-				<ui-input v-model="swPrivateKey" :disabled="!enableServiceWorker"><i slot="icon"><fa icon="key"/></i>{{ $t('vapid-privatekey') }}</ui-input>
+				<ui-input v-model="swPublicKey" :disabled="!enableServiceWorker"><template v-slot:icon><fa icon="key"/></template>{{ $t('vapid-publickey') }}</ui-input>
+				<ui-input v-model="swPrivateKey" :disabled="!enableServiceWorker"><template v-slot:icon><fa icon="key"/></template>{{ $t('vapid-privatekey') }}</ui-input>
 			</ui-horizon-group>
 		</section>
 		<section>
@@ -76,8 +76,8 @@
 		<section>
 			<header><fa :icon="faUserPlus"/> {{ $t('user-recommendation-config') }}</header>
 			<ui-switch v-model="enableExternalUserRecommendation">{{ $t('enable-external-user-recommendation') }}</ui-switch>
-			<ui-input v-model="externalUserRecommendationEngine" :disabled="!enableExternalUserRecommendation">{{ $t('external-user-recommendation-engine') }}<span slot="desc">{{ $t('external-user-recommendation-engine-desc') }}</span></ui-input>
-			<ui-input v-model="externalUserRecommendationTimeout" type="number" :disabled="!enableExternalUserRecommendation">{{ $t('external-user-recommendation-timeout') }}<span slot="suffix">ms</span><span slot="desc">{{ $t('external-user-recommendation-timeout-desc') }}</span></ui-input>
+			<ui-input v-model="externalUserRecommendationEngine" :disabled="!enableExternalUserRecommendation">{{ $t('external-user-recommendation-engine') }}<template v-slot:desc>{{ $t('external-user-recommendation-engine-desc') }}</template></ui-input>
+			<ui-input v-model="externalUserRecommendationTimeout" type="number" :disabled="!enableExternalUserRecommendation">{{ $t('external-user-recommendation-timeout') }}<template v-slot:suffix>ms</template><template v-slot:desc>{{ $t('external-user-recommendation-timeout-desc') }}</template></ui-input>
 		</section>
 		<section>
 			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
@@ -85,7 +85,7 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title">{{ $t('invite') }}</div>
+		<template v-slot:title>{{ $t('invite') }}</template>
 		<section>
 			<ui-button @click="invite">{{ $t('invite') }}</ui-button>
 			<p v-if="inviteCode">Code: <code>{{ inviteCode }}</code></p>
@@ -93,12 +93,12 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter-integration-config') }}</div>
+		<template v-slot:title><fa :icon="['fab', 'twitter']"/> {{ $t('twitter-integration-config') }}</template>
 		<section>
 			<ui-switch v-model="enableTwitterIntegration">{{ $t('enable-twitter-integration') }}</ui-switch>
 			<ui-horizon-group>
-				<ui-input v-model="twitterConsumerKey" :disabled="!enableTwitterIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('twitter-integration-consumer-key') }}</ui-input>
-				<ui-input v-model="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('twitter-integration-consumer-secret') }}</ui-input>
+				<ui-input v-model="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template v-slot:icon><fa icon="key"/></template>{{ $t('twitter-integration-consumer-key') }}</ui-input>
+				<ui-input v-model="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><template v-slot:icon><fa icon="key"/></template>{{ $t('twitter-integration-consumer-secret') }}</ui-input>
 			</ui-horizon-group>
 			<ui-info>{{ $t('twitter-integration-info', { url: `${url}/api/tw/cb` }) }}</ui-info>
 			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
@@ -106,12 +106,12 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="['fab', 'github']"/> {{ $t('github-integration-config') }}</div>
+		<template v-slot:title><fa :icon="['fab', 'github']"/> {{ $t('github-integration-config') }}</template>
 		<section>
 			<ui-switch v-model="enableGithubIntegration">{{ $t('enable-github-integration') }}</ui-switch>
 			<ui-horizon-group>
-				<ui-input v-model="githubClientId" :disabled="!enableGithubIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('github-integration-client-id') }}</ui-input>
-				<ui-input v-model="githubClientSecret" :disabled="!enableGithubIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('github-integration-client-secret') }}</ui-input>
+				<ui-input v-model="githubClientId" :disabled="!enableGithubIntegration"><template v-slot:icon><fa icon="key"/></template>{{ $t('github-integration-client-id') }}</ui-input>
+				<ui-input v-model="githubClientSecret" :disabled="!enableGithubIntegration"><template v-slot:icon><fa icon="key"/></template>{{ $t('github-integration-client-secret') }}</ui-input>
 			</ui-horizon-group>
 			<ui-info>{{ $t('github-integration-info', { url: `${url}/api/gh/cb` }) }}</ui-info>
 			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
@@ -119,12 +119,12 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="['fab', 'discord']"/> {{ $t('discord-integration-config') }}</div>
+		<template v-slot:title><fa :icon="['fab', 'discord']"/> {{ $t('discord-integration-config') }}</template>
 		<section>
 			<ui-switch v-model="enableDiscordIntegration">{{ $t('enable-discord-integration') }}</ui-switch>
 			<ui-horizon-group>
-				<ui-input v-model="discordClientId" :disabled="!enableDiscordIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('discord-integration-client-id') }}</ui-input>
-				<ui-input v-model="discordClientSecret" :disabled="!enableDiscordIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('discord-integration-client-secret') }}</ui-input>
+				<ui-input v-model="discordClientId" :disabled="!enableDiscordIntegration"><template v-slot:icon><fa icon="key"/></template>{{ $t('discord-integration-client-id') }}</ui-input>
+				<ui-input v-model="discordClientSecret" :disabled="!enableDiscordIntegration"><template v-slot:icon><fa icon="key"/></template>{{ $t('discord-integration-client-secret') }}</ui-input>
 			</ui-horizon-group>
 			<ui-info>{{ $t('discord-integration-info', { url: `${url}/api/dc/cb` }) }}</ui-info>
 			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
diff --git a/src/client/app/admin/views/moderators.vue b/src/client/app/admin/views/moderators.vue
index 89a7c75e2..0e5af1d41 100644
--- a/src/client/app/admin/views/moderators.vue
+++ b/src/client/app/admin/views/moderators.vue
@@ -1,10 +1,10 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title"><fa icon="plus"/> {{ $t('add-moderator.title') }}</div>
+		<template v-slot:title><fa icon="plus"/> {{ $t('add-moderator.title') }}</template>
 		<section class="fit-top">
 			<ui-input v-model="username" type="text">
-				<span slot="prefix">@</span>
+				<template v-slot:prefix>@</template>
 			</ui-input>
 			<ui-horizon-group>
 				<ui-button @click="add" :disabled="changing">{{ $t('add-moderator.add') }}</ui-button>
diff --git a/src/client/app/admin/views/queue.vue b/src/client/app/admin/views/queue.vue
index e26b86e3e..f75c73d7a 100644
--- a/src/client/app/admin/views/queue.vue
+++ b/src/client/app/admin/views/queue.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title">{{ $t('operation') }}</div>
+		<template v-slot:title>{{ $t('operation') }}</template>
 		<section>
 			<ui-button @click="removeAllJobs">{{ $t('remove-all-jobs') }}</ui-button>
 		</section>
diff --git a/src/client/app/admin/views/users.vue b/src/client/app/admin/views/users.vue
index db9f521bc..46399ef69 100644
--- a/src/client/app/admin/views/users.vue
+++ b/src/client/app/admin/views/users.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<ui-card>
-		<div slot="title"><fa :icon="faTerminal"/> {{ $t('operation') }}</div>
+		<template v-slot:title><fa :icon="faTerminal"/> {{ $t('operation') }}</template>
 		<section class="fit-top">
 			<ui-input class="target" v-model="target" type="text" @enter="showUser">
 				<span>{{ $t('username-or-userid') }}</span>
@@ -32,18 +32,18 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="faUsers"/> {{ $t('users.title') }}</div>
+		<template v-slot:title><fa :icon="faUsers"/> {{ $t('users.title') }}</template>
 		<section class="fit-top">
 			<ui-horizon-group inputs>
 				<ui-select v-model="sort">
-					<span slot="label">{{ $t('users.sort.title') }}</span>
+					<template v-slot:label>{{ $t('users.sort.title') }}</template>
 					<option value="-createdAt">{{ $t('users.sort.createdAtAsc') }}</option>
 					<option value="+createdAt">{{ $t('users.sort.createdAtDesc') }}</option>
 					<option value="-updatedAt">{{ $t('users.sort.updatedAtAsc') }}</option>
 					<option value="+updatedAt">{{ $t('users.sort.updatedAtDesc') }}</option>
 				</ui-select>
 				<ui-select v-model="state">
-					<span slot="label">{{ $t('users.state.title') }}</span>
+					<template v-slot:label>{{ $t('users.state.title') }}</template>
 					<option value="all">{{ $t('users.state.all') }}</option>
 					<option value="admin">{{ $t('users.state.admin') }}</option>
 					<option value="moderator">{{ $t('users.state.moderator') }}</option>
@@ -52,7 +52,7 @@
 					<option value="suspended">{{ $t('users.state.suspended') }}</option>
 				</ui-select>
 				<ui-select v-model="origin">
-					<span slot="label">{{ $t('users.origin.title') }}</span>
+					<template v-slot:label>{{ $t('users.origin.title') }}</template>
 					<option value="combined">{{ $t('users.origin.combined') }}</option>
 					<option value="local">{{ $t('users.origin.local') }}</option>
 					<option value="remote">{{ $t('users.origin.remote') }}</option>
diff --git a/src/client/app/common/views/components/api-settings.vue b/src/client/app/common/views/components/api-settings.vue
index e96eb28d9..c0361726a 100644
--- a/src/client/app/common/views/components/api-settings.vue
+++ b/src/client/app/common/views/components/api-settings.vue
@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="key"/> API</div>
+	<template v-slot:title><fa icon="key"/> API</template>
 
 	<section class="fit-top">
 		<ui-input :value="$store.state.i.token" readonly>
@@ -19,7 +19,7 @@
 		</ui-input>
 		<ui-textarea v-model="body">
 			<span>{{ $t('console.parameter') }} (JSON or JSON5)</span>
-			<span slot="desc">{{ $t('console.credential-info') }}</span>
+			<template v-slot:desc>{{ $t('console.credential-info') }}</template>
 		</ui-textarea>
 		<ui-button @click="send" :disabled="sending">
 			<template v-if="sending">{{ $t('console.sending') }}</template>
diff --git a/src/client/app/common/views/components/dialog.vue b/src/client/app/common/views/components/dialog.vue
index 9eb9151a0..95b7265f7 100644
--- a/src/client/app/common/views/components/dialog.vue
+++ b/src/client/app/common/views/components/dialog.vue
@@ -6,7 +6,7 @@
 		<header v-if="title" v-html="title"></header>
 		<div class="body" v-if="text" v-html="text"></div>
 		<ui-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></ui-input>
-		<ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><span slot="prefix">@</span></ui-input>
+		<ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template v-slot:prefix>@</template></ui-input>
 		<ui-select v-if="select" v-model="selectedValue">
 			<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 		</ui-select>
diff --git a/src/client/app/common/views/components/drive-settings.vue b/src/client/app/common/views/components/drive-settings.vue
index 89a23686b..72129f8e5 100644
--- a/src/client/app/common/views/components/drive-settings.vue
+++ b/src/client/app/common/views/components/drive-settings.vue
@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="cloud"/> {{ $t('@.drive') }}</div>
+	<template v-slot:title><fa icon="cloud"/> {{ $t('@.drive') }}</template>
 
 	<section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn">
 		<div class="meter"><div :style="meterStyle"></div></div>
diff --git a/src/client/app/common/views/components/integration-settings.vue b/src/client/app/common/views/components/integration-settings.vue
index a9b17779b..2036645e0 100644
--- a/src/client/app/common/views/components/integration-settings.vue
+++ b/src/client/app/common/views/components/integration-settings.vue
@@ -1,6 +1,6 @@
 <template>
 <ui-card v-if="enableTwitterIntegration || enableDiscordIntegration || enableGithubIntegration">
-	<div slot="title"><fa icon="share-alt"/> {{ $t('title') }}</div>
+	<template v-slot:title><fa icon="share-alt"/> {{ $t('title') }}</template>
 
 	<section v-if="enableTwitterIntegration">
 		<header><fa :icon="['fab', 'twitter']"/> Twitter</header>
diff --git a/src/client/app/common/views/components/language-settings.vue b/src/client/app/common/views/components/language-settings.vue
index aa3f29051..6ab18abca 100644
--- a/src/client/app/common/views/components/language-settings.vue
+++ b/src/client/app/common/views/components/language-settings.vue
@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="language"/> {{ $t('title') }}</div>
+	<template v-slot:title><fa icon="language"/> {{ $t('title') }}</template>
 
 	<section class="fit-top">
 		<ui-select v-model="lang" :placeholder="$t('pick-language')">
diff --git a/src/client/app/common/views/components/mute-and-block.vue b/src/client/app/common/views/components/mute-and-block.vue
index 97e992ace..fcdbcf264 100644
--- a/src/client/app/common/views/components/mute-and-block.vue
+++ b/src/client/app/common/views/components/mute-and-block.vue
@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="ban"/> {{ $t('mute-and-block') }}</div>
+	<template v-slot:title><fa icon="ban"/> {{ $t('mute-and-block') }}</template>
 
 	<section>
 		<header>{{ $t('mute') }}</header>
@@ -25,7 +25,7 @@
 	<section>
 		<header>{{ $t('word-mute') }}</header>
 		<ui-textarea v-model="mutedWords">
-			{{ $t('muted-words') }}<span slot="desc">{{ $t('muted-words-description') }}</span>
+			{{ $t('muted-words') }}<template v-slot:desc>{{ $t('muted-words-description') }}</template>
 		</ui-textarea>
 		<ui-button @click="save">{{ $t('save') }}</ui-button>
 	</section>
diff --git a/src/client/app/common/views/components/notification-settings.vue b/src/client/app/common/views/components/notification-settings.vue
index 68e3e7b3a..e1e112819 100644
--- a/src/client/app/common/views/components/notification-settings.vue
+++ b/src/client/app/common/views/components/notification-settings.vue
@@ -1,9 +1,9 @@
 <template>
 <ui-card>
-	<div slot="title"><fa :icon="['far', 'bell']"/> {{ $t('title') }}</div>
+	<template v-slot:title><fa :icon="['far', 'bell']"/> {{ $t('title') }}</template>
 	<section>
 		<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
-			{{ $t('auto-watch') }}<span slot="desc">{{ $t('auto-watch-desc') }}</span>
+			{{ $t('auto-watch') }}<template v-slot:desc>{{ $t('auto-watch-desc') }}</template>
 		</ui-switch>
 		<section>
 			<ui-button @click="readAllNotifications">{{ $t('mark-as-read-all-notifications') }}</ui-button>
diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/profile-editor.vue
index 2c9dc5445..66e568619 100644
--- a/src/client/app/common/views/components/profile-editor.vue
+++ b/src/client/app/common/views/components/profile-editor.vue
@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="user"/> {{ $t('title') }}</div>
+	<template v-slot:title><fa icon="user"/> {{ $t('title') }}</template>
 
 	<section class="esokaraujimuwfttfzgocmutcihewscl">
 		<div class="header" :style="bannerStyle">
@@ -14,41 +14,41 @@
 
 			<ui-input v-model="username" readonly>
 				<span>{{ $t('account') }}</span>
-				<span slot="prefix">@</span>
-				<span slot="suffix">@{{ host }}</span>
+				<template v-slot:prefix>@</template>
+				<template v-slot:suffix>@{{ host }}</template>
 			</ui-input>
 
 			<ui-input v-model="location">
 				<span>{{ $t('location') }}</span>
-				<span slot="prefix"><fa icon="map-marker-alt"/></span>
+				<template v-slot:prefix><fa icon="map-marker-alt"/></template>
 			</ui-input>
 
 			<ui-input v-model="birthday" type="date">
-				<span slot="title">{{ $t('birthday') }}</span>
-				<span slot="prefix"><fa icon="birthday-cake"/></span>
+				<template v-slot:title>{{ $t('birthday') }}</template>
+				<template v-slot:prefix><fa icon="birthday-cake"/></template>
 			</ui-input>
 
 			<ui-textarea v-model="description" :max="500">
 				<span>{{ $t('description') }}</span>
-				<span slot="desc">{{ $t('you-can-include-hashtags') }}</span>
+				<template v-slot:desc>{{ $t('you-can-include-hashtags') }}</template>
 			</ui-textarea>
 
 			<ui-select v-model="lang">
-				<span slot="label">{{ $t('language') }}</span>
-				<span slot="icon"><fa icon="language"/></span>
+				<template v-slot:label>{{ $t('language') }}</template>
+				<template v-slot:icon><fa icon="language"/></template>
 				<option v-for="lang in unique(Object.values(langmap).map(x => x.nativeName)).map(name => Object.keys(langmap).find(k => langmap[k].nativeName == name))" :value="lang" :key="lang">{{ langmap[lang].nativeName }}</option>
 			</ui-select>
 
 			<ui-input type="file" @change="onAvatarChange">
 				<span>{{ $t('avatar') }}</span>
-				<span slot="icon"><fa icon="image"/></span>
-				<span slot="desc" v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
+				<template v-slot:icon><fa icon="image"/></template>
+				<template v-slot:desc v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
 			</ui-input>
 
 			<ui-input type="file" @change="onBannerChange">
 				<span>{{ $t('banner') }}</span>
-				<span slot="icon"><fa icon="image"/></span>
-				<span slot="desc" v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
+				<template v-slot:icon><fa icon="image"/></template>
+				<template v-slot:desc v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
 			</ui-input>
 
 			<ui-button @click="save(true)">{{ $t('save') }}</ui-button>
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 93d19edf2..230ade996 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -3,16 +3,16 @@
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange" styl="fill">
 		<span>{{ $t('username') }}</span>
-		<span slot="prefix">@</span>
-		<span slot="suffix">@{{ host }}</span>
+		<template v-slot:prefix>@</template>
+		<template v-slot:suffix>@{{ host }}</template>
 	</ui-input>
 	<ui-input v-model="password" type="password" :with-password-toggle="true" required styl="fill">
 		<span>{{ $t('password') }}</span>
-		<span slot="prefix"><fa icon="lock"/></span>
+		<template v-slot:prefix><fa icon="lock"/></template>
 	</ui-input>
 	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill">
 		<span>{{ $t('@.2fa') }}</span>
-		<span slot="prefix"><fa icon="gavel"/></span>
+		<template v-slot:prefix><fa icon="gavel"/></template>
 	</ui-input>
 	<ui-button type="submit" :disabled="signing">{{ signing ? $t('signing-in') : $t('signin') }}</ui-button>
 	<p v-if="meta && meta.enableTwitterIntegration" style="margin: 8px 0;"><a :href="`${apiUrl}/signin/twitter`">{{ $t('signin-with-twitter') }}</a></p>
diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue
index f38aaad8e..a22861737 100644
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -3,37 +3,37 @@
 	<template v-if="meta">
 		<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill">
 			<span>{{ $t('invitation-code') }}</span>
-			<span slot="prefix"><fa icon="id-card-alt"/></span>
-			<p slot="desc" v-html="this.$t('invitation-info').replace('{}', 'mailto:' + meta.maintainer.email)"></p>
+			<template v-slot:prefix><fa icon="id-card-alt"/></template>
+			<template v-slot:desc v-html="this.$t('invitation-info').replace('{}', 'mailto:' + meta.maintainer.email)"></template>
 		</ui-input>
 		<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill">
 			<span>{{ $t('username') }}</span>
-			<span slot="prefix">@</span>
-			<span slot="suffix">@{{ host }}</span>
-			<p slot="desc" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner" pulse fixed-width/> {{ $t('checking') }}</p>
-			<p slot="desc" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('available') }}</p>
-			<p slot="desc" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('unavailable') }}</p>
-			<p slot="desc" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('error') }}</p>
-			<p slot="desc" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('invalid-format') }}</p>
-			<p slot="desc" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-short') }}</p>
-			<p slot="desc" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-long') }}</p>
+			<template v-slot:prefix>@</template>
+			<template v-slot:suffix>@{{ host }}</template>
+			<template v-slot:desc v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner" pulse fixed-width/> {{ $t('checking') }}</template>
+			<template v-slot:desc v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('available') }}</template>
+			<template v-slot:desc v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('unavailable') }}</template>
+			<template v-slot:desc v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('error') }}</template>
+			<template v-slot:desc v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('invalid-format') }}</template>
+			<template v-slot:desc v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-short') }}</template>
+			<template v-slot:desc v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-long') }}</template>
 		</ui-input>
 		<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill">
 			<span>{{ $t('password') }}</span>
-			<span slot="prefix"><fa icon="lock"/></span>
-			<div slot="desc">
+			<template v-slot:prefix><fa icon="lock"/></template>
+			<template v-slot:desc>
 				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('weak-password') }}</p>
 				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('normal-password') }}</p>
 				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('strong-password') }}</p>
-			</div>
+			</template>
 		</ui-input>
 		<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill">
 			<span>{{ $t('password') }} ({{ $t('retype') }})</span>
-			<span slot="prefix"><fa icon="lock"/></span>
-			<div slot="desc">
+			<template v-slot:prefix><fa icon="lock"/></template>
+			<template v-slot:desc>
 				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('password-matched') }}</p>
 				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('password-not-matched') }}</p>
-			</div>
+			</template>
 		</ui-input>
 		<div v-if="meta.enableRecaptcha" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
 		<ui-button type="submit">{{ $t('create') }}</ui-button>
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 1a2381e56..266b32be3 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -1,10 +1,10 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
+	<template v-slot:title><fa icon="palette"/> {{ $t('theme') }}</template>
 	<section class="nicnklzforebnpfgasiypmpdaaglujqm fit-top">
 		<label>
 			<ui-select v-model="light" :placeholder="$t('light-theme')">
-				<span slot="label"><fa :icon="faSun"/> {{ $t('light-theme') }}</span>
+				<template v-slot:label><fa :icon="faSun"/> {{ $t('light-theme') }}</template>
 				<optgroup :label="$t('light-themes')">
 					<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 				</optgroup>
@@ -16,7 +16,7 @@
 
 		<label>
 			<ui-select v-model="dark" :placeholder="$t('dark-theme')">
-				<span slot="label"><fa :icon="faMoon"/> {{ $t('dark-theme') }}</span>
+				<template v-slot:label><fa :icon="faMoon"/> {{ $t('dark-theme') }}</template>
 				<optgroup :label="$t('dark-themes')">
 					<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 				</optgroup>
diff --git a/src/client/app/common/views/components/user-list-editor.vue b/src/client/app/common/views/components/user-list-editor.vue
index 1b068da86..d230260c7 100644
--- a/src/client/app/common/views/components/user-list-editor.vue
+++ b/src/client/app/common/views/components/user-list-editor.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="cudqjmnl">
 	<ui-card>
-		<div slot="title"><fa :icon="faList"/> {{ list.title }}</div>
+		<template v-slot:title><fa :icon="faList"/> {{ list.title }}</template>
 
 		<section>
 			<ui-button @click="rename"><fa :icon="faICursor"/> {{ $t('rename') }}</ui-button>
@@ -10,7 +10,7 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title"><fa :icon="faUsers"/> {{ $t('users') }}</div>
+		<template v-slot:title><fa :icon="faUsers"/> {{ $t('users') }}</template>
 
 		<section>
 			<sequential-entrance animation="entranceFromTop" delay="25">
diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue
index ee44eac86..2c258f727 100644
--- a/src/client/app/common/views/components/user-list.vue
+++ b/src/client/app/common/views/components/user-list.vue
@@ -1,6 +1,6 @@
 <template>
 <ui-container :body-togglable="true">
-	<template slot="header"><slot></slot></template>
+	<template v-slot:header><slot></slot></template>
 
 	<mk-error v-if="!fetching && !inited" @retry="init()"/>
 
diff --git a/src/client/app/common/views/pages/explore.vue b/src/client/app/common/views/pages/explore.vue
index 5c53fbc64..8fe17b46c 100644
--- a/src/client/app/common/views/pages/explore.vue
+++ b/src/client/app/common/views/pages/explore.vue
@@ -8,7 +8,7 @@
 	</mk-user-list>
 
 	<ui-container :body-togglable="true">
-		<template slot="header"><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template>
+		<template v-slot:header><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template>
 
 		<div class="vxjfqztj">
 			<router-link v-for="tag in tags" :to="`/explore/tags/${tag.tag}`" :key="tag.tag">{{ tag.tag }}</router-link>
diff --git a/src/client/app/common/views/widgets/hashtags.vue b/src/client/app/common/views/widgets/hashtags.vue
index 10425abae..02bcaa1a5 100644
--- a/src/client/app/common/views/widgets/hashtags.vue
+++ b/src/client/app/common/views/widgets/hashtags.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-hashtags">
 	<ui-container :show-header="!props.compact">
-		<template slot="header"><fa icon="hashtag"/>{{ $t('title') }}</template>
+		<template v-slot:header><fa icon="hashtag"/>{{ $t('title') }}</template>
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
 			<mk-trends/>
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 8e25d2589..47e8df3df 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-memo">
 	<ui-container :show-header="!props.compact">
-		<template slot="header"><fa :icon="['far', 'sticky-note']"/>{{ $t('title') }}</template>
+		<template v-slot:header><fa :icon="['far', 'sticky-note']"/>{{ $t('title') }}</template>
 
 		<div class="mkw-memo--body">
 			<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
diff --git a/src/client/app/common/views/widgets/photo-stream.vue b/src/client/app/common/views/widgets/photo-stream.vue
index 621f3c545..0c03a7ec6 100644
--- a/src/client/app/common/views/widgets/photo-stream.vue
+++ b/src/client/app/common/views/widgets/photo-stream.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-photo-stream" :class="$style.root" :data-melt="props.design == 2">
 	<ui-container :show-header="props.design == 0" :naked="props.design == 2">
-		<template slot="header"><fa icon="camera"/>{{ $t('title') }}</template>
+		<template v-slot:header><fa icon="camera"/>{{ $t('title') }}</template>
 
 		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 		<div :class="$style.stream" v-if="!fetching && images.length > 0">
diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
index 0c921e9e4..e96ce0d86 100644
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-posts-monitor">
 	<ui-container :show-header="props.design == 0" :naked="props.design == 2">
-		<template slot="header"><fa icon="chart-line"/>{{ $t('title') }}</template>
-		<button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button>
+		<template v-slot:header><fa icon="chart-line"/>{{ $t('title') }}</template>
+		<template v-slot:func><button @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button></template>
 
 		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
 			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue
index 25f0638b9..2dffd26c5 100644
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/src/client/app/common/views/widgets/rss.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-rss">
 	<ui-container :show-header="!props.compact">
-		<template slot="header"><fa icon="rss-square"/>RSS</template>
-		<button slot="func" title="設定" @click="setting"><fa icon="cog"/></button>
+		<template v-slot:header><fa icon="rss-square"/>RSS</template>
+		<template v-slot:func><button title="設定" @click="setting"><fa icon="cog"/></button></template>
 
 		<div class="mkw-rss--body" :data-mobile="platform == 'mobile'">
 			<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
diff --git a/src/client/app/common/views/widgets/server.vue b/src/client/app/common/views/widgets/server.vue
index dbc4050b2..d7bc62013 100644
--- a/src/client/app/common/views/widgets/server.vue
+++ b/src/client/app/common/views/widgets/server.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-server">
 	<ui-container :show-header="props.design == 0" :naked="props.design == 2">
-		<template slot="header"><fa icon="server"/>{{ $t('title') }}</template>
-		<button slot="func" @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button>
+		<template v-slot:header><fa icon="server"/>{{ $t('title') }}</template>
+		<template v-slot:func><button @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button></template>
 
 		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 		<template v-if="!fetching">
diff --git a/src/client/app/desktop/views/components/activity.vue b/src/client/app/desktop/views/components/activity.vue
index d258f7eae..d32fa2a2d 100644
--- a/src/client/app/desktop/views/components/activity.vue
+++ b/src/client/app/desktop/views/components/activity.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mk-activity">
 	<ui-container :show-header="design == 0" :naked="design == 2">
-		<template slot="header"><fa icon="chart-bar"/>{{ $t('title') }}</template>
-		<button slot="func" :title="$t('toggle')" @click="toggle"><fa icon="sort"/></button>
+		<template v-slot:header><fa icon="chart-bar"/>{{ $t('title') }}</template>
+		<template v-slot:func><button :title="$t('toggle')" @click="toggle"><fa icon="sort"/></button></template>
 
 		<p :class="$style.fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 		<template v-else>
diff --git a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
index 7c69f3aa7..b3048d975 100644
--- a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -1,9 +1,11 @@
 <template>
 <mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
-	<span slot="header" class="jqiaciqv">
-		<span class="title">{{ $t('choose-prompt') }}</span>
-		<span class="count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
-	</span>
+	<template v-slot:header>
+		<span class="jqiaciqv">
+			<span class="title">{{ $t('choose-prompt') }}</span>
+			<span class="count" v-if="multiple && files.length > 0">({{ $t('chosen-files', { count: files.length }) }})</span>
+		</span>
+	</template>
 
 	<div class="rqsvbumu">
 		<x-drive
diff --git a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
index 8633b86e4..c7bdc804e 100644
--- a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -1,8 +1,8 @@
 <template>
 <mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
-	<span slot="header">
+	<template v-slot:header>
 		<span>{{ $t('choose-prompt') }}</span>
-	</span>
+	</template>
 
 	<div class="hllkpxxu">
 		<x-drive
diff --git a/src/client/app/desktop/views/components/crop-window.vue b/src/client/app/desktop/views/components/crop-window.vue
index 68a8f4b01..d1767113b 100644
--- a/src/client/app/desktop/views/components/crop-window.vue
+++ b/src/client/app/desktop/views/components/crop-window.vue
@@ -1,6 +1,6 @@
 <template>
 	<mk-window ref="window" is-modal width="800px" :can-close="false">
-		<span slot="header"><fa icon="crop"/>{{ title }}</span>
+		<template v-slot:header><fa icon="crop"/>{{ title }}</template>
 		<div class="body">
 			<vue-cropper ref="cropper"
 				:src="image.url"
diff --git a/src/client/app/desktop/views/components/drive-window.vue b/src/client/app/desktop/views/components/drive-window.vue
index be828f53c..a3a4e595d 100644
--- a/src/client/app/desktop/views/components/drive-window.vue
+++ b/src/client/app/desktop/views/components/drive-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" @closed="destroyDom" width="800px" height="500px" :popout-url="popout">
-	<template slot="header">
+	<template v-slot:header>
 		<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> {{ $t('used') }}</p>
 		<span :class="$style.title"><fa icon="cloud"/>{{ $t('@.drive') }}</span>
 	</template>
diff --git a/src/client/app/desktop/views/components/game-window.vue b/src/client/app/desktop/views/components/game-window.vue
index 9f8e0a2aa..755295d6d 100644
--- a/src/client/app/desktop/views/components/game-window.vue
+++ b/src/client/app/desktop/views/components/game-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
-	<span slot="header" :class="$style.header"><fa icon="gamepad"/>{{ $t('game') }}</span>
+	<template v-slot:header><fa icon="gamepad"/> {{ $t('game') }}</template>
 	<x-reversi :class="$style.content" @gamed="g => game = g"/>
 </mk-window>
 </template>
@@ -31,10 +31,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-.header
-	> [data-icon]
-		margin-right 4px
-
 .content
 	height 100%
 	overflow auto
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index a7db1bca6..8b9a8ad5e 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
-	<span slot="header" :class="$style.header"><fa icon="comments"/>{{ $t('title') }} <mk-user-name :user="user"/></span>
+	<template v-slot:header><fa icon="comments"/> {{ $t('title') }} <mk-user-name :user="user"/></template>
 	<x-messaging-room :user="user" :class="$style.content"/>
 </mk-window>
 </template>
@@ -26,10 +26,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-.header
-	> [data-icon]
-		margin-right 4px
-
 .content
 	height 100%
 	overflow auto
diff --git a/src/client/app/desktop/views/components/messaging-window.vue b/src/client/app/desktop/views/components/messaging-window.vue
index 9b79fcb32..c602e5037 100644
--- a/src/client/app/desktop/views/components/messaging-window.vue
+++ b/src/client/app/desktop/views/components/messaging-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="500px" height="560px" @closed="destroyDom">
-	<span slot="header" :class="$style.header"><fa icon="comments"/>{{ $t('title') }}</span>
+	<template v-slot:header :class="$style.header"><fa icon="comments"/>{{ $t('title') }}</template>
 	<x-messaging :class="$style.content" @navigate="navigate"/>
 </mk-window>
 </template>
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index 1ed88ec1d..8ddb529b4 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -1,12 +1,14 @@
 <template>
 <mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed" :animation="animation">
-	<span slot="header" class="mk-post-form-window--header">
-		<span class="icon" v-if="geo"><fa icon="map-marker-alt"/></span>
-		<span v-if="!reply">{{ $t('note') }}</span>
-		<span v-if="reply">{{ $t('reply') }}</span>
-		<span class="count" v-if="files.length != 0">{{ this.$t('attaches').replace('{}', files.length) }}</span>
-		<span class="count" v-if="uploadings.length != 0">{{ this.$t('uploading-media').replace('{}', uploadings.length) }}<mk-ellipsis/></span>
-	</span>
+	<template v-slot:header>
+		<span class="mk-post-form-window--header">
+			<span class="icon" v-if="geo"><fa icon="map-marker-alt"/></span>
+			<span v-if="!reply">{{ $t('note') }}</span>
+			<span v-if="reply">{{ $t('reply') }}</span>
+			<span class="count" v-if="files.length != 0">{{ this.$t('attaches').replace('{}', files.length) }}</span>
+			<span class="count" v-if="uploadings.length != 0">{{ this.$t('uploading-media').replace('{}', uploadings.length) }}<mk-ellipsis/></span>
+		</span>
+	</template>
 
 	<div class="mk-post-form-window--body">
 		<mk-note-preview v-if="reply" class="notePreview" :note="reply"/>
diff --git a/src/client/app/desktop/views/components/progress-dialog.vue b/src/client/app/desktop/views/components/progress-dialog.vue
index 0bf4a0989..cc971769c 100644
--- a/src/client/app/desktop/views/components/progress-dialog.vue
+++ b/src/client/app/desktop/views/components/progress-dialog.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="destroyDom">
-	<span slot="header">{{ title }}<mk-ellipsis/></span>
+	<template v-slot:header>{{ title }}<mk-ellipsis/></template>
 	<div :class="$style.body">
 		<p :class="$style.init" v-if="isNaN(value)">{{ $t('waiting') }}<mk-ellipsis/></p>
 		<p :class="$style.percentage" v-if="!isNaN(value)">{{ Math.floor((value / max) * 100) }}</p>
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
index c01a43a4f..9cde684d2 100644
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
-	<span slot="header"><fa :icon="['far', 'envelope']"/> {{ $t('title') }}</span>
+	<template v-slot:header><fa :icon="['far', 'envelope']"/> {{ $t('title') }}</template>
 
 	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
 		<div v-for="req in requests">
diff --git a/src/client/app/desktop/views/components/renote-form-window.vue b/src/client/app/desktop/views/components/renote-form-window.vue
index b2bc9e4bf..ee6b26ddf 100644
--- a/src/client/app/desktop/views/components/renote-form-window.vue
+++ b/src/client/app/desktop/views/components/renote-form-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal @closed="onWindowClosed" :animation="animation">
-	<span slot="header" :class="$style.header"><fa icon="retweet"/>{{ $t('title') }}</span>
+	<template v-slot:header :class="$style.header"><fa icon="retweet"/>{{ $t('title') }}</template>
 	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
 </mk-window>
 </template>
diff --git a/src/client/app/desktop/views/components/settings-window.vue b/src/client/app/desktop/views/components/settings-window.vue
index dd7407cd9..54a8dfd6e 100644
--- a/src/client/app/desktop/views/components/settings-window.vue
+++ b/src/client/app/desktop/views/components/settings-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom">
-	<span slot="header" :class="$style.header"><fa icon="cog"/>{{ $t('settings') }}</span>
+	<template v-slot:header :class="$style.header"><fa icon="cog"/>{{ $t('settings') }}</template>
 	<x-settings :initial-page="initialPage" @done="close"/>
 </mk-window>
 </template>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 25e254f22..488742f25 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -22,17 +22,17 @@
 		<x-theme class="theme" v-show="page == 'theme'"/>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title"><fa icon="sliders-h"/> {{ $t('behaviour') }}</div>
+			<template v-slot:title><fa icon="sliders-h"/> {{ $t('behaviour') }}</template>
 
 			<section>
 				<ui-switch v-model="fetchOnScroll">{{ $t('fetch-on-scroll') }}
-					<span slot="desc">{{ $t('fetch-on-scroll-desc') }}</span>
+					<template v-slot:desc>{{ $t('fetch-on-scroll-desc') }}</template>
 				</ui-switch>
 				<ui-switch v-model="autoPopout">{{ $t('auto-popout') }}
-					<span slot="desc">{{ $t('auto-popout-desc') }}</span>
+					<template v-slot:desc>{{ $t('auto-popout-desc') }}</template>
 				</ui-switch>
 				<ui-switch v-model="keepCw">{{ $t('keep-cw') }}
-					<span slot="desc">{{ $t('keep-cw-desc') }}</span>
+					<template v-slot:desc>{{ $t('keep-cw-desc') }}</template>
 				</ui-switch>
 			</section>
 
@@ -62,12 +62,12 @@
 
 			<section>
 				<header>{{ $t('web-search-engine') }}</header>
-				<ui-input v-model="webSearchEngine">{{ $t('web-search-engine') }}<span slot="desc">{{ $t('web-search-engine-desc') }}</span></ui-input>
+				<ui-input v-model="webSearchEngine">{{ $t('web-search-engine') }}<template v-slot:desc>{{ $t('web-search-engine-desc') }}</template></ui-input>
 			</section>
 		</ui-card>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title"><fa icon="desktop"/> {{ $t('display') }}</div>
+			<template v-slot:title><fa icon="desktop"/> {{ $t('display') }}</template>
 
 			<section>
 				<ui-switch v-model="showPostFormOnTopOfTl">{{ $t('post-form-on-timeline') }}</ui-switch>
@@ -135,11 +135,11 @@
 		</ui-card>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title"><fa icon="volume-up"/> {{ $t('sound') }}</div>
+			<template v-slot:title><fa icon="volume-up"/> {{ $t('sound') }}</template>
 
 			<section>
 				<ui-switch v-model="enableSounds">{{ $t('enable-sounds') }}
-					<span slot="desc">{{ $t('enable-sounds-desc') }}</span>
+					<template v-slot:desc>{{ $t('enable-sounds-desc') }}</template>
 				</ui-switch>
 				<label>{{ $t('volume') }}</label>
 				<input type="range"
@@ -155,7 +155,7 @@
 		<x-language-settings v-show="page == 'web'"/>
 
 		<ui-card class="web" v-show="page == 'web'">
-			<div slot="title"><fa :icon="['far', 'trash-alt']"/> {{ $t('cache') }}</div>
+			<template v-slot:title><fa :icon="['far', 'trash-alt']"/> {{ $t('cache') }}</template>
 			<section>
 				<ui-button @click="clean">{{ $t('clean-cache') }}</ui-button>
 				<div class="none ui info warn">
@@ -171,7 +171,7 @@
 		</div>
 
 		<ui-card class="hashtags" v-show="page == 'hashtags'">
-			<div slot="title"><fa icon="hashtag"/> {{ $t('tags') }}</div>
+			<template v-slot:title><fa icon="hashtag"/> {{ $t('tags') }}</template>
 			<section>
 				<x-tags/>
 			</section>
@@ -182,28 +182,28 @@
 		</div>
 
 		<ui-card class="apps" v-show="page == 'apps'">
-			<div slot="title"><fa icon="puzzle-piece"/> {{ $t('apps') }}</div>
+			<template v-slot:title><fa icon="puzzle-piece"/> {{ $t('apps') }}</template>
 			<section>
 				<x-apps/>
 			</section>
 		</ui-card>
 
 		<ui-card class="password" v-show="page == 'security'">
-			<div slot="title"><fa icon="unlock-alt"/> {{ $t('password') }}</div>
+			<template v-slot:title><fa icon="unlock-alt"/> {{ $t('password') }}</template>
 			<section>
 				<x-password-settings/>
 			</section>
 		</ui-card>
 
 		<ui-card class="2fa" v-show="page == 'security'">
-			<div slot="title"><fa icon="mobile-alt"/> {{ $t('@.2fa') }}</div>
+			<template v-slot:title><fa icon="mobile-alt"/> {{ $t('@.2fa') }}</template>
 			<section>
 				<x-2fa/>
 			</section>
 		</ui-card>
 
 		<ui-card class="signin" v-show="page == 'security'">
-			<div slot="title"><fa icon="sign-in-alt"/> {{ $t('signin') }}</div>
+			<template v-slot:title><fa icon="sign-in-alt"/> {{ $t('signin') }}</template>
 			<section>
 				<x-signins/>
 			</section>
@@ -214,14 +214,14 @@
 		</div>
 
 		<ui-card class="other" v-show="page == 'other'">
-			<div slot="title"><fa icon="info-circle"/> {{ $t('about') }}</div>
+			<template v-slot:title><fa icon="info-circle"/> {{ $t('about') }}</template>
 			<section>
 				<p v-if="meta">{{ $t('operator') }}: <i><a :href="'mailto:' + meta.maintainer.email" target="_blank">{{ meta.maintainer.name }}</a></i></p>
 			</section>
 		</ui-card>
 
 		<ui-card class="other" v-show="page == 'other'">
-			<div slot="title"><fa icon="sync-alt"/> {{ $t('update') }}</div>
+			<template v-slot:title><fa icon="sync-alt"/> {{ $t('update') }}</template>
 			<section>
 				<p>
 					<span>{{ $t('version') }} <i>{{ version }}</i></span>
@@ -237,20 +237,20 @@
 				<details>
 					<summary>{{ $t('update-settings') }}</summary>
 					<ui-switch v-model="preventUpdate">
-						{{ $t('prevent-update') }}<span slot="desc">{{ $t('prevent-update-desc') }}</span>
+						{{ $t('prevent-update') }}<template v-slot:desc>{{ $t('prevent-update-desc') }}</template>
 					</ui-switch>
 				</details>
 			</section>
 		</ui-card>
 
 		<ui-card class="other" v-show="page == 'other'">
-			<div slot="title"><fa icon="cogs"/> {{ $t('advanced-settings') }}</div>
+			<template v-slot:title><fa icon="cogs"/> {{ $t('advanced-settings') }}</template>
 			<section>
 				<ui-switch v-model="debug">
-					{{ $t('debug-mode') }}<span slot="desc">{{ $t('debug-mode-desc') }}</span>
+					{{ $t('debug-mode') }}<template v-slot:desc>{{ $t('debug-mode-desc') }}</template>
 				</ui-switch>
 				<ui-switch v-model="enableExperimentalFeatures">
-					{{ $t('experimental') }}<span slot="desc">{{ $t('experimental-desc') }}</span>
+					{{ $t('experimental') }}<template v-slot:desc>{{ $t('experimental-desc') }}</template>
 				</ui-switch>
 			</section>
 		</ui-card>
diff --git a/src/client/app/desktop/views/components/user-list-timeline.vue b/src/client/app/desktop/views/components/user-list-timeline.vue
index d61de06ee..1870a8abb 100644
--- a/src/client/app/desktop/views/components/user-list-timeline.vue
+++ b/src/client/app/desktop/views/components/user-list-timeline.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
-		<template slot="header">
+		<template v-slot:header>
 			<slot></slot>
 		</template>
 	</mk-notes>
diff --git a/src/client/app/desktop/views/components/user-list-window.vue b/src/client/app/desktop/views/components/user-list-window.vue
index 054a133a4..38afb2c51 100644
--- a/src/client/app/desktop/views/components/user-list-window.vue
+++ b/src/client/app/desktop/views/components/user-list-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="450px" height="500px" @closed="destroyDom">
-	<span slot="header"><fa icon="list"/> {{ list.title }}</span>
+	<template v-slot:header><fa icon="list"/> {{ list.title }}</template>
 
 	<x-editor :list="list"/>
 </mk-window>
diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue
index 4ecbc760e..79e94d973 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" width="450px" height="500px" @closed="destroyDom">
-	<span slot="header"><fa icon="list"/> {{ $t('title') }}</span>
+	<template v-slot:header><fa icon="list"/> {{ $t('title') }}</template>
 
 	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
 		<button class="ui" @click="add">{{ $t('create-list') }}</button>
diff --git a/src/client/app/desktop/views/deck/deck.column.vue b/src/client/app/desktop/views/deck/deck.column.vue
index 016784e91..52bd8732b 100644
--- a/src/client/app/desktop/views/deck/deck.column.vue
+++ b/src/client/app/desktop/views/deck/deck.column.vue
@@ -14,7 +14,7 @@
 			<template v-if="active"><fa icon="angle-up"/></template>
 			<template v-else><fa icon="angle-down"/></template>
 		</button>
-		<slot name="header"></slot>
+		<span><slot name="header"></slot></span>
 		<span class="count" v-if="count > 0">({{ count }})</span>
 		<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu"><fa icon="caret-down"/></button>
 		<button v-else class="close" @click.stop="close"><fa icon="times"/></button>
diff --git a/src/client/app/desktop/views/deck/deck.direct-column.vue b/src/client/app/desktop/views/deck/deck.direct-column.vue
index a1acf4e7f..6b42c8923 100644
--- a/src/client/app/desktop/views/deck/deck.direct-column.vue
+++ b/src/client/app/desktop/views/deck/deck.direct-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header"><fa :icon="['far', 'envelope']"/>{{ name }}</span>
+	<template v-slot:header><fa :icon="['far', 'envelope']"/>{{ name }}</template>
 
 	<x-direct/>
 </x-column>
diff --git a/src/client/app/desktop/views/deck/deck.explore-column.vue b/src/client/app/desktop/views/deck/deck.explore-column.vue
index 3194ab663..760a8e449 100644
--- a/src/client/app/desktop/views/deck/deck.explore-column.vue
+++ b/src/client/app/desktop/views/deck/deck.explore-column.vue
@@ -1,8 +1,8 @@
 <template>
 <x-column>
-	<span slot="header">
+	<template v-slot:header>
 		<fa :icon="faHashtag"/>{{ $t('@.explore') }}
-	</span>
+	</template>
 
 	<div>
 		<x-explore v-bind="$attrs"/>
diff --git a/src/client/app/desktop/views/deck/deck.favorites-column.vue b/src/client/app/desktop/views/deck/deck.favorites-column.vue
index e0d5f8a33..585e3e46e 100644
--- a/src/client/app/desktop/views/deck/deck.favorites-column.vue
+++ b/src/client/app/desktop/views/deck/deck.favorites-column.vue
@@ -1,8 +1,8 @@
 <template>
 <x-column>
-	<span slot="header">
+	<template v-slot:header>
 		<fa :icon="['fa', 'star']"/>{{ $t('favorites') }}
-	</span>
+	</template>
 
 	<div>
 		<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
diff --git a/src/client/app/desktop/views/deck/deck.featured-column.vue b/src/client/app/desktop/views/deck/deck.featured-column.vue
index e654c1eaa..9db3ba039 100644
--- a/src/client/app/desktop/views/deck/deck.featured-column.vue
+++ b/src/client/app/desktop/views/deck/deck.featured-column.vue
@@ -1,8 +1,8 @@
 <template>
 <x-column>
-	<span slot="header">
+	<template v-slot:header>
 		<fa :icon="faNewspaper"/>{{ $t('@.featured-notes') }}
-	</span>
+	</template>
 
 	<div>
 		<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
diff --git a/src/client/app/desktop/views/deck/deck.hashtag-column.vue b/src/client/app/desktop/views/deck/deck.hashtag-column.vue
index ca2d8cdb8..43175f98a 100644
--- a/src/client/app/desktop/views/deck/deck.hashtag-column.vue
+++ b/src/client/app/desktop/views/deck/deck.hashtag-column.vue
@@ -1,8 +1,8 @@
 <template>
 <x-column>
-	<span slot="header">
+	<template v-slot:header>
 		<fa icon="hashtag"/><span>{{ tag }}</span>
-	</span>
+	</template>
 
 	<div class="xroyrflcmhhtmlwmyiwpfqiirqokfueb">
 		<div ref="chart" class="chart"></div>
diff --git a/src/client/app/desktop/views/deck/deck.mentions-column.vue b/src/client/app/desktop/views/deck/deck.mentions-column.vue
index 1fce65ea7..920d730e8 100644
--- a/src/client/app/desktop/views/deck/deck.mentions-column.vue
+++ b/src/client/app/desktop/views/deck/deck.mentions-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header"><fa icon="at"/>{{ name }}</span>
+	<template v-slot:header><fa icon="at"/>{{ name }}</template>
 
 	<x-mentions ref="tl"/>
 </x-column>
diff --git a/src/client/app/desktop/views/deck/deck.note-column.vue b/src/client/app/desktop/views/deck/deck.note-column.vue
index f36557353..4ede6a00d 100644
--- a/src/client/app/desktop/views/deck/deck.note-column.vue
+++ b/src/client/app/desktop/views/deck/deck.note-column.vue
@@ -1,8 +1,8 @@
 <template>
 <x-column>
-	<span slot="header">
+	<template v-slot:header>
 		<fa :icon="['far', 'comment-alt']"/><mk-user-name :user="note.user" v-if="note"/>
-	</span>
+	</template>
 
 	<div class="rvtscbadixhhbsczoorqoaygovdeecsx" v-if="note">
 		<div class="is-remote" v-if="note.user.host != null">
diff --git a/src/client/app/desktop/views/deck/deck.notifications-column.vue b/src/client/app/desktop/views/deck/deck.notifications-column.vue
index 00bf77cf8..7ec7a4df7 100644
--- a/src/client/app/desktop/views/deck/deck.notifications-column.vue
+++ b/src/client/app/desktop/views/deck/deck.notifications-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header"><fa :icon="['far', 'bell']"/>{{ name }}</span>
+	<template v-slot:header><fa :icon="['far', 'bell']"/>{{ name }}</template>
 
 	<x-notifications/>
 </x-column>
diff --git a/src/client/app/desktop/views/deck/deck.search-column.vue b/src/client/app/desktop/views/deck/deck.search-column.vue
index cc719bdf5..0e51c668c 100644
--- a/src/client/app/desktop/views/deck/deck.search-column.vue
+++ b/src/client/app/desktop/views/deck/deck.search-column.vue
@@ -1,8 +1,8 @@
 <template>
 <x-column>
-	<span slot="header">
+	<template v-slot:header>
 		<fa icon="search"/><span>{{ q }}</span>
-	</span>
+	</template>
 
 	<div>
 		<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
diff --git a/src/client/app/desktop/views/deck/deck.tl-column.vue b/src/client/app/desktop/views/deck/deck.tl-column.vue
index 1dac73371..b92aa729b 100644
--- a/src/client/app/desktop/views/deck/deck.tl-column.vue
+++ b/src/client/app/desktop/views/deck/deck.tl-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :menu="menu" :name="name" :column="column" :is-stacked="isStacked">
-	<span slot="header">
+	<template v-slot:header>
 		<fa v-if="column.type == 'home'" icon="home"/>
 		<fa v-if="column.type == 'local'" :icon="['far', 'comments']"/>
 		<fa v-if="column.type == 'hybrid'" icon="share-alt"/>
@@ -8,7 +8,7 @@
 		<fa v-if="column.type == 'list'" icon="list"/>
 		<fa v-if="column.type == 'hashtag'" icon="hashtag"/>
 		<span>{{ name }}</span>
-	</span>
+	</template>
 
 	<div class="editor" style="padding:12px" v-if="edit">
 		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">{{ $t('is-media-only') }}</ui-switch>
diff --git a/src/client/app/desktop/views/deck/deck.user-column.home.vue b/src/client/app/desktop/views/deck/deck.user-column.home.vue
index ff13bc312..e02eb3cc6 100644
--- a/src/client/app/desktop/views/deck/deck.user-column.home.vue
+++ b/src/client/app/desktop/views/deck/deck.user-column.home.vue
@@ -1,13 +1,13 @@
 <template>
 <div>
 	<ui-container v-if="user.pinnedNotes && user.pinnedNotes.length > 0" :body-togglable="true">
-		<span slot="header"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</span>
+		<template v-slot:header><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</template>
 		<div>
 			<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
 		</div>
 	</ui-container>
 	<ui-container v-if="images.length > 0" :body-togglable="true">
-		<span slot="header"><fa :icon="['far', 'images']"/> {{ $t('images') }}</span>
+		<template v-slot:header><fa :icon="['far', 'images']"/> {{ $t('images') }}</template>
 		<div class="sainvnaq">
 			<router-link v-for="image in images"
 				:style="`background-image: url(${image.thumbnailUrl})`"
@@ -18,13 +18,13 @@
 		</div>
 	</ui-container>
 	<ui-container :body-togglable="true">
-		<span slot="header"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</span>
+		<template v-slot:header><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</template>
 		<div>
 			<div ref="chart"></div>
 		</div>
 	</ui-container>
 	<ui-container>
-		<span slot="header"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</span>
+		<template v-slot:header><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</template>
 		<div>
 			<x-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')"/>
 		</div>
diff --git a/src/client/app/desktop/views/deck/deck.user-column.vue b/src/client/app/desktop/views/deck/deck.user-column.vue
index 813667f6a..320753965 100644
--- a/src/client/app/desktop/views/deck/deck.user-column.vue
+++ b/src/client/app/desktop/views/deck/deck.user-column.vue
@@ -1,8 +1,8 @@
 <template>
 <x-column>
-	<span slot="header">
+	<template v-slot:header>
 		<fa icon="user"/><mk-user-name :user="user" v-if="user"/>
-	</span>
+	</template>
 
 	<div class="zubukjlciycdsyynicqrnlsmdwmymzqu" v-if="user">
 		<div class="is-remote" v-if="user.host != null">
diff --git a/src/client/app/desktop/views/deck/deck.widgets-column.vue b/src/client/app/desktop/views/deck/deck.widgets-column.vue
index 2af2f1f05..8cdadb69c 100644
--- a/src/client/app/desktop/views/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/deck/deck.widgets-column.vue
@@ -1,6 +1,6 @@
 <template>
 <x-column :menu="menu" :naked="true" :narrow="true" :name="name" :column="column" :is-stacked="isStacked" class="wtdtxvecapixsepjtcupubtsmometobz">
-	<span slot="header"><fa icon="calculator"/>{{ name }}</span>
+	<template v-slot:header><fa icon="calculator"/>{{ name }}</template>
 
 	<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
 		<template v-if="edit">
diff --git a/src/client/app/desktop/views/home/search.vue b/src/client/app/desktop/views/home/search.vue
index cd21bd5b2..978bf0a93 100644
--- a/src/client/app/desktop/views/home/search.vue
+++ b/src/client/app/desktop/views/home/search.vue
@@ -1,9 +1,11 @@
 <template>
 <div>
 	<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited">
-		<header slot="header" class="oxgbmvii">
-			<span><fa icon="search"/> {{ q }}</span>
-		</header>
+		<template v-slot:header>
+			<header class="oxgbmvii">
+				<span><fa icon="search"/> {{ q }}</span>
+			</header>
+		</template>
 	</mk-notes>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/home/tag.vue b/src/client/app/desktop/views/home/tag.vue
index 2f9854c07..27f45d0c7 100644
--- a/src/client/app/desktop/views/home/tag.vue
+++ b/src/client/app/desktop/views/home/tag.vue
@@ -1,9 +1,11 @@
 <template>
 <div>
 	<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited">
-		<header class="wqraeznr" slot="header">
-			<span><fa icon="hashtag"/> {{ $route.params.tag }}</span>
-		</header>
+		<template v-slot:header>
+			<header class="wqraeznr">
+				<span><fa icon="hashtag"/> {{ $route.params.tag }}</span>
+			</header>
+		</template>
 	</mk-notes>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/home/timeline.core.vue b/src/client/app/desktop/views/home/timeline.core.vue
index efffc0b4d..4be610be0 100644
--- a/src/client/app/desktop/views/home/timeline.core.vue
+++ b/src/client/app/desktop/views/home/timeline.core.vue
@@ -6,12 +6,12 @@
 	</div>
 
 	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
-		<template slot="header">
+		<template v-slot:header>
 			<slot></slot>
 		</template>
-		<p slot="empty">
+		<template v-slot:empty>
 			<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
-		</p>
+		</template>
 	</mk-notes>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/home/user/user.home.vue b/src/client/app/desktop/views/home/user/user.home.vue
index 65aa5e1c8..979d40059 100644
--- a/src/client/app/desktop/views/home/user/user.home.vue
+++ b/src/client/app/desktop/views/home/user/user.home.vue
@@ -5,7 +5,7 @@
 	<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
 	<div class="activity">
 		<ui-container :body-togglable="true">
-			<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
+			<template v-slot:header><fa icon="chart-bar"/>{{ $t('activity') }}</template>
 			<x-activity :user="user" :limit="35" style="padding: 16px;"/>
 		</ui-container>
 	</div>
diff --git a/src/client/app/desktop/views/home/user/user.photos.vue b/src/client/app/desktop/views/home/user/user.photos.vue
index c26694274..37512a76b 100644
--- a/src/client/app/desktop/views/home/user/user.photos.vue
+++ b/src/client/app/desktop/views/home/user/user.photos.vue
@@ -1,6 +1,6 @@
 <template>
 <ui-container :body-togglable="true">
-	<span slot="header"><fa icon="camera"/> {{ $t('title') }}</span>
+	<template v-slot:header><fa icon="camera"/> {{ $t('title') }}</template>
 
 	<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
 		<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
diff --git a/src/client/app/desktop/views/home/user/user.timeline.vue b/src/client/app/desktop/views/home/user/user.timeline.vue
index edbced817..12caa97d0 100644
--- a/src/client/app/desktop/views/home/user/user.timeline.vue
+++ b/src/client/app/desktop/views/home/user/user.timeline.vue
@@ -1,13 +1,15 @@
 <template>
 <div>
 	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
-		<header slot="header" class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
-			<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
-			<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
-			<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
-			<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
-		</header>
-		<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</p>
+		<template v-slot:header>
+			<header class="oh5y2r7l5lx8j6jj791ykeiwgihheguk">
+				<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
+				<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
+				<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
+				<span :data-active="mode == 'my-posts'" @click="mode = 'my-posts'"><fa icon="user"/> {{ $t('my-posts') }}</span>
+			</header>
+		</template>
+		<template v-slot:empty><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</template>
 	</mk-notes>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/widgets/messaging.vue b/src/client/app/desktop/views/widgets/messaging.vue
index 3e1a65017..7c5135226 100644
--- a/src/client/app/desktop/views/widgets/messaging.vue
+++ b/src/client/app/desktop/views/widgets/messaging.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-messaging">
 	<ui-container :show-header="props.design == 0">
-		<template slot="header"><fa icon="comments"/>{{ $t('title') }}</template>
-		<button slot="func" @click="add"><fa icon="plus"/></button>
+		<template v-slot:header><fa icon="comments"/>{{ $t('title') }}</template>
+		<template v-slot:func><button @click="add"><fa icon="plus"/></button></template>
 
 		<x-messaging ref="index" compact @navigate="navigate"/>
 	</ui-container>
diff --git a/src/client/app/desktop/views/widgets/notifications.vue b/src/client/app/desktop/views/widgets/notifications.vue
index c9655efb2..6e124498b 100644
--- a/src/client/app/desktop/views/widgets/notifications.vue
+++ b/src/client/app/desktop/views/widgets/notifications.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-notifications">
 	<ui-container :show-header="!props.compact">
-		<template slot="header"><fa :icon="['far', 'bell']"/>{{ $t('title') }}</template>
-		<!-- <button slot="func" :title="$t('title')" @click="settings"><fa icon="cog"/></button> -->
+		<template v-slot:header><fa :icon="['far', 'bell']"/>{{ $t('title') }}</template>
+		<!-- <button v-slot:func :title="$t('title')" @click="settings"><fa icon="cog"/></button> -->
 
 		<mk-notifications :class="$style.notifications"/>
 	</ui-container>
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index b80923840..3b34a1ca0 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -1,11 +1,13 @@
 <template>
 <div class="mkw-polls">
 	<ui-container :show-header="!props.compact">
-		<template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template>
-		<button slot="func" :title="$t('title')" @click="fetch">
-			<fa v-if="!fetching &&  more" icon="arrow-right"/>
-			<fa v-if="!fetching && !more" icon="sync"/>
-		</button>
+		<template v-slot:header><fa icon="chart-pie"/>{{ $t('title') }}</template>
+		<template v-slot:func>
+			<button :title="$t('title')" @click="fetch">
+				<fa v-if="!fetching && more" icon="arrow-right"/>
+				<fa v-if="!fetching && !more" icon="sync"/>
+			</button>
+		</template>
 
 		<div class="mkw-polls--body">
 			<div class="poll" v-if="!fetching && poll != null">
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index b455509a2..856f66134 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<ui-container :show-header="props.design == 0">
-		<template slot="header"><fa icon="pencil-alt"/>{{ $t('title') }}</template>
+		<template v-slot:header><fa icon="pencil-alt"/>{{ $t('title') }}</template>
 
 		<div class="lhcuptdmcdkfwmipgazeawoiuxpzaclc-body"
 			@dragover.stop="onDragover"
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index 561b58024..0bcdff607 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-trends">
 	<ui-container :show-header="!props.compact">
-		<template slot="header"><fa icon="fire"/>{{ $t('title') }}</template>
-		<button slot="func" :title="$t('title')" @click="fetch"><fa icon="sync"/></button>
+		<template v-slot:header><fa icon="fire"/>{{ $t('title') }}</template>
+		<template v-slot:func><button :title="$t('title')" @click="fetch"><fa icon="sync"/></button></template>
 
 		<div class="mkw-trends--body">
 			<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index c92334bea..3f4c83b84 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -1,11 +1,13 @@
 <template>
 <div class="mkw-users">
 	<ui-container :show-header="!props.compact">
-		<template slot="header"><fa icon="users"/>{{ $t('title') }}</template>
-		<button slot="func" :title="$t('title')" @click="refresh">
-			<fa v-if="!fetching &&  more" icon="arrow-right"/>
-			<fa v-if="!fetching && !more" icon="sync"/>
-		</button>
+		<template v-slot:header><fa icon="users"/>{{ $t('title') }}</template>
+		<template v-slot:func>
+			<button :title="$t('title')" @click="refresh">
+				<fa v-if="!fetching && more" icon="arrow-right"/>
+				<fa v-if="!fetching && !more" icon="sync"/>
+			</button>
+		</template>
 
 		<div class="mkw-users--body">
 			<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
diff --git a/src/client/app/mobile/views/components/ui.vue b/src/client/app/mobile/views/components/ui.vue
index f93c0d686..43462b986 100644
--- a/src/client/app/mobile/views/components/ui.vue
+++ b/src/client/app/mobile/views/components/ui.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-ui">
 	<x-header>
-		<template slot="func"><slot name="func"></slot></template>
+		<template v-slot:func><slot name="func"></slot></template>
 		<slot name="header"></slot>
 	</x-header>
 	<x-nav :is-open="isDrawerOpening"/>
diff --git a/src/client/app/mobile/views/components/user-timeline.vue b/src/client/app/mobile/views/components/user-timeline.vue
index e85a0d177..dffc16efc 100644
--- a/src/client/app/mobile/views/components/user-timeline.vue
+++ b/src/client/app/mobile/views/components/user-timeline.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="mk-user-timeline">
 	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
-		<div slot="empty">
+		<template v-slot:empty>
 			<fa :icon="['far', 'comments']"/>
 			{{ withMedia ? this.$t('no-notes-with-media') : this.$t('no-notes') }}
-		</div>
+		</template>
 	</mk-notes>
 </div>
 </template>
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index 2aca54050..bf2134ff8 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -1,11 +1,11 @@
 <template>
 <mk-ui>
-	<span slot="header">
+	<template v-slot:header>
 		<template v-if="folder"><span style="margin-right:4px;"><fa :icon="['far', 'folder-open']"/></span>{{ folder.name }}</template>
 		<template v-if="file"><mk-file-type-icon data-icon :type="file.type" style="margin-right:4px;"/>{{ file.name }}</template>
 		<template v-if="!folder && !file"><span style="margin-right:4px;"><fa icon="cloud"/></span>{{ $t('@.drive') }}</template>
-	</span>
-	<template slot="func"><button @click="fn"><fa icon="ellipsis-h"/></button></template>
+	</template>
+	<template v-slot:func><button @click="fn"><fa icon="ellipsis-h"/></button></template>
 	<x-drive
 		ref="browser"
 		:init-folder="initFolder"
diff --git a/src/client/app/mobile/views/pages/explore.vue b/src/client/app/mobile/views/pages/explore.vue
index c861f2dfc..742d4c472 100644
--- a/src/client/app/mobile/views/pages/explore.vue
+++ b/src/client/app/mobile/views/pages/explore.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa :icon="faHashtag"/></span>{{ $t('@.explore') }}</span>
+	<template v-slot:header><span style="margin-right:4px;"><fa :icon="faHashtag"/></span>{{ $t('@.explore') }}</template>
 
 	<main>
 		<x-explore v-bind="$attrs"/>
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 9fcaf566e..a7a6e8cb0 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</span>
+	<template v-slot:header><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</template>
 
 	<main>
 		<sequential-entrance animation="entranceFromTop" delay="25">
diff --git a/src/client/app/mobile/views/pages/featured.vue b/src/client/app/mobile/views/pages/featured.vue
index cab7b7243..94d807104 100644
--- a/src/client/app/mobile/views/pages/featured.vue
+++ b/src/client/app/mobile/views/pages/featured.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa :icon="faNewspaper"/></span>{{ $t('@.featured-notes') }}</span>
+	<template v-slot:header><span style="margin-right:4px;"><fa :icon="faNewspaper"/></span>{{ $t('@.featured-notes') }}</template>
 
 	<main>
 		<sequential-entrance animation="entranceFromTop" delay="25">
diff --git a/src/client/app/mobile/views/pages/games/reversi.vue b/src/client/app/mobile/views/pages/games/reversi.vue
index 4f371b9b5..8b037f89b 100644
--- a/src/client/app/mobile/views/pages/games/reversi.vue
+++ b/src/client/app/mobile/views/pages/games/reversi.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa icon="gamepad"/></span>{{ $t('reversi') }}</span>
+	<template v-slot:header><span style="margin-right:4px;"><fa icon="gamepad"/></span>{{ $t('reversi') }}</template>
 	<x-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
 </mk-ui>
 </template>
diff --git a/src/client/app/mobile/views/pages/home.timeline.vue b/src/client/app/mobile/views/pages/home.timeline.vue
index 2fa155892..20ee62520 100644
--- a/src/client/app/mobile/views/pages/home.timeline.vue
+++ b/src/client/app/mobile/views/pages/home.timeline.vue
@@ -8,9 +8,9 @@
 	</ui-container>
 
 	<mk-notes ref="timeline" :make-promise="makePromise" @inited="() => $emit('loaded')">
-		<div slot="empty">
+		<template v-slot:empty>
 			<fa :icon="['far', 'comments']"/>{{ $t('empty') }}
-		</div>
+		</template>
 	</mk-notes>
 </div>
 </template>
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 7f6a1b823..1ea5d8d74 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -1,24 +1,26 @@
 <template>
 <mk-ui>
-	<span slot="header" @click="showNav = true">
-		<span :class="$style.title">
-			<span v-if="src == 'home'"><fa icon="home"/>{{ $t('home') }}</span>
-			<span v-if="src == 'local'"><fa :icon="['far', 'comments']"/>{{ $t('local') }}</span>
-			<span v-if="src == 'hybrid'"><fa icon="share-alt"/>{{ $t('hybrid') }}</span>
-			<span v-if="src == 'global'"><fa icon="globe"/>{{ $t('global') }}</span>
-			<span v-if="src == 'mentions'"><fa icon="at"/>{{ $t('mentions') }}</span>
-			<span v-if="src == 'messages'"><fa :icon="['far', 'envelope']"/>{{ $t('messages') }}</span>
-			<span v-if="src == 'list'"><fa icon="list"/>{{ list.title }}</span>
-			<span v-if="src == 'tag'"><fa icon="hashtag"/>{{ tagTl.title }}</span>
+	<template v-slot:header>
+		<span @click="showNav = true">
+			<span :class="$style.title">
+				<span v-if="src == 'home'"><fa icon="home"/>{{ $t('home') }}</span>
+				<span v-if="src == 'local'"><fa :icon="['far', 'comments']"/>{{ $t('local') }}</span>
+				<span v-if="src == 'hybrid'"><fa icon="share-alt"/>{{ $t('hybrid') }}</span>
+				<span v-if="src == 'global'"><fa icon="globe"/>{{ $t('global') }}</span>
+				<span v-if="src == 'mentions'"><fa icon="at"/>{{ $t('mentions') }}</span>
+				<span v-if="src == 'messages'"><fa :icon="['far', 'envelope']"/>{{ $t('messages') }}</span>
+				<span v-if="src == 'list'"><fa icon="list"/>{{ list.title }}</span>
+				<span v-if="src == 'tag'"><fa icon="hashtag"/>{{ tagTl.title }}</span>
+			</span>
+			<span style="margin-left:8px">
+				<template v-if="!showNav"><fa icon="angle-down"/></template>
+				<template v-else><fa icon="angle-up"/></template>
+			</span>
+			<i :class="$style.badge" v-if="$store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i>
 		</span>
-		<span style="margin-left:8px">
-			<template v-if="!showNav"><fa icon="angle-down"/></template>
-			<template v-else><fa icon="angle-up"/></template>
-		</span>
-		<i :class="$style.badge" v-if="$store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i>
-	</span>
+	</template>
 
-	<template slot="func">
+	<template v-slot:func>
 		<button @click="fn"><fa icon="pencil-alt"/></button>
 	</template>
 
diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue
index 7c18dbfed..3bb479fdf 100644
--- a/src/client/app/mobile/views/pages/messaging-room.vue
+++ b/src/client/app/mobile/views/pages/messaging-room.vue
@@ -1,9 +1,9 @@
 <template>
 <mk-ui>
-	<span slot="header">
+	<template v-slot:header>
 		<template v-if="user"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span><mk-user-name :user="user"/></template>
 		<template v-else><mk-ellipsis/></template>
-	</span>
+	</template>
 	<x-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
 </mk-ui>
 </template>
diff --git a/src/client/app/mobile/views/pages/messaging.vue b/src/client/app/mobile/views/pages/messaging.vue
index 918f925f3..40914e9d3 100644
--- a/src/client/app/mobile/views/pages/messaging.vue
+++ b/src/client/app/mobile/views/pages/messaging.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ $t('@.messaging') }}</span>
+	<template v-slot:header><span style="margin-right:4px;"><fa :icon="['far', 'comments']"/></span>{{ $t('@.messaging') }}</template>
 	<x-messaging @navigate="navigate" :header-top="48"/>
 </mk-ui>
 </template>
diff --git a/src/client/app/mobile/views/pages/note.vue b/src/client/app/mobile/views/pages/note.vue
index f22601a3f..e429a0f56 100644
--- a/src/client/app/mobile/views/pages/note.vue
+++ b/src/client/app/mobile/views/pages/note.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'sticky-note']"/></span>{{ $t('title') }}</span>
+	<template v-slot:header><span style="margin-right:4px;"><fa :icon="['far', 'sticky-note']"/></span>{{ $t('title') }}</template>
 	<main v-if="!fetching">
 		<div>
 			<mk-note-detail :note="note"/>
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index fd84a21c1..3a590e7d6 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa :icon="['far', 'bell']"/></span>{{ $t('notifications') }}</span>
-	<template slot="func"><button @click="fn"><fa icon="check"/></button></template>
+	<template v-slot:header><span style="margin-right:4px;"><fa :icon="['far', 'bell']"/></span>{{ $t('notifications') }}</template>
+	<template v-slot:func><button @click="fn"><fa icon="check"/></button></template>
 
 	<main>
 		<mk-notifications @fetched="onFetched"/>
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
index df0cf109c..075416349 100644
--- a/src/client/app/mobile/views/pages/received-follow-requests.vue
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><fa :icon="['far', 'envelope']"/>{{ $t('title') }}</span>
+	<template v-slot:header><fa :icon="['far', 'envelope']"/>{{ $t('title') }}</template>
 
 	<main>
 		<div v-for="req in requests">
diff --git a/src/client/app/mobile/views/pages/search.vue b/src/client/app/mobile/views/pages/search.vue
index 0bfc1c038..8525afd74 100644
--- a/src/client/app/mobile/views/pages/search.vue
+++ b/src/client/app/mobile/views/pages/search.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><fa icon="search"/> {{ q }}</span>
+	<template v-slot:header><fa icon="search"/> {{ q }}</template>
 
 	<main>
 		<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 17f0c2f14..2aab21dd2 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa icon="cog"/></span>{{ $t('settings') }}</span>
+	<template v-slot:header><span style="margin-right:4px;"><fa icon="cog"/></span>{{ $t('settings') }}</template>
 	<main>
 		<div class="signed-in-as">
 			<mfm :text="$t('signed-in-as').replace('{}', name)" :should-break="false" :plain-text="true" :custom-emojis="$store.state.i.emojis"/>
@@ -11,7 +11,7 @@
 			<x-theme/>
 
 			<ui-card>
-				<div slot="title"><fa icon="poll-h"/> {{ $t('design') }}</div>
+				<template v-slot:title><fa icon="poll-h"/> {{ $t('design') }}</template>
 
 				<section>
 					<ui-switch v-model="darkmode">{{ $t('dark-mode') }}</ui-switch>
@@ -63,7 +63,7 @@
 			</ui-card>
 
 			<ui-card>
-				<div slot="title"><fa icon="sliders-h"/> {{ $t('behavior') }}</div>
+				<template v-slot:title><fa icon="sliders-h"/> {{ $t('behavior') }}</template>
 
 				<section>
 					<ui-switch v-model="fetchOnScroll">{{ $t('fetch-on-scroll') }}</ui-switch>
@@ -93,7 +93,7 @@
 
 				<section>
 					<header>{{ $t('web-search-engine') }}</header>
-					<ui-input v-model="webSearchEngine">{{ $t('web-search-engine') }}<span slot="desc">{{ $t('web-search-engine-desc') }}</span></ui-input>
+					<ui-input v-model="webSearchEngine">{{ $t('web-search-engine') }}<template v-slot:desc>{{ $t('web-search-engine-desc') }}</template></ui-input>
 				</section>
 			</ui-card>
 
@@ -104,7 +104,7 @@
 			<x-mute-and-block/>
 
 			<ui-card>
-				<div slot="title"><fa icon="volume-up"/> {{ $t('sound') }}</div>
+				<template v-slot:title><fa icon="volume-up"/> {{ $t('sound') }}</template>
 
 				<section>
 					<ui-switch v-model="enableSounds">{{ $t('enable-sounds') }}</ui-switch>
@@ -118,14 +118,14 @@
 			<x-api-settings />
 
 			<ui-card>
-				<div slot="title"><fa icon="unlock-alt"/> {{ $t('password') }}</div>
+				<template v-slot:title><fa icon="unlock-alt"/> {{ $t('password') }}</template>
 				<section>
 					<x-password-settings/>
 				</section>
 			</ui-card>
 
 			<ui-card>
-				<div slot="title"><fa icon="sync-alt"/> {{ $t('update') }}</div>
+				<template v-slot:title><fa icon="sync-alt"/> {{ $t('update') }}</template>
 
 				<section>
 					<div>{{ $t('version') }} <i>{{ version }}</i></div>
diff --git a/src/client/app/mobile/views/pages/tag.vue b/src/client/app/mobile/views/pages/tag.vue
index 53129ed20..37f632291 100644
--- a/src/client/app/mobile/views/pages/tag.vue
+++ b/src/client/app/mobile/views/pages/tag.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa icon="hashtag"/></span>{{ $route.params.tag }}</span>
+	<template v-slot:header><span style="margin-right:4px;"><fa icon="hashtag"/></span>{{ $route.params.tag }}</template>
 
 	<main>
 		<mk-notes ref="timeline" :make-promise="makePromise" @inited="inited"/>
diff --git a/src/client/app/mobile/views/pages/user-list.vue b/src/client/app/mobile/views/pages/user-list.vue
index ad6e31476..289054877 100644
--- a/src/client/app/mobile/views/pages/user-list.vue
+++ b/src/client/app/mobile/views/pages/user-list.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header" v-if="!fetching"><fa icon="list"/>{{ list.title }}</span>
+	<template v-slot:header v-if="!fetching"><fa icon="list"/>{{ list.title }}</template>
 
 	<main v-if="!fetching">
 		<x-editor :list="list"/>
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
index 530357576..fcbbd4d37 100644
--- a/src/client/app/mobile/views/pages/user-lists.vue
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
-	<span slot="header"><fa icon="list"/>{{ $t('title') }}</span>
-	<template slot="func"><button @click="fn"><fa icon="plus"/></button></template>
+	<template v-slot:header><fa icon="list"/>{{ $t('title') }}</template>
+	<template v-slot:func><button @click="fn"><fa icon="plus"/></button></template>
 
 	<main>
 		<ul>
diff --git a/src/client/app/mobile/views/pages/user/index.vue b/src/client/app/mobile/views/pages/user/index.vue
index a2360e741..2907ed455 100644
--- a/src/client/app/mobile/views/pages/user/index.vue
+++ b/src/client/app/mobile/views/pages/user/index.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<template slot="header" v-if="!fetching"><img :src="avator" alt="">
+	<template v-slot:header v-if="!fetching"><img :src="avator" alt="">
 		<mk-user-name :user="user"/>
 	</template>
 	<div class="wwtwuxyh" v-if="!fetching">
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index d28a97dbc..aacb08b48 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
-	<span slot="header"><span style="margin-right:4px;"><fa icon="home"/></span>{{ $t('dashboard') }}</span>
-	<template slot="func">
+	<template v-slot:header><span style="margin-right:4px;"><fa icon="home"/></span>{{ $t('dashboard') }}</template>
+	<template v-slot:func>
 		<button @click="customizing = !customizing"><fa icon="cog"/></button>
 	</template>
 	<main>
diff --git a/src/client/app/mobile/views/widgets/activity.vue b/src/client/app/mobile/views/widgets/activity.vue
index de4bf468d..8f50d14a7 100644
--- a/src/client/app/mobile/views/widgets/activity.vue
+++ b/src/client/app/mobile/views/widgets/activity.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-activity">
 	<ui-container :show-header="!props.compact">
-		<template slot="header"><fa icon="chart-bar"/>{{ $t('activity') }}</template>
+		<template v-slot:header><fa icon="chart-bar"/>{{ $t('activity') }}</template>
 		<div :class="$style.body">
 			<x-activity :user="$store.state.i"/>
 		</div>
diff --git a/src/client/app/test/views/index.vue b/src/client/app/test/views/index.vue
index ee66b5cb4..f1df2d8ed 100644
--- a/src/client/app/test/views/index.vue
+++ b/src/client/app/test/views/index.vue
@@ -1,7 +1,7 @@
 <template>
 <main>
 	<ui-card>
-		<div slot="title">MFM Playground</div>
+		<template v-slot:title>MFM Playground</template>
 		<section class="fit-top">
 			<ui-textarea v-model="mfm">
 				<span>MFM</span>
@@ -18,7 +18,7 @@
 	</ui-card>
 
 	<ui-card>
-		<div slot="title">Dialog Generator</div>
+		<template v-slot:title>Dialog Generator</template>
 		<section class="fit-top">
 			<ui-select v-model="dialogType" placeholder="">
 				<option value="info">Information</option>