Use # instead of v-slot:

src/client/app/common/views/components/api-settings.vue

@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<template v-slot:title><fa icon="key"/> API</template>
+	<template #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>
-			<template v-slot:desc>{{ $t('console.credential-info') }}</template>
+			<template #desc>{{ $t('console.credential-info') }}</template>
 		</ui-textarea>
 		<ui-button @click="send" :disabled="sending">
 			<template v-if="sending">{{ $t('console.sending') }}</template>

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"><template v-slot:prefix>@</template></ui-input>
+		<ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #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>

src/client/app/common/views/components/drive-settings.vue

@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<template v-slot:title><fa icon="cloud"/> {{ $t('@.drive') }}</template>
+	<template #title><fa icon="cloud"/> {{ $t('@.drive') }}</template>
 
 	<section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn">
 		<div class="meter"><div :style="meterStyle"></div></div>

src/client/app/common/views/components/integration-settings.vue

@@ -1,6 +1,6 @@
 <template>
 <ui-card v-if="enableTwitterIntegration || enableDiscordIntegration || enableGithubIntegration">
-	<template v-slot:title><fa icon="share-alt"/> {{ $t('title') }}</template>
+	<template #title><fa icon="share-alt"/> {{ $t('title') }}</template>
 
 	<section v-if="enableTwitterIntegration">
 		<header><fa :icon="['fab', 'twitter']"/> Twitter</header>

src/client/app/common/views/components/language-settings.vue

@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<template v-slot:title><fa icon="language"/> {{ $t('title') }}</template>
+	<template #title><fa icon="language"/> {{ $t('title') }}</template>
 
 	<section class="fit-top">
 		<ui-select v-model="lang" :placeholder="$t('pick-language')">

src/client/app/common/views/components/mute-and-block.vue

@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<template v-slot:title><fa icon="ban"/> {{ $t('mute-and-block') }}</template>
+	<template #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') }}<template v-slot:desc>{{ $t('muted-words-description') }}</template>
+			{{ $t('muted-words') }}<template #desc>{{ $t('muted-words-description') }}</template>
 		</ui-textarea>
 		<ui-button @click="save">{{ $t('save') }}</ui-button>
 	</section>

src/client/app/common/views/components/notification-settings.vue

@@ -1,9 +1,9 @@
 <template>
 <ui-card>
-	<template v-slot:title><fa :icon="['far', 'bell']"/> {{ $t('title') }}</template>
+	<template #title><fa :icon="['far', 'bell']"/> {{ $t('title') }}</template>
 	<section>
 		<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
-			{{ $t('auto-watch') }}<template v-slot:desc>{{ $t('auto-watch-desc') }}</template>
+			{{ $t('auto-watch') }}<template #desc>{{ $t('auto-watch-desc') }}</template>
 		</ui-switch>
 		<section>
 			<ui-button @click="readAllNotifications">{{ $t('mark-as-read-all-notifications') }}</ui-button>

src/client/app/common/views/components/profile-editor.vue

@@ -1,6 +1,6 @@
 <template>
 <ui-card>
-	<template v-slot:title><fa icon="user"/> {{ $t('title') }}</template>
+	<template #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>
-				<template v-slot:prefix>@</template>
-				<template v-slot:suffix>@{{ host }}</template>
+				<template #prefix>@</template>
+				<template #suffix>@{{ host }}</template>
 			</ui-input>
 
 			<ui-input v-model="location">
 				<span>{{ $t('location') }}</span>
-				<template v-slot:prefix><fa icon="map-marker-alt"/></template>
+				<template #prefix><fa icon="map-marker-alt"/></template>
 			</ui-input>
 
 			<ui-input v-model="birthday" type="date">
-				<template v-slot:title>{{ $t('birthday') }}</template>
-				<template v-slot:prefix><fa icon="birthday-cake"/></template>
+				<template #title>{{ $t('birthday') }}</template>
+				<template #prefix><fa icon="birthday-cake"/></template>
 			</ui-input>
 
 			<ui-textarea v-model="description" :max="500">
 				<span>{{ $t('description') }}</span>
-				<template v-slot:desc>{{ $t('you-can-include-hashtags') }}</template>
+				<template #desc>{{ $t('you-can-include-hashtags') }}</template>
 			</ui-textarea>
 
 			<ui-select v-model="lang">
-				<template v-slot:label>{{ $t('language') }}</template>
-				<template v-slot:icon><fa icon="language"/></template>
+				<template #label>{{ $t('language') }}</template>
+				<template #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>
-				<template v-slot:icon><fa icon="image"/></template>
-				<template v-slot:desc v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
+				<template #icon><fa icon="image"/></template>
+				<template #desc v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
 			</ui-input>
 
 			<ui-input type="file" @change="onBannerChange">
 				<span>{{ $t('banner') }}</span>
-				<template v-slot:icon><fa icon="image"/></template>
-				<template v-slot:desc v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
+				<template #icon><fa icon="image"/></template>
+				<template #desc v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
 			</ui-input>
 
 			<ui-button @click="save(true)">{{ $t('save') }}</ui-button>

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>
-		<template v-slot:prefix>@</template>
-		<template v-slot:suffix>@{{ host }}</template>
+		<template #prefix>@</template>
+		<template #suffix>@{{ host }}</template>
 	</ui-input>
 	<ui-input v-model="password" type="password" :with-password-toggle="true" required styl="fill">
 		<span>{{ $t('password') }}</span>
-		<template v-slot:prefix><fa icon="lock"/></template>
+		<template #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>
-		<template v-slot:prefix><fa icon="gavel"/></template>
+		<template #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>

src/client/app/common/views/components/signup.vue

@@ -3,25 +3,25 @@
 	<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>
-			<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>
+			<template #prefix><fa icon="id-card-alt"/></template>
+			<template #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>
-			<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>
+			<template #prefix>@</template>
+			<template #suffix>@{{ host }}</template>
+			<template #desc v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner" pulse fixed-width/> {{ $t('checking') }}</template>
+			<template #desc v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('available') }}</template>
+			<template #desc v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('unavailable') }}</template>
+			<template #desc v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('error') }}</template>
+			<template #desc v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('invalid-format') }}</template>
+			<template #desc v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-short') }}</template>
+			<template #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>
-			<template v-slot:prefix><fa icon="lock"/></template>
-			<template v-slot:desc>
+			<template #prefix><fa icon="lock"/></template>
+			<template #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>
@@ -29,8 +29,8 @@
 		</ui-input>
 		<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill">
 			<span>{{ $t('password') }} ({{ $t('retype') }})</span>
-			<template v-slot:prefix><fa icon="lock"/></template>
-			<template v-slot:desc>
+			<template #prefix><fa icon="lock"/></template>
+			<template #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>
 			</template>

src/client/app/common/views/components/theme.vue

@@ -1,10 +1,10 @@
 <template>
 <ui-card>
-	<template v-slot:title><fa icon="palette"/> {{ $t('theme') }}</template>
+	<template #title><fa icon="palette"/> {{ $t('theme') }}</template>
 	<section class="nicnklzforebnpfgasiypmpdaaglujqm fit-top">
 		<label>
 			<ui-select v-model="light" :placeholder="$t('light-theme')">
-				<template v-slot:label><fa :icon="faSun"/> {{ $t('light-theme') }}</template>
+				<template #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')">
-				<template v-slot:label><fa :icon="faMoon"/> {{ $t('dark-theme') }}</template>
+				<template #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>

src/client/app/common/views/components/user-list-editor.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="cudqjmnl">
 	<ui-card>
-		<template v-slot:title><fa :icon="faList"/> {{ list.title }}</template>
+		<template #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>
-		<template v-slot:title><fa :icon="faUsers"/> {{ $t('users') }}</template>
+		<template #title><fa :icon="faUsers"/> {{ $t('users') }}</template>
 
 		<section>
 			<sequential-entrance animation="entranceFromTop" delay="25">

src/client/app/common/views/components/user-list.vue

@@ -1,6 +1,6 @@
 <template>
 <ui-container :body-togglable="true">
-	<template v-slot:header><slot></slot></template>
+	<template #header><slot></slot></template>
 
 	<mk-error v-if="!fetching && !inited" @retry="init()"/>
 

src/client/app/common/views/pages/explore.vue

@@ -8,7 +8,7 @@
 	</mk-user-list>
 
 	<ui-container :body-togglable="true">
-		<template v-slot:header><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template>
+		<template #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>

src/client/app/common/views/widgets/hashtags.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-hashtags">
 	<ui-container :show-header="!props.compact">
-		<template v-slot:header><fa icon="hashtag"/>{{ $t('title') }}</template>
+		<template #header><fa icon="hashtag"/>{{ $t('title') }}</template>
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
 			<mk-trends/>

src/client/app/common/views/widgets/memo.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-memo">
 	<ui-container :show-header="!props.compact">
-		<template v-slot:header><fa :icon="['far', 'sticky-note']"/>{{ $t('title') }}</template>
+		<template #header><fa :icon="['far', 'sticky-note']"/>{{ $t('title') }}</template>
 
 		<div class="mkw-memo--body">
 			<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>

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 v-slot:header><fa icon="camera"/>{{ $t('title') }}</template>
+		<template #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">

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 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>
+		<template #header><fa icon="chart-line"/>{{ $t('title') }}</template>
+		<template #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">

src/client/app/common/views/widgets/rss.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-rss">
 	<ui-container :show-header="!props.compact">
-		<template v-slot:header><fa icon="rss-square"/>RSS</template>
-		<template v-slot:func><button title="設定" @click="setting"><fa icon="cog"/></button></template>
+		<template #header><fa icon="rss-square"/>RSS</template>
+		<template #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>

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 v-slot:header><fa icon="server"/>{{ $t('title') }}</template>
-		<template v-slot:func><button @click="toggle" :title="$t('toggle')"><fa icon="sort"/></button></template>
+		<template #header><fa icon="server"/>{{ $t('title') }}</template>
+		<template #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">