refactor(client): Use v-t for i18n

src/client/components/autocomplete.vue

@@ -8,7 +8,7 @@
 			</span>
 			<span class="username">@{{ user | acct }}</span>
 		</li>
-		<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $t('selectUser') }}</li>
+		<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose" v-t="'selectUser'"></li>
 	</ol>
 	<ol class="hashtags" ref="suggests" v-if="hashtags.length > 0">
 		<li v-for="hashtag in hashtags" @click="complete(type, hashtag)" @keydown="onKeydown" tabindex="-1">

src/client/components/dialog.vue

@@ -21,7 +21,7 @@
 					<fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
 				</div>
 				<header v-if="title" v-html="title"></header>
-				<header v-if="title == null && user">{{ $t('enterUsername') }}</header>
+				<header v-if="title == null && user" v-t="'enterUsername'"></header>
 				<div class="body" v-if="text" v-html="text"></div>
 				<mk-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></mk-input>
 				<mk-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></mk-input>
@@ -37,7 +37,7 @@
 				</mk-select>
 				<div class="buttons" v-if="!iconOnly && (showOkButton || showCancelButton) && !actions">
 					<mk-button inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select && !user" :disabled="!canOk">{{ (showCancelButton || input || select || user) ? $t('ok') : $t('gotIt') }}</mk-button>
-					<mk-button inline @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('cancel') }}</mk-button>
+					<mk-button inline @click="cancel" v-if="showCancelButton || input || select || user" v-t="'cancel'"></mk-button>
 				</div>
 				<div class="buttons" v-if="actions">
 					<mk-button v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</mk-button>

src/client/components/drive.file.vue

@@ -9,15 +9,15 @@
 >
 	<div class="label" v-if="$store.state.i.avatarId == file.id">
 		<img src="/assets/label.svg"/>
-		<p>{{ $t('avatar') }}</p>
+		<p v-t="'avatar'"></p>
 	</div>
 	<div class="label" v-if="$store.state.i.bannerId == file.id">
 		<img src="/assets/label.svg"/>
-		<p>{{ $t('banner') }}</p>
+		<p v-t="'banner'"></p>
 	</div>
 	<div class="label red" v-if="file.isSensitive">
 		<img src="/assets/label-red.svg"/>
-		<p>{{ $t('nsfw') }}</p>
+		<p v-t="'nsfw'"></p>
 	</div>
 
 	<x-file-thumbnail class="thumbnail" :file="file" fit="contain"/>

src/client/components/drive.vue

@@ -23,18 +23,18 @@
 				<x-folder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button ref="moreFolders" v-if="moreFolders">{{ $t('loadMore') }}</mk-button>
+				<mk-button ref="moreFolders" v-if="moreFolders" v-t="'loadMore'"></mk-button>
 			</div>
 			<div class="files" ref="filesContainer" v-show="files.length > 0">
 				<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $t('loadMore') }}</mk-button>
+				<mk-button ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles" v-t="'loadMore'"></mk-button>
 			</div>
 			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
 				<p v-if="draghover">{{ $t('empty-draghover') }}</p>
-				<p v-if="!draghover && folder == null"><strong>{{ $t('emptyDrive') }}</strong><br/>{{ $t('empty-drive-description') }}</p>
+				<p v-if="!draghover && folder == null"><strong v-t="'emptyDrive'"></strong><br/>{{ $t('empty-drive-description') }}</p>
-				<p v-if="!draghover && folder != null">{{ $t('emptyFolder') }}</p>
+				<p v-if="!draghover && folder != null" v-t="'emptyFolder'"></p>
 			</div>
 		</div>
 		<mk-loading v-if="fetching"/>

src/client/components/error.vue

@@ -3,7 +3,7 @@
 	<div class="mjndxjcg _panel">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 		<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
-		<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
+		<mk-button @click="() => $emit('retry')" class="button" v-t="'retry'"></mk-button>
 	</div>
 </transition>
 </template>

src/client/components/follow-button.vue

@@ -7,23 +7,23 @@
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ $t('followRequestPending') }}</span><fa :icon="faHourglassHalf"/>
+			<span v-if="full" v-t="'followRequestPending'"></span><fa :icon="faHourglassHalf"/>
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse/>
+			<span v-if="full" v-t="'processing'"></span><fa :icon="faSpinner" pulse/>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+			<span v-if="full" v-t="'unfollow'"></span><fa :icon="faMinus"/>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ $t('followRequest') }}</span><fa :icon="faPlus"/>
+			<span v-if="full" v-t="'followRequest'"></span><fa :icon="faPlus"/>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+			<span v-if="full" v-t="'follow'"></span><fa :icon="faPlus"/>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full" v-t="'processing'"></span><fa :icon="faSpinner" pulse fixed-width/>
 	</template>
 </button>
 </template>

src/client/components/instance-stats.vue

@@ -4,19 +4,19 @@
 		<div class="_panel">
 			<div>
 				<b><fa :icon="faUser"/>{{ $t('users') }}</b>
-				<small>{{ $t('local') }}</small>
+				<small v-t="'local'"></small>
 			</div>
 			<div>
 				<dl class="total">
-					<dt>{{ $t('total') }}</dt>
+					<dt v-t="'total'"></dt>
 					<dd>{{ info.originalUsersCount | number }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersLocalDoD > 0 }">
-					<dt>{{ $t('dayOverDayChanges') }}</dt>
+					<dt v-t="'dayOverDayChanges'"></dt>
 					<dd>{{ usersLocalDoD | number }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersLocalWoW > 0 }">
-					<dt>{{ $t('weekOverWeekChanges') }}</dt>
+					<dt v-t="'weekOverWeekChanges'"></dt>
 					<dd>{{ usersLocalWoW | number }}</dd>
 				</dl>
 			</div>
@@ -24,19 +24,19 @@
 		<div class="_panel">
 			<div>
 				<b><fa :icon="faUser"/>{{ $t('users') }}</b>
-				<small>{{ $t('remote') }}</small>
+				<small v-t="'remote'"></small>
 			</div>
 			<div>
 				<dl class="total">
-					<dt>{{ $t('total') }}</dt>
+					<dt v-t="'total'"></dt>
 					<dd>{{ (info.usersCount - info.originalUsersCount) | number }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersRemoteDoD > 0 }">
-					<dt>{{ $t('dayOverDayChanges') }}</dt>
+					<dt v-t="'dayOverDayChanges'"></dt>
 					<dd>{{ usersRemoteDoD | number }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersRemoteWoW > 0 }">
-					<dt>{{ $t('weekOverWeekChanges') }}</dt>
+					<dt v-t="'weekOverWeekChanges'"></dt>
 					<dd>{{ usersRemoteWoW | number }}</dd>
 				</dl>
 			</div>
@@ -44,19 +44,19 @@
 		<div class="_panel">
 			<div>
 				<b><fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
-				<small>{{ $t('local') }}</small>
+				<small v-t="'local'"></small>
 			</div>
 			<div>
 				<dl class="total">
-					<dt>{{ $t('total') }}</dt>
+					<dt v-t="'total'"></dt>
 					<dd>{{ info.originalNotesCount | number }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesLocalDoD > 0 }">
-					<dt>{{ $t('dayOverDayChanges') }}</dt>
+					<dt v-t="'dayOverDayChanges'"></dt>
 					<dd>{{ notesLocalDoD | number }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesLocalWoW > 0 }">
-					<dt>{{ $t('weekOverWeekChanges') }}</dt>
+					<dt v-t="'weekOverWeekChanges'"></dt>
 					<dd>{{ notesLocalWoW | number }}</dd>
 				</dl>
 			</div>
@@ -64,19 +64,19 @@
 		<div class="_panel">
 			<div>
 				<b><fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
-				<small>{{ $t('remote') }}</small>
+				<small v-t="'remote'"></small>
 			</div>
 			<div>
 				<dl class="total">
-					<dt>{{ $t('total') }}</dt>
+					<dt v-t="'total'"></dt>
 					<dd>{{ (info.notesCount - info.originalNotesCount) | number }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesRemoteDoD > 0 }">
-					<dt>{{ $t('dayOverDayChanges') }}</dt>
+					<dt v-t="'dayOverDayChanges'"></dt>
 					<dd>{{ notesRemoteDoD | number }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesRemoteWoW > 0 }">
-					<dt>{{ $t('weekOverWeekChanges') }}</dt>
+					<dt v-t="'weekOverWeekChanges'"></dt>
 					<dd>{{ notesRemoteWoW | number }}</dd>
 				</dl>
 			</div>
@@ -89,30 +89,30 @@
 			<div class="selects" style="display: flex;">
 				<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
 					<optgroup :label="$t('federation')">
-						<option value="federation-instances">{{ $t('_charts.federationInstancesIncDec') }}</option>
+						<option value="federation-instances" v-t="'_charts.federationInstancesIncDec'"></option>
-						<option value="federation-instances-total">{{ $t('_charts.federationInstancesTotal') }}</option>
+						<option value="federation-instances-total" v-t="'_charts.federationInstancesTotal'"></option>
 					</optgroup>
 					<optgroup :label="$t('users')">
-						<option value="users">{{ $t('_charts.usersIncDec') }}</option>
+						<option value="users" v-t="'_charts.usersIncDec'"></option>
-						<option value="users-total">{{ $t('_charts.usersTotal') }}</option>
+						<option value="users-total" v-t="'_charts.usersTotal'"></option>
-						<option value="active-users">{{ $t('_charts.activeUsers') }}</option>
+						<option value="active-users" v-t="'_charts.activeUsers'"></option>
 					</optgroup>
 					<optgroup :label="$t('notes')">
-						<option value="notes">{{ $t('_charts.notesIncDec') }}</option>
+						<option value="notes" v-t="'_charts.notesIncDec'"></option>
-						<option value="local-notes">{{ $t('_charts.localNotesIncDec') }}</option>
+						<option value="local-notes" v-t="'_charts.localNotesIncDec'"></option>
-						<option value="remote-notes">{{ $t('_charts.remoteNotesIncDec') }}</option>
+						<option value="remote-notes" v-t="'_charts.remoteNotesIncDec'"></option>
-						<option value="notes-total">{{ $t('_charts.notesTotal') }}</option>
+						<option value="notes-total" v-t="'_charts.notesTotal'"></option>
 					</optgroup>
 					<optgroup :label="$t('drive')">
-						<option value="drive-files">{{ $t('_charts.filesIncDec') }}</option>
+						<option value="drive-files" v-t="'_charts.filesIncDec'"></option>
-						<option value="drive-files-total">{{ $t('_charts.filesTotal') }}</option>
+						<option value="drive-files-total" v-t="'_charts.filesTotal'"></option>
-						<option value="drive">{{ $t('_charts.storageUsageIncDec') }}</option>
+						<option value="drive" v-t="'_charts.storageUsageIncDec'"></option>
-						<option value="drive-total">{{ $t('_charts.storageUsageTotal') }}</option>
+						<option value="drive-total" v-t="'_charts.storageUsageTotal'"></option>
 					</optgroup>
 				</mk-select>
 				<mk-select v-model="chartSpan" style="margin: 0;">
-					<option value="hour">{{ $t('perHour') }}</option>
+					<option value="hour" v-t="'perHour'"></option>
-					<option value="day">{{ $t('perDay') }}</option>
+					<option value="day" v-t="'perDay'"></option>
 				</mk-select>
 			</div>
 			<canvas ref="chart"></canvas>

src/client/components/media-banner.vue

@@ -2,8 +2,8 @@
 <div class="mk-media-banner">
 	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
 		<span class="icon"><fa :icon="faExclamationTriangle"/></span>
-		<b>{{ $t('sensitive') }}</b>
+		<b v-t="'sensitive'"></b>
-		<span>{{ $t('clickToShow') }}</span>
+		<span v-t="'clickToShow'"></span>
 	</div>
 	<div class="audio" v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'">
 		<audio class="audio"

src/client/components/media-image.vue

@@ -4,7 +4,7 @@
 	<div class="text">
 		<div>
 			<b><fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
-			<span>{{ $t('clickToShow') }}</span>
+			<span v-t="'clickToShow'"></span>
 		</div>
 	</div>
 </div>

src/client/components/media-video.vue

@@ -2,7 +2,7 @@
 <div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
 	<div>
 		<b><fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
-		<span>{{ $t('clickToShow') }}</span>
+		<span v-t="'clickToShow'"></span>
 	</div>
 </div>
 <div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>

src/client/components/mention.vue

@@ -1,6 +1,6 @@
 <template>
 <router-link class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" v-if="url.startsWith('/')">
-	<span class="me" v-if="isMe">{{ $t('you') }}</span>
+	<span class="me" v-if="isMe" v-t="'you'"></span>
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span class="host" v-if="(host != localHost) || $store.state.settings.showFullAcct">@{{ toUnicode(host) }}</span>

src/client/components/note.vue

@@ -80,7 +80,7 @@
 					<fa :icon="faEllipsisH"/>
 				</button>
 			</footer>
-			<div class="deleted" v-if="appearNote.deletedAt != null">{{ $t('deleted') }}</div>
+			<div class="deleted" v-if="appearNote.deletedAt != null" v-t="'deleted'"></div>
 		</div>
 	</article>
 	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>

src/client/components/notes.vue

@@ -2,14 +2,14 @@
 <div class="mk-notes">
 	<div class="_fullinfo" v-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-		<div>{{ $t('noNotes') }}</div>
+		<div v-t="'noNotes'"></div>
 	</div>
 
 	<mk-error v-if="error" @retry="init()"/>
 
 	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
 		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
+			<template v-if="!moreFetching" v-t="'loadMore'"></template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</button>
 	</div>
@@ -20,7 +20,7 @@
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
 		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
+			<template v-if="!moreFetching" v-t="'loadMore'"></template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</button>
 	</div>

src/client/components/notification.vue

@@ -47,9 +47,9 @@
 			<fa :icon="faQuoteRight"/>
 		</router-link>
 		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user" :full="true"/></div></span>
-		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span>
+		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;" v-t="'followRequestAccepted'"></span>
-		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span>
+		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()" v-t="'accept'"></button> | <button class="_textButton" @click="rejectFollowRequest()" v-t="'reject'"></button></div></span>
-		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $t('groupInvited') }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ $t('reject') }}</button></div></span>
+		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $t('groupInvited') }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()" v-t="'accept'"></button> | <button class="_textButton" @click="rejectGroupInvitation()" v-t="'reject'"></button></div></span>
 		<span v-if="notification.type === 'app'" class="text">
 			<mfm :text="notification.body" :nowrap="!full"/>
 		</span>

src/client/components/notifications.vue

@@ -6,11 +6,11 @@
 	</x-list>
 
 	<button class="_panel _button" ref="loadMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
+		<template v-if="!moreFetching" v-t="'loadMore'"></template>
 		<template v-if="moreFetching"><mk-loading inline/></template>
 	</button>
 
-	<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>
+	<p class="empty" v-if="empty" v-t="'noNotifications'"></p>
 
 	<mk-error v-if="error" @retry="init()"/>
 </div>

src/client/components/poll-editor.vue

@@ -13,34 +13,34 @@
 			</button>
 		</li>
 	</ul>
-	<mk-button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</mk-button>
+	<mk-button class="add" v-if="choices.length < 10" @click="add" v-t="'add'"></mk-button>
 	<mk-button class="add" v-else disabled>{{ $t('_poll.noMore') }}</mk-button>
 	<section>
-		<mk-switch v-model="multiple">{{ $t('_poll.canMultipleVote') }}</mk-switch>
+		<mk-switch v-model="multiple" v-t="'_poll.canMultipleVote'"></mk-switch>
 		<div>
 			<mk-select v-model="expiration">
 				<template #label>{{ $t('_poll.expiration') }}</template>
-				<option value="infinite">{{ $t('_poll.infinite') }}</option>
+				<option value="infinite" v-t="'_poll.infinite'"></option>
-				<option value="at">{{ $t('_poll.at') }}</option>
+				<option value="at" v-t="'_poll.at'"></option>
-				<option value="after">{{ $t('_poll.after') }}</option>
+				<option value="after" v-t="'_poll.after'"></option>
 			</mk-select>
 			<section v-if="expiration === 'at'">
 				<mk-input v-model="atDate" type="date" class="input">
-					<span>{{ $t('_poll.deadlineDate') }}</span>
+					<span v-t="'_poll.deadlineDate'"></span>
 				</mk-input>
 				<mk-input v-model="atTime" type="time" class="input">
-					<span>{{ $t('_poll.deadlineTime') }}</span>
+					<span v-t="'_poll.deadlineTime'"></span>
 				</mk-input>
 			</section>
 			<section v-if="expiration === 'after'">
 				<mk-input v-model="after" type="number" class="input">
-					<span>{{ $t('_poll.duration') }}</span>
+					<span v-t="'_poll.duration'"></span>
 				</mk-input>
 				<mk-select v-model="unit">
-					<option value="second">{{ $t('_time.second') }}</option>
+					<option value="second" v-t="'_time.second'"></option>
-					<option value="minute">{{ $t('_time.minute') }}</option>
+					<option value="minute" v-t="'_time.minute'"></option>
-					<option value="hour">{{ $t('_time.hour') }}</option>
+					<option value="hour" v-t="'_time.hour'"></option>
-					<option value="day">{{ $t('_time.day') }}</option>
+					<option value="day" v-t="'_time.day'"></option>
 				</mk-select>
 			</section>
 		</div>

src/client/components/poll.vue

@@ -14,8 +14,8 @@
 		<span>{{ $t('_poll.totalVotes', { n: total }) }}</span>
 		<span> · </span>
 		<a v-if="!closed && !isVoted" @click="toggleShowResult">{{ showResult ? $t('_poll.vote') : $t('_poll.showResult') }}</a>
-		<span v-if="isVoted">{{ $t('_poll.voted') }}</span>
+		<span v-if="isVoted" v-t="'_poll.voted'"></span>
-		<span v-else-if="closed">{{ $t('_poll.closed') }}</span>
+		<span v-else-if="closed" v-t="'_poll.closed'"></span>
 		<span v-if="remaining > 0"> · {{ timer }}</span>
 	</p>
 </div>

src/client/components/post-form.vue

@@ -24,7 +24,7 @@
 		<x-note-preview class="preview" v-if="renote" :note="renote"/>
 		<div class="with-quote" v-if="quoteId"><fa icon="quote-left"/> {{ $t('quoteAttached') }}<button @click="quoteId = null"><fa icon="times"/></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
-			<span style="margin-right: 8px;">{{ $t('recipient') }}</span>
+			<span style="margin-right: 8px;" v-t="'recipient'"></span>
 			<div class="visibleUsers">
 				<span v-for="u in visibleUsers" :key="u.id">
 					<mk-acct :user="u"/>

src/client/components/remote-caution.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="jmgmzlwq _panel"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
+<div class="jmgmzlwq _panel"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="href" rel="nofollow noopener" target="_blank" v-t="'showOnRemote'"></a></div>
 </template>
 
 <script lang="ts">

src/client/components/sidebar.vue

@@ -29,14 +29,14 @@
 				</template>
 				<div class="divider"></div>
 				<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)" @click="oepnInstanceMenu">
-					<fa :icon="faServer" fixed-width/><span class="text">{{ $t('instance') }}</span>
+					<fa :icon="faServer" fixed-width/><span class="text" v-t="'instance'"></span>
 				</button>
 				<button class="item _button" @click="more">
-					<fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $t('more') }}</span>
+					<fa :icon="faEllipsisH" fixed-width/><span class="text" v-t="'more'"></span>
 					<i v-if="otherNavItemIndicated"><fa :icon="faCircle"/></i>
 				</button>
 				<router-link class="item" active-class="active" to="/preferences">
-					<fa :icon="faCog" fixed-width/><span class="text">{{ $t('settings') }}</span>
+					<fa :icon="faCog" fixed-width/><span class="text" v-t="'settings'"></span>
 				</router-link>
 			</div>
 		</nav>

src/client/components/signin.vue

@@ -3,12 +3,12 @@
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 	<div class="normal-signin" v-if="!totpLogin">
 		<mk-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange">
-			<span>{{ $t('username') }}</span>
+			<span v-t="'username'"></span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</mk-input>
 		<mk-input v-model="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
-			<span>{{ $t('password') }}</span>
+			<span v-t="'password'"></span>
 			<template #prefix><fa :icon="faLock"/></template>
 		</mk-input>
 		<mk-button type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $t('loggingIn') : $t('login') }}</mk-button>
@@ -18,22 +18,22 @@
 	</div>
 	<div class="2fa-signin" v-if="totpLogin" :class="{ securityKeys: user && user.securityKeys }">
 		<div v-if="user && user.securityKeys" class="twofa-group tap-group">
-			<p>{{ $t('tapSecurityKey') }}</p>
+			<p v-t="'tapSecurityKey'"></p>
 			<mk-button @click="queryKey" v-if="!queryingKey">
 				{{ $t('retry') }}
 			</mk-button>
 		</div>
 		<div class="or-hr" v-if="user && user.securityKeys">
-			<p class="or-msg">{{ $t('or') }}</p>
+			<p class="or-msg" v-t="'or'"></p>
 		</div>
 		<div class="twofa-group totp-group">
-			<p style="margin-bottom:0;">{{ $t('twoStepAuthentication') }}</p>
+			<p style="margin-bottom:0;" v-t="'twoStepAuthentication'"></p>
 			<mk-input v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
-				<span>{{ $t('password') }}</span>
+				<span v-t="'password'"></span>
 				<template #prefix><fa :icon="faLock"/></template>
 			</mk-input>
 			<mk-input v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
-				<span>{{ $t('token') }}</span>
+				<span v-t="'token'"></span>
 				<template #prefix><fa :icon="faGavel"/></template>
 			</mk-input>
 			<mk-button type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? $t('loggingIn') : $t('login') }}</mk-button>

src/client/components/signup.vue

@@ -2,11 +2,11 @@
 <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
 	<template v-if="meta">
 		<mk-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
-			<span>{{ $t('invitationCode') }}</span>
+			<span v-t="'invitationCode'"></span>
 			<template #prefix><fa :icon="faKey"/></template>
 		</mk-input>
 		<mk-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername">
-			<span>{{ $t('username') }}</span>
+			<span v-t="'username'"></span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 			<template #desc>
@@ -20,7 +20,7 @@
 			</template>
 		</mk-input>
 		<mk-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword">
-			<span>{{ $t('password') }}</span>
+			<span v-t="'password'"></span>
 			<template #prefix><fa :icon="faLock"/></template>
 			<template #desc>
 				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('weakPassword') }}</p>
@@ -38,7 +38,7 @@
 		</mk-input>
 		<mk-switch v-model="ToSAgreement" v-if="meta.tosUrl">
 			<i18n path="agreeTo">
-				<a :href="meta.tosUrl" class="_link" target="_blank">{{ $t('tos') }}</a>
+				<a :href="meta.tosUrl" class="_link" target="_blank" v-t="'tos'"></a>
 			</i18n>
 		</mk-switch>
 		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>

src/client/components/stream-indicator.vue

@@ -1,9 +1,9 @@
 <template>
 <div class="nsbbhtug" v-if="hasDisconnected" @click="resetDisconnected">
-	<div>{{ $t('disconnectedFromServer') }}</div>
+	<div v-t="'disconnectedFromServer'"></div>
 	<div class="command">
-		<button class="_textButton" @click="reload">{{ $t('reload') }}</button>
+		<button class="_textButton" @click="reload" v-t="'reload'"></button>
-		<button class="_textButton">{{ $t('doNothing') }}</button>
+		<button class="_textButton" v-t="'doNothing'"></button>
 	</div>
 </div>
 </template>

src/client/components/sub-note-content.vue

@@ -12,7 +12,7 @@
 		<x-media-list :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
-		<summary>{{ $t('poll') }}</summary>
+		<summary v-t="'poll'"></summary>
 		<x-poll :note="note"/>
 	</details>
 </div>

src/client/components/token-generate-window.vue

@@ -6,12 +6,12 @@
 			<mk-info warn v-if="information">{{ information }}</mk-info>
 		</div>
 		<div>
-			<mk-input v-model="name">{{ $t('name') }}</mk-input>
+			<mk-input v-model="name" v-t="'name'"></mk-input>
 		</div>
 		<div>
-			<div style="margin-bottom: 16px;"><b>{{ $t('permission') }}</b></div>
+			<div style="margin-bottom: 16px;"><b v-t="'permission'"></b></div>
-			<mk-button inline @click="disableAll">{{ $t('disableAll') }}</mk-button>
+			<mk-button inline @click="disableAll" v-t="'disableAll'"></mk-button>
-			<mk-button inline @click="enableAll">{{ $t('enableAll') }}</mk-button>
+			<mk-button inline @click="enableAll" v-t="'enableAll'"></mk-button>
 			<mk-switch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</mk-switch>
 		</div>
 	</div>

src/client/components/ui/input.vue

@@ -63,7 +63,7 @@
 		</template>
 		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
 	</div>
-	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
+	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }" v-t="'save'"></button>
 	<div class="desc"><slot name="desc"></slot></div>
 </div>
 </template>

src/client/components/ui/pagination.vue

@@ -6,7 +6,7 @@
 	</div>
 	<div class="more" v-show="more" key="_more_">
 		<mk-button class="button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
-			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
+			<template v-if="!moreFetching" v-t="'loadMore'"></template>
 			<template v-if="moreFetching"><mk-loading inline/></template>
 		</mk-button>
 	</div>

src/client/components/ui/textarea.vue

@@ -13,7 +13,7 @@
 			@blur="focused = false"
 		></textarea>
 	</div>
-	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
+	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }" v-t="'save'"></button>
 	<div class="desc"><slot name="desc"></slot></div>
 </div>
 </template>

src/client/components/user-list.vue

@@ -6,7 +6,7 @@
 
 	<div class="efvhhmdq">
 		<div class="no-users" v-if="empty">
-			<p>{{ $t('noUsers') }}</p>
+			<p v-t="'noUsers'"></p>
 		</div>
 		<div class="user" v-for="user in users" :key="user.id">
 			<mk-avatar class="avatar" :user="user"/>
@@ -17,7 +17,7 @@
 				</div>
 				<div class="description">
 					<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-					<span v-else class="empty">{{ $t('noAccountDescription') }}</span>
+					<span v-else class="empty" v-t="'noAccountDescription'"></span>
 				</div>
 			</div>
 			<mk-follow-button class="koudoku-button" v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" mini/>

src/client/components/user-preview.vue

@@ -12,13 +12,13 @@
 		</div>
 		<div class="status">
 			<div>
-				<p>{{ $t('notes') }}</p><span>{{ u.notesCount }}</span>
+				<p v-t="'notes'"></p><span>{{ u.notesCount }}</span>
 			</div>
 			<div>
-				<p>{{ $t('following') }}</p><span>{{ u.followingCount }}</span>
+				<p v-t="'following'"></p><span>{{ u.followingCount }}</span>
 			</div>
 			<div>
-				<p>{{ $t('followers') }}</p><span>{{ u.followersCount }}</span>
+				<p v-t="'followers'"></p><span>{{ u.followersCount }}</span>
 			</div>
 		</div>
 		<mk-follow-button class="koudoku-button" v-if="$store.getters.isSignedIn && u.id != $store.state.i.id" :user="u" mini/>

src/client/components/user-select.vue

@@ -3,8 +3,8 @@
 	<template #header>{{ $t('selectUser') }}</template>
 	<div class="tbhwbxda">
 		<div class="inputs">
-			<mk-input v-model="username" class="input" @input="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></mk-input>
+			<mk-input v-model="username" class="input" @input="search" ref="username"><span v-t="'username'"></span><template #prefix>@</template></mk-input>
-			<mk-input v-model="host" class="input" @input="search"><span>{{ $t('host') }}</span><template #prefix>@</template></mk-input>
+			<mk-input v-model="host" class="input" @input="search"><span v-t="'host'"></span><template #prefix>@</template></mk-input>
 		</div>
 		<div class="users">
 			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">

src/client/components/users-dialog.vue

@@ -16,11 +16,11 @@
 			</router-link>
 		</div>
 		<button class="more _button" ref="loadMore" v-show="more" @click="fetchMore" :disabled="moreFetching">
-			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
+			<template v-if="!moreFetching" v-t="'loadMore'"></template>
 			<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
 		</button>
 
-		<p class="empty" v-if="empty">{{ $t('noUsers') }}</p>
+		<p class="empty" v-if="empty" v-t="'noUsers'"></p>
 
 		<mk-error v-if="error" @retry="init()"/>
 	</div>

src/client/components/visibility-chooser.vue

@@ -4,37 +4,37 @@
 		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
 			<div><fa :icon="faGlobe"/></div>
 			<div>
-				<span>{{ $t('_visibility.public') }}</span>
+				<span v-t="'_visibility.public'"></span>
-				<span>{{ $t('_visibility.publicDescription') }}</span>
+				<span v-t="'_visibility.publicDescription'"></span>
 			</div>
 		</button>
 		<button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
 			<div><fa :icon="faHome"/></div>
 			<div>
-				<span>{{ $t('_visibility.home') }}</span>
+				<span v-t="'_visibility.home'"></span>
-				<span>{{ $t('_visibility.homeDescription') }}</span>
+				<span v-t="'_visibility.homeDescription'"></span>
 			</div>
 		</button>
 		<button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
 			<div><fa :icon="faUnlock"/></div>
 			<div>
-				<span>{{ $t('_visibility.followers') }}</span>
+				<span v-t="'_visibility.followers'"></span>
-				<span>{{ $t('_visibility.followersDescription') }}</span>
+				<span v-t="'_visibility.followersDescription'"></span>
 			</div>
 		</button>
 		<button :disabled="localOnly" class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
 			<div><fa :icon="faEnvelope"/></div>
 			<div>
-				<span>{{ $t('_visibility.specified') }}</span>
+				<span v-t="'_visibility.specified'"></span>
-				<span>{{ $t('_visibility.specifiedDescription') }}</span>
+				<span v-t="'_visibility.specifiedDescription'"></span>
 			</div>
 		</button>
 		<div class="divider"></div>
 		<button class="_button localOnly" @click="localOnly = !localOnly" :class="{ active: localOnly }" data-index="5" key="localOnly">
 			<div><fa :icon="faBiohazard"/></div>
 			<div>
-				<span>{{ $t('_visibility.localOnly') }}</span>
+				<span v-t="'_visibility.localOnly'"></span>
-				<span>{{ $t('_visibility.localOnlyDescription') }}</span>
+				<span v-t="'_visibility.localOnlyDescription'"></span>
 			</div>
 			<div><fa :icon="localOnly ? faToggleOn : faToggleOff"/></div>
 		</button>

src/client/pages/about-misskey.vue

@@ -1,16 +1,16 @@
 <template>
 <div class="znqjceqz">
-	<portal to="title">{{ $t('aboutMisskey') }}</portal>
+	<portal to="title" v-t="'aboutMisskey'"></portal>
 
 	<section class="_card">
-		<div class="_title">{{ $t('aboutMisskey') }}</div>
+		<div class="_title" v-t="'aboutMisskey'"></div>
 		<div class="_content" style="text-align: center;">
 			<img src="/assets/icons/512.png" alt="" style="display: block; width: 100px; margin: 0 auto; border-radius: 16px;"/>
 			<div style="margin-top: 0.75em;">Misskey</div>
 			<div style="opacity: 0.5;">v{{ version }}</div>
 		</div>
 		<div class="_content">
-			<div style="margin-bottom: 1em;">{{ $t('aboutMisskeyText') }}</div>
+			<div style="margin-bottom: 1em;" v-t="'aboutMisskeyText'"></div>
 			<div>🛠️ {{ $t('misskeyMembers') }}</div>
 			<ul class="members">
 				<li><mk-link url="https://github.com/syuilo" class="at">@syuilo</mk-link></li>
@@ -53,7 +53,7 @@
 				<li>nenohi</li>
 				<li>Eduardo Quiros</li>
 			</ul>
-			<span>{{ $t('morePatrons') }}</span>
+			<span v-t="'morePatrons'"></span>
 		</div>
 	</section>
 </div>

src/client/pages/about.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mmnnbwxb">
 	<portal to="icon"><fa :icon="faInfoCircle"/></portal>
-	<portal to="title">{{ $t('about') }}</portal>
+	<portal to="title" v-t="'about'"></portal>
 
 	<section class="_card info" v-if="meta">
 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div>
@@ -9,7 +9,7 @@
 			<div v-html="meta.description"></div>
 		</div>
 		<div class="_content table">
-			<div><b>{{ $t('administrator') }}</b><span>{{ meta.maintainerName }}</span></div>
+			<div><b v-t="'administrator'"></b><span>{{ meta.maintainerName }}</span></div>
 			<div><b></b><span>{{ meta.maintainerEmail }}</span></div>
 		</div>
 		<div class="_content table">

src/client/pages/announcements.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faBroadcastTower"/></portal>
-	<portal to="title">{{ $t('announcements') }}</portal>
+	<portal to="title" v-t="'announcements'"></portal>
 
 	<mk-pagination :pagination="pagination" #default="{items}" class="ruryvtyk" ref="list">
 		<section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id">

src/client/pages/apps.vue

@@ -1,13 +1,13 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faPlug"/></portal>
-	<portal to="title">{{ $t('installedApps') }}</portal>
+	<portal to="title" v-t="'installedApps'"></portal>
 
 	<mk-pagination :pagination="pagination" class="bfomjevm" ref="list">
 		<template #empty>
 			<div class="_fullinfo">
 				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ $t('nothing') }}</div>
+				<div v-t="'nothing'"></div>
 			</div>
 		</template>
 		<template #default="{items}">
@@ -28,7 +28,7 @@
 						<button class="_button" @click="revoke(token)"><fa :icon="faTrashAlt"/></button>
 					</div>
 					<details>
-						<summary>{{ $t('details') }}</summary>
+						<summary v-t="'details'"></summary>
 						<ul>
 							<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
 						</ul>

src/client/pages/auth.vue

@@ -17,10 +17,10 @@
 	<div class="accepted _panel" v-if="state == 'accepted'">
 		<h1>{{ session.app.isAuthorized ? this.$t('already-authorized') : this.$t('allowed') }}</h1>
 		<p v-if="session.app.callbackUrl">{{ $t('_auth.callback') }}<mk-ellipsis/></p>
-		<p v-if="!session.app.callbackUrl">{{ $t('_auth.pleaseGoBack') }}</p>
+		<p v-if="!session.app.callbackUrl" v-t="'_auth.pleaseGoBack'"></p>
 	</div>
 	<div class="error _panel" v-if="state == 'fetch-session-error'">
-		<p>{{ $t('error') }}</p>
+		<p v-t="'error'"></p>
 	</div>
 </div>
 <div class="signin" v-else>

src/client/pages/doc.vue

@@ -8,7 +8,7 @@
 			<div v-html="body" class="qyqbqfal"></div>
 		</div>
 		<div class="_footer">
-			<mk-link :url="`https://github.com/syuilo/misskey/blob/master/src/docs/${doc}.ja-JP.md`" class="at">{{ $t('docSource') }}</mk-link>
+			<mk-link :url="`https://github.com/syuilo/misskey/blob/master/src/docs/${doc}.ja-JP.md`" class="at" v-t="'docSource'"></mk-link>
 		</div>
 	</main>
 </div>

src/client/pages/docs.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faQuestionCircle"/></portal>
-	<portal to="title">{{ $t('help') }}</portal>
+	<portal to="title" v-t="'help'"></portal>
 	<main class="_card">
 		<div class="_content">
 			<ul>

src/client/pages/explore.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faHashtag"/></portal>
-	<portal to="title">{{ $t('explore') }}</portal>
+	<portal to="title" v-t="'explore'"></portal>
 
 	<div class="localfedi7 _panel" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
 		<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
@@ -24,7 +24,7 @@
 	</template>
 
 	<div class="localfedi7 _panel" v-if="tag == null" :style="{ backgroundImage: `url(/assets/fedi.jpg)`, marginTop: 'var(--margin)' }">
-		<header><span>{{ $t('exploreFediverse') }}</span></header>
+		<header><span v-t="'exploreFediverse'"></span></header>
 	</div>
 
 	<mk-container :body-togglable="true" :expanded="false" ref="tags">

src/client/pages/favorites.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faStar"/></portal>
-	<portal to="title">{{ $t('favorites') }}</portal>
+	<portal to="title" v-t="'favorites'"></portal>
 	<x-notes :pagination="pagination" :detail="true" :extract="items => items.map(item => item.note)" @before="before()" @after="after()"/>
 </div>
 </template>

src/client/pages/featured.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faFireAlt"/></portal>
-	<portal to="title">{{ $t('featured') }}</portal>
+	<portal to="title" v-t="'featured'"></portal>
 	<x-notes ref="notes" :pagination="pagination" @before="before" @after="after"/>
 </div>
 </template>

src/client/pages/follow-requests.vue

@@ -1,13 +1,13 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faUserClock"/></portal>
-	<portal to="title">{{ $t('followRequests') }}</portal>
+	<portal to="title" v-t="'followRequests'"></portal>
 
 	<mk-pagination :pagination="pagination" class="mk-follow-requests" ref="list">
 		<template #empty>
 			<div class="_fullinfo">
 				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ $t('noFollowRequests') }}</div>
+				<div v-t="'noFollowRequests'"></div>
 			</div>
 		</template>
 		<template #default="{items}">

src/client/pages/index.home.tutorial.vue

@@ -2,45 +2,45 @@
 <div class="_card tbkwesmv">
 	<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('_tutorial.title') }}</div>
 	<div class="_content" v-if="tutorial === 0">
-		<div>{{ $t('_tutorial.step1_1') }}</div>
+		<div v-t="'_tutorial.step1_1'"></div>
-		<div>{{ $t('_tutorial.step1_2') }}</div>
+		<div v-t="'_tutorial.step1_2'"></div>
-		<div>{{ $t('_tutorial.step1_3') }}</div>
+		<div v-t="'_tutorial.step1_3'"></div>
 	</div>
 	<div class="_content" v-else-if="tutorial === 1">
-		<div>{{ $t('_tutorial.step2_1') }}</div>
+		<div v-t="'_tutorial.step2_1'"></div>
-		<div>{{ $t('_tutorial.step2_2') }}</div>
+		<div v-t="'_tutorial.step2_2'"></div>
-		<router-link class="_link" to="/my/settings">{{ $t('editProfile') }}</router-link>
+		<router-link class="_link" to="/my/settings" v-t="'editProfile'"></router-link>
 	</div>
 	<div class="_content" v-else-if="tutorial === 2">
-		<div>{{ $t('_tutorial.step3_1') }}</div>
+		<div v-t="'_tutorial.step3_1'"></div>
-		<div>{{ $t('_tutorial.step3_2') }}</div>
+		<div v-t="'_tutorial.step3_2'"></div>
-		<div>{{ $t('_tutorial.step3_3') }}</div>
+		<div v-t="'_tutorial.step3_3'"></div>
-		<small>{{ $t('_tutorial.step3_4') }}</small>
+		<small v-t="'_tutorial.step3_4'"></small>
 	</div>
 	<div class="_content" v-else-if="tutorial === 3">
-		<div>{{ $t('_tutorial.step4_1') }}</div>
+		<div v-t="'_tutorial.step4_1'"></div>
-		<div>{{ $t('_tutorial.step4_2') }}</div>
+		<div v-t="'_tutorial.step4_2'"></div>
 	</div>
 	<div class="_content" v-else-if="tutorial === 4">
-		<div>{{ $t('_tutorial.step5_1') }}</div>
+		<div v-t="'_tutorial.step5_1'"></div>
 		<i18n path="_tutorial.step5_2" tag="div">
-			<router-link class="_link" place="featured" to="/featured">{{ $t('featured') }}</router-link>
+			<router-link class="_link" place="featured" to="/featured" v-t="'featured'"></router-link>
-			<router-link class="_link" place="explore" to="/explore">{{ $t('explore') }}</router-link>
+			<router-link class="_link" place="explore" to="/explore" v-t="'explore'"></router-link>
 		</i18n>
-		<div>{{ $t('_tutorial.step5_3') }}</div>
+		<div v-t="'_tutorial.step5_3'"></div>
-		<small>{{ $t('_tutorial.step5_4') }}</small>
+		<small v-t="'_tutorial.step5_4'"></small>
 	</div>
 	<div class="_content" v-else-if="tutorial === 5">
-		<div>{{ $t('_tutorial.step6_1') }}</div>
+		<div v-t="'_tutorial.step6_1'"></div>
-		<div>{{ $t('_tutorial.step6_2') }}</div>
+		<div v-t="'_tutorial.step6_2'"></div>
-		<div>{{ $t('_tutorial.step6_3') }}</div>
+		<div v-t="'_tutorial.step6_3'"></div>
 	</div>
 	<div class="_content" v-else-if="tutorial === 6">
-		<div>{{ $t('_tutorial.step7_1') }}</div>
+		<div v-t="'_tutorial.step7_1'"></div>
 		<i18n path="_tutorial.step7_2" tag="div">
-			<router-link class="_link" place="help" to="/docs">{{ $t('help') }}</router-link>
+			<router-link class="_link" place="help" to="/docs" v-t="'help'"></router-link>
 		</i18n>
-		<div>{{ $t('_tutorial.step7_3') }}</div>
+		<div v-t="'_tutorial.step7_3'"></div>
 	</div>
 
 	<div class="_footer navigation">

src/client/pages/index.home.vue

@@ -14,7 +14,7 @@
 		</button>
 	</portal>
 
-	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $t('newNoteRecived') }}</button></div>
+	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()" v-t="'newNoteRecived'"></button></div>
 
 	<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/>
 

src/client/pages/index.welcome.entrance.vue

@@ -6,7 +6,7 @@
 			<h1 class="name" v-html="meta.name || host"></h1>
 			<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
 			<mk-button @click="signup()" style="display: inline-block; margin-right: 16px;" primary>{{ $t('signup') }}</mk-button>
-			<mk-button @click="signin()" style="display: inline-block;">{{ $t('login') }}</mk-button>
+			<mk-button @click="signin()" style="display: inline-block;" v-t="'login'"></mk-button>
 		</div>
 	</div>
 	<x-notes :pagination="featuredPagination"/>

src/client/pages/index.welcome.setup.vue

@@ -2,14 +2,14 @@
 <form class="mk-setup" @submit.prevent="submit()">
 	<h1>Welcome to Misskey!</h1>
 	<div>
-		<p>{{ $t('intro') }}</p>
+		<p v-t="'intro'"></p>
 		<mk-input v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
-			<span>{{ $t('username') }}</span>
+			<span v-t="'username'"></span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</mk-input>
 		<mk-input v-model="password" type="password">
-			<span>{{ $t('password') }}</span>
+			<span v-t="'password'"></span>
 			<template #prefix><fa :icon="faLock"/></template>
 		</mk-input>
 		<footer>

src/client/pages/instance/announcements.vue

@@ -1,18 +1,18 @@
 <template>
 <div class="ztgjmzrw">
 	<portal to="icon"><fa :icon="faBroadcastTower"/></portal>
-	<portal to="title">{{ $t('announcements') }}</portal>
+	<portal to="title" v-t="'announcements'"></portal>
 	<mk-button @click="add()" primary style="margin: 0 auto 16px auto;"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
 	<section class="_card announcements">
 		<div class="_content announcement" v-for="announcement in announcements">
 			<mk-input v-model="announcement.title">
-				<span>{{ $t('title') }}</span>
+				<span v-t="'title'"></span>
 			</mk-input>
 			<mk-textarea v-model="announcement.text">
-				<span>{{ $t('text') }}</span>
+				<span v-t="'text'"></span>
 			</mk-textarea>
 			<mk-input v-model="announcement.imageUrl">
-				<span>{{ $t('imageUrl') }}</span>
+				<span v-t="'imageUrl'"></span>
 			</mk-input>
 			<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
 			<div class="buttons">

src/client/pages/instance/emojis.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="mk-instance-emojis">
 	<portal to="icon"><fa :icon="faLaugh"/></portal>
-	<portal to="title">{{ $t('customEmojis') }}</portal>
+	<portal to="title" v-t="'customEmojis'"></portal>
 
 	<section class="_card local">
 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojis') }}</div>
 		<div class="_content">
 			<mk-pagination :pagination="pagination" class="emojis" ref="emojis">
-				<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
+				<template #empty><span v-t="'noCustomEmojis'"></span></template>
 				<template #default="{items}">
 					<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selected = emoji" :class="{ selected: selected && (selected.id === emoji.id) }">
 						<img :src="emoji.url" class="img" :alt="emoji.name"/>
@@ -23,9 +23,9 @@
 			</mk-pagination>
 		</div>
 		<div class="_content" v-if="selected">
-			<mk-input v-model="name"><span>{{ $t('name') }}</span></mk-input>
+			<mk-input v-model="name"><span v-t="'name'"></span></mk-input>
-			<mk-input v-model="category" :datalist="categories"><span>{{ $t('category') }}</span></mk-input>
+			<mk-input v-model="category" :datalist="categories"><span v-t="'category'"></span></mk-input>
-			<mk-input v-model="aliases"><span>{{ $t('tags') }}</span></mk-input>
+			<mk-input v-model="aliases"><span v-t="'tags'"></span></mk-input>
 			<mk-button inline primary @click="update"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 			<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button>
 		</div>
@@ -36,9 +36,9 @@
 	<section class="_card remote">
 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojisOfRemote') }}</div>
 		<div class="_content">
-			<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
+			<mk-input v-model="host" :debounce="true"><span v-t="'host'"></span></mk-input>
 			<mk-pagination :pagination="remotePagination" class="emojis" ref="remoteEmojis">
-				<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
+				<template #empty><span v-t="'noCustomEmojis'"></span></template>
 				<template #default="{items}">
 					<div class="emoji" v-for="(emoji, i) in items" :key="emoji.id" @click="selectedRemote = emoji" :class="{ selected: selectedRemote && (selectedRemote.id === emoji.id) }">
 						<img :src="emoji.url" class="img" :alt="emoji.name"/>

src/client/pages/instance/federation.instance.vue

@@ -5,11 +5,11 @@
 		<div class="table info">
 			<div class="row">
 				<div class="cell">
-					<div class="label">{{ $t('software') }}</div>
+					<div class="label" v-t="'software'"></div>
 					<div class="data">{{ instance.softwareName || '?' }}</div>
 				</div>
 				<div class="cell">
-					<div class="label">{{ $t('version') }}</div>
+					<div class="label" v-t="'version'"></div>
 					<div class="data">{{ instance.softwareVersion || '?' }}</div>
 				</div>
 			</div>
@@ -70,24 +70,24 @@
 		</div>
 		<div class="chart">
 			<div class="header">
-				<span class="label">{{ $t('charts') }}</span>
+				<span class="label" v-t="'charts'"></span>
 				<div class="selects">
 					<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
-						<option value="requests">{{ $t('_instanceCharts.requests') }}</option>
+						<option value="requests" v-t="'_instanceCharts.requests'"></option>
-						<option value="users">{{ $t('_instanceCharts.users') }}</option>
+						<option value="users" v-t="'_instanceCharts.users'"></option>
-						<option value="users-total">{{ $t('_instanceCharts.usersTotal') }}</option>
+						<option value="users-total" v-t="'_instanceCharts.usersTotal'"></option>
-						<option value="notes">{{ $t('_instanceCharts.notes') }}</option>
+						<option value="notes" v-t="'_instanceCharts.notes'"></option>
-						<option value="notes-total">{{ $t('_instanceCharts.notesTotal') }}</option>
+						<option value="notes-total" v-t="'_instanceCharts.notesTotal'"></option>
-						<option value="ff">{{ $t('_instanceCharts.ff') }}</option>
+						<option value="ff" v-t="'_instanceCharts.ff'"></option>
-						<option value="ff-total">{{ $t('_instanceCharts.ffTotal') }}</option>
+						<option value="ff-total" v-t="'_instanceCharts.ffTotal'"></option>
-						<option value="drive-usage">{{ $t('_instanceCharts.cacheSize') }}</option>
+						<option value="drive-usage" v-t="'_instanceCharts.cacheSize'"></option>
-						<option value="drive-usage-total">{{ $t('_instanceCharts.cacheSizeTotal') }}</option>
+						<option value="drive-usage-total" v-t="'_instanceCharts.cacheSizeTotal'"></option>
-						<option value="drive-files">{{ $t('_instanceCharts.files') }}</option>
+						<option value="drive-files" v-t="'_instanceCharts.files'"></option>
-						<option value="drive-files-total">{{ $t('_instanceCharts.filesTotal') }}</option>
+						<option value="drive-files-total" v-t="'_instanceCharts.filesTotal'"></option>
 					</mk-select>
 					<mk-select v-model="chartSpan" style="margin: 0;">
-						<option value="hour">{{ $t('perHour') }}</option>
+						<option value="hour" v-t="'perHour'"></option>
-						<option value="day">{{ $t('perDay') }}</option>
+						<option value="day" v-t="'perDay'"></option>
 					</mk-select>
 				</div>
 			</div>
@@ -96,21 +96,21 @@
 			</div>
 		</div>
 		<div class="operations">
-			<span class="label">{{ $t('operations') }}</span>
+			<span class="label" v-t="'operations'"></span>
-			<mk-switch v-model="isSuspended" class="switch">{{ $t('stopActivityDelivery') }}</mk-switch>
+			<mk-switch v-model="isSuspended" class="switch" v-t="'stopActivityDelivery'"></mk-switch>
-			<mk-switch :value="isBlocked" class="switch" @change="changeBlock">{{ $t('blockThisInstance') }}</mk-switch>
+			<mk-switch :value="isBlocked" class="switch" @change="changeBlock" v-t="'blockThisInstance'"></mk-switch>
 			<details>
-				<summary>{{ $t('deleteAllFiles') }}</summary>
+				<summary v-t="'deleteAllFiles'"></summary>
 				<mk-button @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><fa :icon="faTrashAlt"/> {{ $t('deleteAllFiles') }}</mk-button>
 			</details>
 			<details>
-				<summary>{{ $t('removeAllFollowing') }}</summary>
+				<summary v-t="'removeAllFollowing'"></summary>
 				<mk-button @click="removeAllFollowing()" style="margin: 0.5em 0 0.5em 0;"><fa :icon="faMinusCircle"/> {{ $t('removeAllFollowing') }}</mk-button>
 				<mk-info warn>{{ $t('removeAllFollowingDescription', { host: instance.host }) }}</mk-info>
 			</details>
 		</div>
 		<details class="metadata">
-			<summary class="label">{{ $t('metadata') }}</summary>
+			<summary class="label" v-t="'metadata'"></summary>
 			<pre><code>{{ JSON.stringify(instance, null, 2) }}</code></pre>
 		</details>
 	</div>

src/client/pages/instance/federation.vue

@@ -1,21 +1,21 @@
 <template>
 <div class="mk-federation">
 	<portal to="icon"><fa :icon="faGlobe"/></portal>
-	<portal to="title">{{ $t('federation') }}</portal>
+	<portal to="title" v-t="'federation'"></portal>
 
 	<section class="_card instances">
 		<div class="_content">
-			<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
+			<mk-input v-model="host" :debounce="true"><span v-t="'host'"></span></mk-input>
 			<div class="inputs" style="display: flex;">
 				<mk-select v-model="state" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('state') }}</template>
-					<option value="all">{{ $t('all') }}</option>
+					<option value="all" v-t="'all'"></option>
-					<option value="federating">{{ $t('federating') }}</option>
+					<option value="federating" v-t="'federating'"></option>
-					<option value="subscribing">{{ $t('subscribing') }}</option>
+					<option value="subscribing" v-t="'subscribing'"></option>
-					<option value="publishing">{{ $t('publishing') }}</option>
+					<option value="publishing" v-t="'publishing'"></option>
-					<option value="suspended">{{ $t('suspended') }}</option>
+					<option value="suspended" v-t="'suspended'"></option>
-					<option value="blocked">{{ $t('blocked') }}</option>
+					<option value="blocked" v-t="'blocked'"></option>
-					<option value="notResponding">{{ $t('notResponding') }}</option>
+					<option value="notResponding" v-t="'notResponding'"></option>
 				</mk-select>
 				<mk-select v-model="sort" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('sort') }}</template>

src/client/pages/instance/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div v-if="meta" class="xhexznfu">
 	<portal to="icon"><fa :icon="faServer"/></portal>
-	<portal to="title">{{ $t('instance') }}</portal>
+	<portal to="title" v-t="'instance'"></portal>
 
 	<mk-instance-stats style="margin-bottom: var(--margin);"/>
 
@@ -10,16 +10,16 @@
 		<div class="_content">
 			<div class="_inputs">
 				<mk-input v-model="logDomain" :debounce="true">
-					<span>{{ $t('domain') }}</span>
+					<span v-t="'domain'"></span>
 				</mk-input>
 				<mk-select v-model="logLevel">
 					<template #label>{{ $t('level') }}</template>
-					<option value="all">{{ $t('levels.all') }}</option>
+					<option value="all" v-t="'levels.all'"></option>
-					<option value="info">{{ $t('levels.info') }}</option>
+					<option value="info" v-t="'levels.info'"></option>
-					<option value="success">{{ $t('levels.success') }}</option>
+					<option value="success" v-t="'levels.success'"></option>
-					<option value="warning">{{ $t('levels.warning') }}</option>
+					<option value="warning" v-t="'levels.warning'"></option>
-					<option value="error">{{ $t('levels.error') }}</option>
+					<option value="error" v-t="'levels.error'"></option>
-					<option value="debug">{{ $t('levels.debug') }}</option>
+					<option value="debug" v-t="'levels.debug'"></option>
 				</mk-select>
 			</div>
 

src/client/pages/instance/queue.queue.vue

@@ -17,7 +17,7 @@
 				<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
 			</div>
 		</div>
-		<span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span>
+		<span v-else style="opacity: 0.5;" v-t="'noJobs'"></span>
 	</div>
 </section>
 </template>

src/client/pages/instance/queue.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faExchangeAlt"/></portal>
-	<portal to="title">{{ $t('jobQueue') }}</portal>
+	<portal to="title" v-t="'jobQueue'"></portal>
 
 	<x-queue :connection="connection" domain="inbox">
 		<template #title><fa :icon="faExchangeAlt"/> In</template>

src/client/pages/instance/relays.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="relaycxt">
 	<portal to="icon"><fa :icon="faProjectDiagram"/></portal>
-	<portal to="title">{{ $t('relays') }}</portal>
+	<portal to="title" v-t="'relays'"></portal>
 
 	<section class="_card add">
 		<div class="_title"><fa :icon="faPlus"/> {{ $t('addRelay') }}</div>
 		<div class="_content">
 			<mk-input v-model="inbox">
-				<span>{{ $t('inboxUrl') }}</span>
+				<span v-t="'inboxUrl'"></span>
 			</mk-input>
 			<mk-button @click="add(inbox)" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
 		</div>

src/client/pages/instance/settings.vue

@@ -1,17 +1,17 @@
 <template>
 <div v-if="meta">
 	<portal to="icon"><fa :icon="faCog"/></portal>
-	<portal to="title">{{ $t('settings') }}</portal>
+	<portal to="title" v-t="'settings'"></portal>
 
 	<section class="_card info">
 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div>
 		<div class="_content">
-			<mk-input v-model="name">{{ $t('instanceName') }}</mk-input>
+			<mk-input v-model="name" v-t="'instanceName'"></mk-input>
-			<mk-textarea v-model="description">{{ $t('instanceDescription') }}</mk-textarea>
+			<mk-textarea v-model="description" v-t="'instanceDescription'"></mk-textarea>
 			<mk-input v-model="iconUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('iconUrl') }}</mk-input>
 			<mk-input v-model="bannerUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('bannerUrl') }}</mk-input>
 			<mk-input v-model="tosUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('tosUrl') }}</mk-input>
-			<mk-input v-model="maintainerName">{{ $t('maintainerName') }}</mk-input>
+			<mk-input v-model="maintainerName" v-t="'maintainerName'"></mk-input>
 			<mk-input v-model="maintainerEmail" type="email"><template #icon><fa :icon="faEnvelope"/></template>{{ $t('maintainerEmail') }}</mk-input>
 		</div>
 		<div class="_footer">
@@ -24,8 +24,8 @@
 			<mk-input v-model="maxNoteTextLength" type="number" :save="() => save()" style="margin:0;"><template #icon><fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</mk-input>
 		</div>
 		<div class="_content">
-			<mk-switch v-model="enableLocalTimeline" @change="save()">{{ $t('enableLocalTimeline') }}</mk-switch>
+			<mk-switch v-model="enableLocalTimeline" @change="save()" v-t="'enableLocalTimeline'"></mk-switch>
-			<mk-switch v-model="enableGlobalTimeline" @change="save()">{{ $t('enableGlobalTimeline') }}</mk-switch>
+			<mk-switch v-model="enableGlobalTimeline" @change="save()" v-t="'enableGlobalTimeline'"></mk-switch>
 			<mk-info>{{ $t('disablingTimelinesInfo') }}</mk-info>
 		</div>
 	</section>
@@ -33,22 +33,22 @@
 	<section class="_card info">
 		<div class="_title"><fa :icon="faUser"/> {{ $t('registration') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableRegistration" @change="save()">{{ $t('enableRegistration') }}</mk-switch>
+			<mk-switch v-model="enableRegistration" @change="save()" v-t="'enableRegistration'"></mk-switch>
-			<mk-button v-if="!enableRegistration" @click="invite">{{ $t('invite') }}</mk-button>
+			<mk-button v-if="!enableRegistration" @click="invite" v-t="'invite'"></mk-button>
 		</div>
 	</section>
 
 	<section class="_card">
 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableHcaptcha" ref="enableHcaptcha">{{ $t('enableHcaptcha') }}</mk-switch>
+			<mk-switch v-model="enableHcaptcha" ref="enableHcaptcha" v-t="'enableHcaptcha'"></mk-switch>
 			<template v-if="enableHcaptcha">
 				<mk-input v-model="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSiteKey') }}</mk-input>
 				<mk-input v-model="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSecretKey') }}</mk-input>
 			</template>
 		</div>
 		<div class="_content" v-if="enableHcaptcha">
-			<header>{{ $t('preview') }}</header>
+			<header v-t="'preview'"></header>
 			<captcha v-if="enableHcaptcha" provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
 		</div>
 		<div class="_footer">
@@ -59,14 +59,14 @@
 	<section class="_card">
 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableRecaptcha" ref="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
+			<mk-switch v-model="enableRecaptcha" ref="enableRecaptcha" v-t="'enableRecaptcha'"></mk-switch>
 			<template v-if="enableRecaptcha">
 				<mk-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSiteKey') }}</mk-input>
 				<mk-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSecretKey') }}</mk-input>
 			</template>
 		</div>
 		<div class="_content" v-if="enableRecaptcha && recaptchaSiteKey">
-			<header>{{ $t('preview') }}</header>
+			<header v-t="'preview'"></header>
 			<captcha v-if="enableRecaptcha" provider="grecaptcha" :sitekey="recaptchaSiteKey"/>
 		</div>
 		<div class="_footer">
@@ -94,7 +94,7 @@
 		<div class="_title"><fa :icon="faThumbtack"/> {{ $t('pinnedUsers') }}</div>
 		<div class="_content">
 			<mk-textarea v-model="pinnedUsers">
-				<template #desc>{{ $t('pinnedUsersDescription') }} <button class="_textButton" @click="addPinUser">{{ $t('addUser') }}</button></template>
+				<template #desc>{{ $t('pinnedUsersDescription') }} <button class="_textButton" @click="addPinUser" v-t="'addUser'"></button></template>
 			</mk-textarea>
 		</div>
 		<div class="_footer">
@@ -118,7 +118,7 @@
 	<section class="_card">
 		<div class="_title"><fa :icon="faCloud"/> {{ $t('objectStorage') }}</div>
 		<div class="_content">
-			<mk-switch v-model="useObjectStorage">{{ $t('useObjectStorage') }}</mk-switch>
+			<mk-switch v-model="useObjectStorage" v-t="'useObjectStorage'"></mk-switch>
 			<template v-if="useObjectStorage">
 				<mk-input v-model="objectStorageBaseUrl" :disabled="!useObjectStorage">{{ $t('objectStorageBaseUrl') }}<template #desc>{{ $t('objectStorageBaseUrlDesc') }}</template></mk-input>
 				<div class="_inputs">
@@ -146,7 +146,7 @@
 		<div class="_title"><fa :icon="faGhost"/> {{ $t('proxyAccount') }}</div>
 		<div class="_content">
 			<mk-input :value="proxyAccount ? proxyAccount.username : null" style="margin: 0;" disabled><template #prefix>@</template>{{ $t('proxyAccount') }}<template #desc>{{ $t('proxyAccountDescription') }}</template></mk-input>
-			<mk-button primary @click="chooseProxyAccount">{{ $t('chooseProxyAccount') }}</mk-button>
+			<mk-button primary @click="chooseProxyAccount" v-t="'chooseProxyAccount'"></mk-button>
 		</div>
 	</section>
 
@@ -166,7 +166,7 @@
 		<div class="_title"><fa :icon="faShareAlt"/> {{ $t('integration') }}</div>
 		<div class="_content">
 			<header><fa :icon="faTwitter"/> Twitter</header>
-			<mk-switch v-model="enableTwitterIntegration">{{ $t('enable') }}</mk-switch>
+			<mk-switch v-model="enableTwitterIntegration" v-t="'enable'"></mk-switch>
 			<template v-if="enableTwitterIntegration">
 				<mk-info>Callback URL: {{ `${url}/api/tw/cb` }}</mk-info>
 				<mk-input v-model="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template #icon><fa :icon="faKey"/></template>Consumer Key</mk-input>
@@ -175,7 +175,7 @@
 		</div>
 		<div class="_content">
 			<header><fa :icon="faGithub"/> GitHub</header>
-			<mk-switch v-model="enableGithubIntegration">{{ $t('enable') }}</mk-switch>
+			<mk-switch v-model="enableGithubIntegration" v-t="'enable'"></mk-switch>
 			<template v-if="enableGithubIntegration">
 				<mk-info>Callback URL: {{ `${url}/api/gh/cb` }}</mk-info>
 				<mk-input v-model="githubClientId" :disabled="!enableGithubIntegration"><template #icon><fa :icon="faKey"/></template>Client ID</mk-input>
@@ -184,7 +184,7 @@
 		</div>
 		<div class="_content">
 			<header><fa :icon="faDiscord"/> Discord</header>
-			<mk-switch v-model="enableDiscordIntegration">{{ $t('enable') }}</mk-switch>
+			<mk-switch v-model="enableDiscordIntegration" v-t="'enable'"></mk-switch>
 			<template v-if="enableDiscordIntegration">
 				<mk-info>Callback URL: {{ `${url}/api/dc/cb` }}</mk-info>
 				<mk-input v-model="discordClientId" :disabled="!enableDiscordIntegration"><template #icon><fa :icon="faKey"/></template>Client ID</mk-input>

src/client/pages/instance/users.user.vue

@@ -15,9 +15,9 @@
 		</div>
 		<div class="_content actions">
 			<div style="flex: 1; padding-left: 1em;">
-				<mk-switch v-if="user.host == null && $store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @change="toggleModerator()" v-model="moderator">{{ $t('moderator') }}</mk-switch>
+				<mk-switch v-if="user.host == null && $store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @change="toggleModerator()" v-model="moderator" v-t="'moderator'"></mk-switch>
-				<mk-switch @change="toggleSilence()" v-model="silenced">{{ $t('silence') }}</mk-switch>
+				<mk-switch @change="toggleSilence()" v-model="silenced" v-t="'silence'"></mk-switch>
-				<mk-switch @change="toggleSuspend()" v-model="suspended">{{ $t('suspend') }}</mk-switch>
+				<mk-switch @change="toggleSuspend()" v-model="suspended" v-t="'suspend'"></mk-switch>
 			</div>
 			<div style="flex: 1; padding-left: 1em;">
 				<mk-button @click="openProfile"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('profile')}}</mk-button>

src/client/pages/instance/users.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="mk-instance-users">
 	<portal to="icon"><fa :icon="faUsers"/></portal>
-	<portal to="title">{{ $t('users') }}</portal>
+	<portal to="title" v-t="'users'"></portal>
 
 	<section class="_card lookup">
 		<div class="_title"><fa :icon="faSearch"/> {{ $t('lookup') }}</div>
 		<div class="_content">
 			<mk-input class="target" v-model="target" type="text" @enter="showUser()">
-				<span>{{ $t('usernameOrUserId') }}</span>
+				<span v-t="'usernameOrUserId'"></span>
 			</mk-input>
 			<mk-button @click="showUser()" primary><fa :icon="faSearch"/> {{ $t('lookup') }}</mk-button>
 		</div>
@@ -29,26 +29,26 @@
 				</mk-select>
 				<mk-select v-model="state" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('state') }}</template>
-					<option value="all">{{ $t('all') }}</option>
+					<option value="all" v-t="'all'"></option>
-					<option value="available">{{ $t('normal') }}</option>
+					<option value="available" v-t="'normal'"></option>
-					<option value="admin">{{ $t('administrator') }}</option>
+					<option value="admin" v-t="'administrator'"></option>
-					<option value="moderator">{{ $t('moderator') }}</option>
+					<option value="moderator" v-t="'moderator'"></option>
-					<option value="silenced">{{ $t('silence') }}</option>
+					<option value="silenced" v-t="'silence'"></option>
-					<option value="suspended">{{ $t('suspend') }}</option>
+					<option value="suspended" v-t="'suspend'"></option>
 				</mk-select>
 				<mk-select v-model="origin" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('instance') }}</template>
-					<option value="combined">{{ $t('all') }}</option>
+					<option value="combined" v-t="'all'"></option>
-					<option value="local">{{ $t('local') }}</option>
+					<option value="local" v-t="'local'"></option>
-					<option value="remote">{{ $t('remote') }}</option>
+					<option value="remote" v-t="'remote'"></option>
 				</mk-select>
 			</div>
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
 				<mk-input v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()">
-					<span>{{ $t('username') }}</span>
+					<span v-t="'username'"></span>
 				</mk-input>
 				<mk-input v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
-					<span>{{ $t('host') }}</span>
+					<span v-t="'host'"></span>
 				</mk-input>
 			</div>
 		</div>

src/client/pages/mentions.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faAt"/></portal>
-	<portal to="title">{{ $t('mentions') }}</portal>
+	<portal to="title" v-t="'mentions'"></portal>
 	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
 </div>
 </template>

src/client/pages/messages.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faEnvelope"/></portal>
-	<portal to="title">{{ $t('directNotes') }}</portal>
+	<portal to="title" v-t="'directNotes'"></portal>
 	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
 </div>
 </template>

src/client/pages/messaging/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-messaging" v-size="[{ max: 400 }]">
 	<portal to="icon"><fa :icon="faComments"/></portal>
-	<portal to="title">{{ $t('messaging') }}</portal>
+	<portal to="title" v-t="'messaging'"></portal>
 
 	<mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button>
 
@@ -33,7 +33,7 @@
 	</div>
 	<div class="_fullinfo" v-if="!fetching && messages.length == 0">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-		<div>{{ $t('noHistory') }}</div>
+		<div v-t="'noHistory'"></div>
 	</div>
 	<mk-loading v-if="fetching"/>
 </div>

src/client/pages/messaging/messaging-room.message.vue

@@ -16,7 +16,7 @@
 				</div>
 			</div>
 			<div class="content" v-else>
-				<p class="is-deleted">{{ $t('deleted') }}</p>
+				<p class="is-deleted" v-t="'deleted'"></p>
 			</div>
 		</div>
 		<div></div>
@@ -26,7 +26,7 @@
 				<span class="read" v-if="message.reads.length > 0">{{ $t('messageRead') }} {{ message.reads.length }}</span>
 			</template>
 			<template v-else>
-				<span class="read" v-if="isMe && message.isRead">{{ $t('messageRead') }}</span>
+				<span class="read" v-if="isMe && message.isRead" v-t="'messageRead'"></span>
 			</template>
 			<mk-time :time="message.createdAt"/>
 			<template v-if="message.is_edited"><fa icon="pencil-alt"/></template>

src/client/pages/miauth.vue

@@ -7,7 +7,7 @@
 	</div>
 	<div class="denied _card" v-if="state == 'denied'">
 		<div class="_content">
-			<p>{{ $t('_auth.denied') }}</p>
+			<p v-t="'_auth.denied'"></p>
 		</div>
 	</div>
 	<div class="accepted _card" v-else-if="state == 'accepted'">
@@ -20,7 +20,7 @@
 		<div class="_title" v-if="name">{{ $t('_auth.shareAccess', { name: name }) }}</div>
 		<div class="_title" v-else>{{ $t('_auth.shareAccessAsk') }}</div>
 		<div class="_content">
-			<p>{{ $t('_auth.permissionAsk') }}</p>
+			<p v-t="'_auth.permissionAsk'"></p>
 			<ul>
 				<template v-for="p in permission">
 					<li :key="p">{{ $t(`_permissions.${p}`) }}</li>

src/client/pages/my-antennas/index.antenna.vue

@@ -3,15 +3,15 @@
 	<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
 	<div class="_content body">
 		<mk-input v-model="name">
-			<span>{{ $t('name') }}</span>
+			<span v-t="'name'"></span>
 		</mk-input>
 		<mk-select v-model="src">
 			<template #label>{{ $t('antennaSource') }}</template>
-			<option value="all">{{ $t('_antennaSources.all') }}</option>
+			<option value="all" v-t="'_antennaSources.all'"></option>
-			<option value="home">{{ $t('_antennaSources.homeTimeline') }}</option>
+			<option value="home" v-t="'_antennaSources.homeTimeline'"></option>
-			<option value="users">{{ $t('_antennaSources.users') }}</option>
+			<option value="users" v-t="'_antennaSources.users'"></option>
-			<option value="list">{{ $t('_antennaSources.userList') }}</option>
+			<option value="list" v-t="'_antennaSources.userList'"></option>
-			<option value="group">{{ $t('_antennaSources.userGroup') }}</option>
+			<option value="group" v-t="'_antennaSources.userGroup'"></option>
 		</mk-select>
 		<mk-select v-model="userListId" v-if="src === 'list'">
 			<template #label>{{ $t('userList') }}</template>
@@ -22,21 +22,21 @@
 			<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
 		</mk-select>
 		<mk-textarea v-model="users" v-else-if="src === 'users'">
-			<span>{{ $t('users') }}</span>
+			<span v-t="'users'"></span>
-			<template #desc>{{ $t('antennaUsersDescription') }} <button class="_textButton" @click="addUser">{{ $t('addUser') }}</button></template>
+			<template #desc>{{ $t('antennaUsersDescription') }} <button class="_textButton" @click="addUser" v-t="'addUser'"></button></template>
 		</mk-textarea>
-		<mk-switch v-model="withReplies">{{ $t('withReplies') }}</mk-switch>
+		<mk-switch v-model="withReplies" v-t="'withReplies'"></mk-switch>
 		<mk-textarea v-model="keywords">
-			<span>{{ $t('antennaKeywords') }}</span>
+			<span v-t="'antennaKeywords'"></span>
 			<template #desc>{{ $t('antennaKeywordsDescription') }}</template>
 		</mk-textarea>
 		<mk-textarea v-model="excludeKeywords">
-			<span>{{ $t('antennaExcludeKeywords') }}</span>
+			<span v-t="'antennaExcludeKeywords'"></span>
 			<template #desc>{{ $t('antennaKeywordsDescription') }}</template>
 		</mk-textarea>
-		<mk-switch v-model="caseSensitive">{{ $t('caseSensitive') }}</mk-switch>
+		<mk-switch v-model="caseSensitive" v-t="'caseSensitive'"></mk-switch>
-		<mk-switch v-model="withFile">{{ $t('withFileAntenna') }}</mk-switch>
+		<mk-switch v-model="withFile" v-t="'withFileAntenna'"></mk-switch>
-		<mk-switch v-model="notify">{{ $t('notifyAntenna') }}</mk-switch>
+		<mk-switch v-model="notify" v-t="'notifyAntenna'"></mk-switch>
 	</div>
 	<div class="_footer">
 		<mk-button inline @click="saveAntenna()" primary><fa :icon="faSave"/> {{ $t('save') }}</mk-button>

src/client/pages/my-antennas/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="ieepwinx">
 	<portal to="icon"><fa :icon="faSatellite"/></portal>
-	<portal to="title">{{ $t('manageAntennas') }}</portal>
+	<portal to="title" v-t="'manageAntennas'"></portal>
 
 	<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
 

src/client/pages/my-groups/group.vue

@@ -6,16 +6,16 @@
 	<transition name="zoom" mode="out-in">
 		<div v-if="group" class="_card">
 			<div class="_content">
-				<mk-button inline @click="renameGroup()">{{ $t('rename') }}</mk-button>
+				<mk-button inline @click="renameGroup()" v-t="'rename'"></mk-button>
-				<mk-button inline @click="transfer()">{{ $t('transfer') }}</mk-button>
+				<mk-button inline @click="transfer()" v-t="'transfer'"></mk-button>
-				<mk-button inline @click="deleteGroup()">{{ $t('delete') }}</mk-button>
+				<mk-button inline @click="deleteGroup()" v-t="'delete'"></mk-button>
 			</div>
 		</div>
 	</transition>
 
 	<transition name="zoom" mode="out-in">
 		<div v-if="group" class="_card members">
-			<div class="_title">{{ $t('members') }}</div>
+			<div class="_title" v-t="'members'"></div>
 			<div class="_content">
 				<div class="users">
 					<div class="user" v-for="user in users" :key="user.id">
@@ -31,7 +31,7 @@
 				</div>
 			</div>
 			<div class="_footer">
-				<mk-button inline @click="invite()">{{ $t('invite') }}</mk-button>
+				<mk-button inline @click="invite()" v-t="'invite'"></mk-button>
 			</div>
 		</div>
 	</transition>

src/client/pages/my-groups/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="">
 	<portal to="icon"><fa :icon="faUsers"/></portal>
-	<portal to="title">{{ $t('groups') }}</portal>
+	<portal to="title" v-t="'groups'"></portal>
 
 	<mk-button @click="create" primary style="margin: 0 auto var(--margin) auto;"><fa :icon="faPlus"/> {{ $t('createGroup') }}</mk-button>
 

src/client/pages/my-lists/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="qkcjvfiv">
 	<portal to="icon"><fa :icon="faListUl"/></portal>
-	<portal to="title">{{ $t('manageLists') }}</portal>
+	<portal to="title" v-t="'manageLists'"></portal>
 
 	<mk-button @click="create" primary class="add"><fa :icon="faPlus"/> {{ $t('createList') }}</mk-button>
 

src/client/pages/my-lists/list.vue

@@ -6,15 +6,15 @@
 	<transition name="zoom" mode="out-in">
 		<div v-if="list" class="_card">
 			<div class="_content">
-				<mk-button inline @click="renameList()">{{ $t('rename') }}</mk-button>
+				<mk-button inline @click="renameList()" v-t="'rename'"></mk-button>
-				<mk-button inline @click="deleteList()">{{ $t('delete') }}</mk-button>
+				<mk-button inline @click="deleteList()" v-t="'delete'"></mk-button>
 			</div>
 		</div>
 	</transition>
 
 	<transition name="zoom" mode="out-in">
 		<div v-if="list" class="_card members">
-			<div class="_title">{{ $t('members') }}</div>
+			<div class="_title" v-t="'members'"></div>
 			<div class="_content">
 				<div class="users">
 					<div class="user" v-for="user in users" :key="user.id">
@@ -30,7 +30,7 @@
 				</div>
 			</div>
 			<div class="_footer">
-				<mk-button inline @click="addUser()">{{ $t('addUser') }}</mk-button>
+				<mk-button inline @click="addUser()" v-t="'addUser'"></mk-button>
 			</div>
 		</div>
 	</transition>

src/client/pages/my-settings/2fa.vue

@@ -2,28 +2,28 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faLock"/> {{ $t('twoStepAuthentication') }}</div>
 	<div class="_content">
-		<p v-if="!data && !$store.state.i.twoFactorEnabled"><mk-button @click="register">{{ $t('_2fa.registerDevice') }}</mk-button></p>
+		<p v-if="!data && !$store.state.i.twoFactorEnabled"><mk-button @click="register" v-t="'_2fa.registerDevice'"></mk-button></p>
 		<template v-if="$store.state.i.twoFactorEnabled">
-			<p>{{ $t('_2fa.alreadyRegistered') }}</p>
+			<p v-t="'_2fa.alreadyRegistered'"></p>
-			<mk-button @click="unregister">{{ $t('unregister') }}</mk-button>
+			<mk-button @click="unregister" v-t="'unregister'"></mk-button>
 
 			<template v-if="supportsCredentials">
 				<hr class="totp-method-sep">
 
-				<h2 class="heading">{{ $t('securityKey') }}</h2>
+				<h2 class="heading" v-t="'securityKey'"></h2>
-				<p>{{ $t('_2fa.securityKeyInfo') }}</p>
+				<p v-t="'_2fa.securityKeyInfo'"></p>
 				<div class="key-list">
 					<div class="key" v-for="key in $store.state.i.securityKeysList">
 						<h3>{{ key.name }}</h3>
 						<div class="last-used">{{ $t('lastUsed') }}<mk-time :time="key.lastUsed"/></div>
-						<mk-button @click="unregisterKey(key)">{{ $t('unregister') }}</mk-button>
+						<mk-button @click="unregisterKey(key)" v-t="'unregister'"></mk-button>
 					</div>
 				</div>
 
-				<mk-switch v-model="usePasswordLessLogin" @change="updatePasswordLessLogin" v-if="$store.state.i.securityKeysList.length > 0">{{ $t('passwordLessLogin') }}</mk-switch>
+				<mk-switch v-model="usePasswordLessLogin" @change="updatePasswordLessLogin" v-if="$store.state.i.securityKeysList.length > 0" v-t="'passwordLessLogin'"></mk-switch>
 
 				<mk-info warn v-if="registration && registration.error">{{ $t('error') }} {{ registration.error }}</mk-info>
-				<mk-button v-if="!registration || registration.error" @click="addSecurityKey">{{ $t('_2fa.registerKey') }}</mk-button>
+				<mk-button v-if="!registration || registration.error" @click="addSecurityKey" v-t="'_2fa.registerKey'"></mk-button>
 
 				<ol v-if="registration && !registration.error">
 					<li v-if="registration.stage >= 0">
@@ -33,9 +33,9 @@
 					<li v-if="registration.stage >= 1">
 						<mk-form :disabled="registration.stage != 1 || registration.saving">
 							<mk-input v-model="keyName" :max="30">
-								<span>{{ $t('securityKeyName') }}</span>
+								<span v-t="'securityKeyName'"></span>
 							</mk-input>
-							<mk-button @click="registerKey" :disabled="keyName.length == 0">{{ $t('registerSecurityKey') }}</mk-button>
+							<mk-button @click="registerKey" :disabled="keyName.length == 0" v-t="'registerSecurityKey'"></mk-button>
 							<fa icon="spinner" pulse fixed-width v-if="registration.saving && registration.stage == 1" />
 						</mk-form>
 					</li>
@@ -52,8 +52,8 @@
 				</li>
 				<li>{{ $t('_2fa.step2') }}<br><img :src="data.qr"></li>
 				<li>{{ $t('_2fa.step3') }}<br>
-					<mk-input v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false">{{ $t('token') }}</mk-input>
+					<mk-input v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" v-t="'token'"></mk-input>
-					<mk-button primary @click="submit">{{ $t('done') }}</mk-button>
+					<mk-button primary @click="submit" v-t="'done'"></mk-button>
 				</li>
 			</ol>
 			<mk-info>{{ $t('_2fa.step4') }}</mk-info>

src/client/pages/my-settings/api.vue

@@ -2,7 +2,7 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faKey"/> API</div>
 	<div class="_content">
-		<mk-button @click="generateToken">{{ $t('generateAccessToken') }}</mk-button>
+		<mk-button @click="generateToken" v-t="'generateAccessToken'"></mk-button>
 		<mk-button @click="regenerateToken"><fa :icon="faSyncAlt"/> {{ $t('regenerate') }}</mk-button>
 	</div>
 </section>

src/client/pages/my-settings/import-export.vue

@@ -3,11 +3,11 @@
 	<div class="_title"><fa :icon="faBoxes"/> {{ $t('importAndExport') }}</div>
 	<div class="_content">
 		<mk-select v-model="exportTarget">
-			<option value="notes">{{ $t('_exportOrImport.allNotes') }}</option>
+			<option value="notes" v-t="'_exportOrImport.allNotes'"></option>
-			<option value="following">{{ $t('_exportOrImport.followingList') }}</option>
+			<option value="following" v-t="'_exportOrImport.followingList'"></option>
-			<option value="user-lists">{{ $t('_exportOrImport.userLists') }}</option>
+			<option value="user-lists" v-t="'_exportOrImport.userLists'"></option>
-			<option value="mute">{{ $t('_exportOrImport.muteList') }}</option>
+			<option value="mute" v-t="'_exportOrImport.muteList'"></option>
-			<option value="blocking">{{ $t('_exportOrImport.blockingList') }}</option>
+			<option value="blocking" v-t="'_exportOrImport.blockingList'"></option>
 		</mk-select>
 		<mk-button inline @click="doExport()"><fa :icon="faDownload"/> {{ $t('export') }}</mk-button>
 		<mk-button inline @click="doImport()" :disabled="!['following', 'user-lists'].includes(exportTarget)"><fa :icon="faUpload"/> {{ $t('import') }}</mk-button>

src/client/pages/my-settings/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faCog"/></portal>
-	<portal to="title">{{ $t('accountSettings') }}</portal>
+	<portal to="title" v-t="'accountSettings'"></portal>
 
 	<x-profile-setting/>
 	<x-privacy-setting/>
@@ -18,9 +18,9 @@
 			</mk-switch>
 		</div>
 		<div class="_content">
-			<mk-button @click="readAllNotifications">{{ $t('markAsReadAllNotifications') }}</mk-button>
+			<mk-button @click="readAllNotifications" v-t="'markAsReadAllNotifications'"></mk-button>
-			<mk-button @click="readAllUnreadNotes">{{ $t('markAsReadAllUnreadNotes') }}</mk-button>
+			<mk-button @click="readAllUnreadNotes" v-t="'markAsReadAllUnreadNotes'"></mk-button>
-			<mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button>
+			<mk-button @click="readAllMessagingMessages" v-t="'markAsReadAllTalkMessages'"></mk-button>
 		</div>
 	</section>
 
@@ -32,9 +32,9 @@
 	<x-integration/>
 	<x-api/>
 
-	<router-link class="_panel _buttonPrimary" to="/my/apps" style="margin: var(--margin) auto;">{{ $t('installedApps') }}</router-link>
+	<router-link class="_panel _buttonPrimary" to="/my/apps" style="margin: var(--margin) auto;" v-t="'installedApps'"></router-link>
 
-	<button class="_panel _buttonPrimary" @click="$root.signout()" style="margin: var(--margin) auto;">{{ $t('logout') }}</button>
+	<button class="_panel _buttonPrimary" @click="$root.signout()" style="margin: var(--margin) auto;" v-t="'logout'"></button>
 </div>
 </template>
 

src/client/pages/my-settings/integration.vue

@@ -5,22 +5,22 @@
 	<div class="_content" v-if="enableTwitterIntegration">
 		<header><fa :icon="faTwitter"/> Twitter</header>
 		<p v-if="integrations.twitter">{{ $t('connectedTo') }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
-		<mk-button v-if="integrations.twitter" @click="disconnectTwitter">{{ $t('disconnectSerice') }}</mk-button>
+		<mk-button v-if="integrations.twitter" @click="disconnectTwitter" v-t="'disconnectSerice'"></mk-button>
-		<mk-button v-else @click="connectTwitter">{{ $t('connectSerice') }}</mk-button>
+		<mk-button v-else @click="connectTwitter" v-t="'connectSerice'"></mk-button>
 	</div>
 
 	<div class="_content" v-if="enableDiscordIntegration">
 		<header><fa :icon="faDiscord"/> Discord</header>
 		<p v-if="integrations.discord">{{ $t('connectedTo') }}: <a :href="`https://discordapp.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
-		<mk-button v-if="integrations.discord" @click="disconnectDiscord">{{ $t('disconnectSerice') }}</mk-button>
+		<mk-button v-if="integrations.discord" @click="disconnectDiscord" v-t="'disconnectSerice'"></mk-button>
-		<mk-button v-else @click="connectDiscord">{{ $t('connectSerice') }}</mk-button>
+		<mk-button v-else @click="connectDiscord" v-t="'connectSerice'"></mk-button>
 	</div>
 
 	<div class="_content" v-if="enableGithubIntegration">
 		<header><fa :icon="faGithub"/> GitHub</header>
 		<p v-if="integrations.github">{{ $t('connectedTo') }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
-		<mk-button v-if="integrations.github" @click="disconnectGithub">{{ $t('disconnectSerice') }}</mk-button>
+		<mk-button v-if="integrations.github" @click="disconnectGithub" v-t="'disconnectSerice'"></mk-button>
-		<mk-button v-else @click="connectGithub">{{ $t('connectSerice') }}</mk-button>
+		<mk-button v-else @click="connectGithub" v-t="'connectSerice'"></mk-button>
 	</div>
 </section>
 </template>

src/client/pages/my-settings/mute-block.vue

@@ -2,9 +2,9 @@
 <section class="rrfwjxfl _card">
 	<div class="_title"><fa :icon="faBan"/> {{ $t('muteAndBlock') }}</div>
 	<div class="_content">
-		<span>{{ $t('mutedUsers') }}</span>
+		<span v-t="'mutedUsers'"></span>
 		<mk-pagination :pagination="mutingPagination" class="muting">
-			<template #empty><span>{{ $t('noUsers') }}</span></template>
+			<template #empty><span v-t="'noUsers'"></span></template>
 			<template #default="{items}">
 				<div class="user" v-for="(mute, i) in items" :key="mute.id">
 					<router-link class="name" :to="mute.mutee | userPage">
@@ -15,9 +15,9 @@
 		</mk-pagination>
 	</div>
 	<div class="_content">
-		<span>{{ $t('blockedUsers') }}</span>
+		<span v-t="'blockedUsers'"></span>
 		<mk-pagination :pagination="blockingPagination" class="blocking">
-			<template #empty><span>{{ $t('noUsers') }}</span></template>
+			<template #empty><span v-t="'noUsers'"></span></template>
 			<template #default="{items}">
 				<div class="user" v-for="(block, i) in items" :key="block.id">
 					<router-link class="name" :to="block.blockee | userPage">

src/client/pages/my-settings/privacy.vue

@@ -2,19 +2,19 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faLock"/> {{ $t('privacy') }}</div>
 	<div class="_content">
-		<mk-switch v-model="isLocked" @change="save()">{{ $t('makeFollowManuallyApprove') }}</mk-switch>
+		<mk-switch v-model="isLocked" @change="save()" v-t="'makeFollowManuallyApprove'"></mk-switch>
-		<mk-switch v-model="autoAcceptFollowed" v-if="isLocked" @change="save()">{{ $t('autoAcceptFollowed') }}</mk-switch>
+		<mk-switch v-model="autoAcceptFollowed" v-if="isLocked" @change="save()" v-t="'autoAcceptFollowed'"></mk-switch>
 	</div>
 	<div class="_content">
-		<mk-switch v-model="rememberNoteVisibility" @change="save()">{{ $t('rememberNoteVisibility') }}</mk-switch>
+		<mk-switch v-model="rememberNoteVisibility" @change="save()" v-t="'rememberNoteVisibility'"></mk-switch>
 		<mk-select v-model="defaultNoteVisibility" style="margin-bottom: 8px;" v-if="!rememberNoteVisibility">
 			<template #label>{{ $t('defaultNoteVisibility') }}</template>
-			<option value="public">{{ $t('_visibility.public') }}</option>
+			<option value="public" v-t="'_visibility.public'"></option>
-			<option value="home">{{ $t('_visibility.home') }}</option>
+			<option value="home" v-t="'_visibility.home'"></option>
-			<option value="followers">{{ $t('_visibility.followers') }}</option>
+			<option value="followers" v-t="'_visibility.followers'"></option>
-			<option value="specified">{{ $t('_visibility.specified') }}</option>
+			<option value="specified" v-t="'_visibility.specified'"></option>
 		</mk-select>
-		<mk-switch v-model="defaultNoteLocalOnly" v-if="!rememberNoteVisibility">{{ $t('_visibility.localOnly') }}</mk-switch>
+		<mk-switch v-model="defaultNoteLocalOnly" v-if="!rememberNoteVisibility" v-t="'_visibility.localOnly'"></mk-switch>
 	</div>
 </section>
 </template>

src/client/pages/my-settings/profile.vue

@@ -7,16 +7,16 @@
 		</div>
 	
 		<mk-input v-model="name" :max="30">
-			<span>{{ $t('_profile.name') }}</span>
+			<span v-t="'_profile.name'"></span>
 		</mk-input>
 
 		<mk-textarea v-model="description" :max="500">
-			<span>{{ $t('_profile.description') }}</span>
+			<span v-t="'_profile.description'"></span>
 			<template #desc>{{ $t('_profile.youCanIncludeHashtags') }}</template>
 		</mk-textarea>
 
 		<mk-input v-model="location">
-			<span>{{ $t('location') }}</span>
+			<span v-t="'location'"></span>
 			<template #prefix><fa :icon="faMapMarkerAlt"/></template>
 		</mk-input>
 
@@ -26,27 +26,27 @@
 		</mk-input>
 
 		<details class="fields">
-			<summary>{{ $t('_profile.metadata') }}</summary>
+			<summary v-t="'_profile.metadata'"></summary>
 			<div class="row">
-				<mk-input v-model="fieldName0">{{ $t('_profile.metadataLabel') }}</mk-input>
+				<mk-input v-model="fieldName0" v-t="'_profile.metadataLabel'"></mk-input>
-				<mk-input v-model="fieldValue0">{{ $t('_profile.metadataContent') }}</mk-input>
+				<mk-input v-model="fieldValue0" v-t="'_profile.metadataContent'"></mk-input>
 			</div>
 			<div class="row">
-				<mk-input v-model="fieldName1">{{ $t('_profile.metadataLabel') }}</mk-input>
+				<mk-input v-model="fieldName1" v-t="'_profile.metadataLabel'"></mk-input>
-				<mk-input v-model="fieldValue1">{{ $t('_profile.metadataContent') }}</mk-input>
+				<mk-input v-model="fieldValue1" v-t="'_profile.metadataContent'"></mk-input>
 			</div>
 			<div class="row">
-				<mk-input v-model="fieldName2">{{ $t('_profile.metadataLabel') }}</mk-input>
+				<mk-input v-model="fieldName2" v-t="'_profile.metadataLabel'"></mk-input>
-				<mk-input v-model="fieldValue2">{{ $t('_profile.metadataContent') }}</mk-input>
+				<mk-input v-model="fieldValue2" v-t="'_profile.metadataContent'"></mk-input>
 			</div>
 			<div class="row">
-				<mk-input v-model="fieldName3">{{ $t('_profile.metadataLabel') }}</mk-input>
+				<mk-input v-model="fieldName3" v-t="'_profile.metadataLabel'"></mk-input>
-				<mk-input v-model="fieldValue3">{{ $t('_profile.metadataContent') }}</mk-input>
+				<mk-input v-model="fieldValue3" v-t="'_profile.metadataContent'"></mk-input>
 			</div>
 		</details>
 
-		<mk-switch v-model="isBot">{{ $t('flagAsBot') }}</mk-switch>
+		<mk-switch v-model="isBot" v-t="'flagAsBot'"></mk-switch>
-		<mk-switch v-model="isCat">{{ $t('flagAsCat') }}</mk-switch>
+		<mk-switch v-model="isCat" v-t="'flagAsCat'"></mk-switch>
 	</div>
 	<div class="_footer">
 		<mk-button @click="save(true)" primary><fa :icon="faSave"/> {{ $t('save') }}</mk-button>

src/client/pages/my-settings/reaction.vue

@@ -3,7 +3,7 @@
 	<div class="_title"><fa :icon="faLaugh"/> {{ $t('reaction') }}</div>
 	<div class="_content">
 		<mk-input v-model="reactions" style="font-family: 'Segoe UI Emoji', 'Noto Color Emoji', Roboto, HelveticaNeue, Arial, sans-serif">
-			{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></template>
+			{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }} <button class="_textButton" @click="chooseEmoji" v-t="'chooseEmoji'"></button></template>
 		</mk-input>
 		<mk-button inline @click="setDefault"><fa :icon="faUndo"/> {{ $t('default') }}</mk-button>
 	</div>

src/client/pages/my-settings/security.vue

@@ -2,7 +2,7 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faLock"/> {{ $t('password') }}</div>
 	<div class="_content">
-		<mk-button primary @click="change()">{{ $t('changePassword') }}</mk-button>
+		<mk-button primary @click="change()" v-t="'changePassword'"></mk-button>
 	</div>
 </section>
 </template>

src/client/pages/not-found.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="ipledcug">
 	<portal to="icon"><fa :icon="faExclamationTriangle"/></portal>
-	<portal to="title">{{ $t('notFound') }}</portal>
+	<portal to="title" v-t="'notFound'"></portal>
 
 	<div class="_fullinfo">
 		<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
-		<div>{{ $t('notFoundDescription') }}</div>
+		<div v-t="'notFoundDescription'"></div>
 	</div>
 </div>
 </template>

src/client/pages/notifications.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faBell"/></portal>
-	<portal to="title">{{ $t('notifications') }}</portal>
+	<portal to="title" v-t="'notifications'"></portal>
 	<x-notifications @before="before" @after="after" page/>
 </div>
 </template>

src/client/pages/page-editor/els/page-editor.el.button.vue

@@ -3,21 +3,21 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.button') }}</template>
 
 	<section class="xfhsjczc">
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._button.text') }}</span></mk-input>
+		<mk-input v-model="value.text"><span v-t="'_pages.blocks._button.text'"></span></mk-input>
-		<mk-switch v-model="value.primary"><span>{{ $t('_pages.blocks._button.colored') }}</span></mk-switch>
+		<mk-switch v-model="value.primary"><span v-t="'_pages.blocks._button.colored'"></span></mk-switch>
 		<mk-select v-model="value.action">
 			<template #label>{{ $t('_pages.blocks._button.action') }}</template>
-			<option value="dialog">{{ $t('_pages.blocks._button._action.dialog') }}</option>
+			<option value="dialog" v-t="'_pages.blocks._button._action.dialog'"></option>
-			<option value="resetRandom">{{ $t('_pages.blocks._button._action.resetRandom') }}</option>
+			<option value="resetRandom" v-t="'_pages.blocks._button._action.resetRandom'"></option>
-			<option value="pushEvent">{{ $t('_pages.blocks._button._action.pushEvent') }}</option>
+			<option value="pushEvent" v-t="'_pages.blocks._button._action.pushEvent'"></option>
-			<option value="callAiScript">{{ $t('_pages.blocks._button._action.callAiScript') }}</option>
+			<option value="callAiScript" v-t="'_pages.blocks._button._action.callAiScript'"></option>
 		</mk-select>
 		<template v-if="value.action === 'dialog'">
-			<mk-input v-model="value.content"><span>{{ $t('_pages.blocks._button._action._dialog.content') }}</span></mk-input>
+			<mk-input v-model="value.content"><span v-t="'_pages.blocks._button._action._dialog.content'"></span></mk-input>
 		</template>
 		<template v-else-if="value.action === 'pushEvent'">
-			<mk-input v-model="value.event"><span>{{ $t('_pages.blocks._button._action._pushEvent.event') }}</span></mk-input>
+			<mk-input v-model="value.event"><span v-t="'_pages.blocks._button._action._pushEvent.event'"></span></mk-input>
-			<mk-input v-model="value.message"><span>{{ $t('_pages.blocks._button._action._pushEvent.message') }}</span></mk-input>
+			<mk-input v-model="value.message"><span v-t="'_pages.blocks._button._action._pushEvent.message'"></span></mk-input>
 			<mk-select v-model="value.var">
 				<template #label>{{ $t('_pages.blocks._button._action._pushEvent.variable') }}</template>
 				<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
@@ -31,7 +31,7 @@
 			</mk-select>
 		</template>
 		<template v-else-if="value.action === 'callAiScript'">
-			<mk-input v-model="value.fn"><span>{{ $t('_pages.blocks._button._action._callAiScript.functionName') }}</span></mk-input>
+			<mk-input v-model="value.fn"><span v-t="'_pages.blocks._button._action._callAiScript.functionName'"></span></mk-input>
 		</template>
 	</section>
 </x-container>

src/client/pages/page-editor/els/page-editor.el.canvas.vue

@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faPaintBrush"/> {{ $t('_pages.blocks.canvas') }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._canvas.id') }}</span></mk-input>
+		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span v-t="'_pages.blocks._canvas.id'"></span></mk-input>
-		<mk-input v-model="value.width" type="number"><span>{{ $t('_pages.blocks._canvas.width') }}</span><template #suffix>px</template></mk-input>
+		<mk-input v-model="value.width" type="number"><span v-t="'_pages.blocks._canvas.width'"></span><template #suffix>px</template></mk-input>
-		<mk-input v-model="value.height" type="number"><span>{{ $t('_pages.blocks._canvas.height') }}</span><template #suffix>px</template></mk-input>
+		<mk-input v-model="value.height" type="number"><span v-t="'_pages.blocks._canvas.height'"></span><template #suffix>px</template></mk-input>
 	</section>
 </x-container>
 </template>

src/client/pages/page-editor/els/page-editor.el.counter.vue

@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.counter') }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._counter.name') }}</span></mk-input>
+		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span v-t="'_pages.blocks._counter.name'"></span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._counter.text') }}</span></mk-input>
+		<mk-input v-model="value.text"><span v-t="'_pages.blocks._counter.text'"></span></mk-input>
-		<mk-input v-model="value.inc" type="number"><span>{{ $t('_pages.blocks._counter.inc') }}</span></mk-input>
+		<mk-input v-model="value.inc" type="number"><span v-t="'_pages.blocks._counter.inc'"></span></mk-input>
 	</section>
 </x-container>
 </template>

src/client/pages/page-editor/els/page-editor.el.number-input.vue

@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.numberInput') }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._numberInput.name') }}</span></mk-input>
+		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span v-t="'_pages.blocks._numberInput.name'"></span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._numberInput.text') }}</span></mk-input>
+		<mk-input v-model="value.text"><span v-t="'_pages.blocks._numberInput.text'"></span></mk-input>
-		<mk-input v-model="value.default" type="number"><span>{{ $t('_pages.blocks._numberInput.default') }}</span></mk-input>
+		<mk-input v-model="value.default" type="number"><span v-t="'_pages.blocks._numberInput.default'"></span></mk-input>
 	</section>
 </x-container>
 </template>

src/client/pages/page-editor/els/page-editor.el.post.vue

@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faPaperPlane"/> {{ $t('_pages.blocks.post') }}</template>
 
 	<section style="padding: 16px;">
-		<mk-textarea v-model="value.text">{{ $t('_pages.blocks._post.text') }}</mk-textarea>
+		<mk-textarea v-model="value.text" v-t="'_pages.blocks._post.text'"></mk-textarea>
-		<mk-switch v-model="value.attachCanvasImage"><span>{{ $t('_pages.blocks._post.attachCanvasImage') }}</span></mk-switch>
+		<mk-switch v-model="value.attachCanvasImage"><span v-t="'_pages.blocks._post.attachCanvasImage'"></span></mk-switch>
-		<mk-input v-if="value.attachCanvasImage" v-model="value.canvasId"><span>{{ $t('_pages.blocks._post.canvasId') }}</span></mk-input>
+		<mk-input v-if="value.attachCanvasImage" v-model="value.canvasId"><span v-t="'_pages.blocks._post.canvasId'"></span></mk-input>
 	</section>
 </x-container>
 </template>

src/client/pages/page-editor/els/page-editor.el.radio-button.vue

@@ -3,10 +3,10 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.radioButton') }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._radioButton.name') }}</span></mk-input>
+		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span v-t="'_pages.blocks._radioButton.name'"></span></mk-input>
-		<mk-input v-model="value.title"><span>{{ $t('_pages.blocks._radioButton.title') }}</span></mk-input>
+		<mk-input v-model="value.title"><span v-t="'_pages.blocks._radioButton.title'"></span></mk-input>
-		<mk-textarea v-model="values"><span>{{ $t('_pages.blocks._radioButton.values') }}</span></mk-textarea>
+		<mk-textarea v-model="values"><span v-t="'_pages.blocks._radioButton.values'"></span></mk-textarea>
-		<mk-input v-model="value.default"><span>{{ $t('_pages.blocks._radioButton.default') }}</span></mk-input>
+		<mk-input v-model="value.default"><span v-t="'_pages.blocks._radioButton.default'"></span></mk-input>
 	</section>
 </x-container>
 </template>

src/client/pages/page-editor/els/page-editor.el.switch.vue

@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.switch') }}</template>
 
 	<section class="kjuadyyj">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._switch.name') }}</span></mk-input>
+		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span v-t="'_pages.blocks._switch.name'"></span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._switch.text') }}</span></mk-input>
+		<mk-input v-model="value.text"><span v-t="'_pages.blocks._switch.text'"></span></mk-input>
-		<mk-switch v-model="value.default"><span>{{ $t('_pages.blocks._switch.default') }}</span></mk-switch>
+		<mk-switch v-model="value.default"><span v-t="'_pages.blocks._switch.default'"></span></mk-switch>
 	</section>
 </x-container>
 </template>

src/client/pages/page-editor/els/page-editor.el.text-input.vue

@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.textInput') }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textInput.name') }}</span></mk-input>
+		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span v-t="'_pages.blocks._textInput.name'"></span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._textInput.text') }}</span></mk-input>
+		<mk-input v-model="value.text"><span v-t="'_pages.blocks._textInput.text'"></span></mk-input>
-		<mk-input v-model="value.default" type="text"><span>{{ $t('_pages.blocks._textInput.default') }}</span></mk-input>
+		<mk-input v-model="value.default" type="text"><span v-t="'_pages.blocks._textInput.default'"></span></mk-input>
 	</section>
 </x-container>
 </template>

src/client/pages/page-editor/els/page-editor.el.textarea-input.vue

@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.textareaInput') }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textareaInput.name') }}</span></mk-input>
+		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span v-t="'_pages.blocks._textareaInput.name'"></span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._textareaInput.text') }}</span></mk-input>
+		<mk-input v-model="value.text"><span v-t="'_pages.blocks._textareaInput.text'"></span></mk-input>
-		<mk-textarea v-model="value.default"><span>{{ $t('_pages.blocks._textareaInput.default') }}</span></mk-textarea>
+		<mk-textarea v-model="value.default"><span v-t="'_pages.blocks._textareaInput.default'"></span></mk-textarea>
 	</section>
 </x-container>
 </template>

src/client/pages/page-editor/page-editor.script-block.vue

@@ -41,7 +41,7 @@
 	</section>
 	<section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
 		<mk-textarea v-model="slots">
-			<span>{{ $t('_pages.script.blocks._fn.slots') }}</span>
+			<span v-t="'_pages.script.blocks._fn.slots'"></span>
 			<template #desc>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
 		</mk-textarea>
 		<x-v v-if="value.value.expression" v-model="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>

src/client/pages/page-editor/page-editor.vue

@@ -14,28 +14,28 @@
 			<router-link class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('_pages.viewPage') }}</router-link>
 
 			<mk-input v-model="title">
-				<span>{{ $t('_pages.title') }}</span>
+				<span v-t="'_pages.title'"></span>
 			</mk-input>
 
 			<template v-if="showOptions">
 				<mk-input v-model="summary">
-					<span>{{ $t('_pages.summary') }}</span>
+					<span v-t="'_pages.summary'"></span>
 				</mk-input>
 
 				<mk-input v-model="name">
 					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-					<span>{{ $t('_pages.url') }}</span>
+					<span v-t="'_pages.url'"></span>
 				</mk-input>
 
-				<mk-switch v-model="alignCenter">{{ $t('_pages.alignCenter') }}</mk-switch>
+				<mk-switch v-model="alignCenter" v-t="'_pages.alignCenter'"></mk-switch>
 
 				<mk-select v-model="font">
 					<template #label>{{ $t('_pages.font') }}</template>
-					<option value="serif">{{ $t('_pages.fontSerif') }}</option>
+					<option value="serif" v-t="'_pages.fontSerif'"></option>
-					<option value="sans-serif">{{ $t('_pages.fontSansSerif') }}</option>
+					<option value="sans-serif" v-t="'_pages.fontSansSerif'"></option>
 				</mk-select>
 
-				<mk-switch v-model="hideTitleWhenPinned">{{ $t('_pages.hideTitleWhenPinned') }}</mk-switch>
+				<mk-switch v-model="hideTitleWhenPinned" v-t="'_pages.hideTitleWhenPinned'"></mk-switch>
 
 				<div class="eyeCatch">
 					<mk-button v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage()"><fa :icon="faPlus"/> {{ $t('_pages.eyeCatchingImageSet') }}</mk-button>

src/client/pages/page.vue

@@ -14,11 +14,11 @@
 		<div class="_footer">
 			<small>@{{ page.user.username }}</small>
 			<template v-if="$store.getters.isSignedIn && $store.state.i.id === page.userId">
-				<router-link :to="`/my/pages/edit/${page.id}`">{{ $t('_pages.editThisPage') }}</router-link>
+				<router-link :to="`/my/pages/edit/${page.id}`" v-t="'_pages.editThisPage'"></router-link>
-				<a v-if="$store.state.i.pinnedPageId === page.id" @click="pin(false)">{{ $t('unpin') }}</a>
+				<a v-if="$store.state.i.pinnedPageId === page.id" @click="pin(false)" v-t="'unpin'"></a>
-				<a v-else @click="pin(true)">{{ $t('pin') }}</a>
+				<a v-else @click="pin(true)" v-t="'pin'"></a>
 			</template>
-			<router-link :to="`./${page.name}/view-source`">{{ $t('_pages.viewSource') }}</router-link>
+			<router-link :to="`./${page.name}/view-source`" v-t="'_pages.viewSource'"></router-link>
 			<div class="like">
 				<button class="_button" @click="unlike()" v-if="page.isLiked" :title="$t('_pages.unlike')"><fa :icon="faHeartS"/></button>
 				<button class="_button" @click="like()" v-else :title="$t('_pages.like')"><fa :icon="faHeartR"/></button>

src/client/pages/pages.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faStickyNote"/></portal>
-	<portal to="title">{{ $t('pages') }}</portal>
+	<portal to="title" v-t="'pages'"></portal>
 
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faEdit" fixed-width/>{{ $t('_pages.my') }}</template>

src/client/pages/preferences/index.vue

@@ -1,9 +1,9 @@
 <template>
 <div>
 	<portal to="icon"><fa :icon="faCog"/></portal>
-	<portal to="title">{{ $t('clinetSettings') }}</portal>
+	<portal to="title" v-t="'clinetSettings'"></portal>
 
-	<router-link v-if="$store.getters.isSignedIn" class="_panel _buttonPrimary" to="/my/settings" style="margin-bottom: var(--margin);">{{ $t('accountSettings') }}</router-link>
+	<router-link v-if="$store.getters.isSignedIn" class="_panel _buttonPrimary" to="/my/settings" style="margin-bottom: var(--margin);" v-t="'accountSettings'"></router-link>
 
 	<x-theme/>
 
@@ -16,7 +16,7 @@
 		<div class="_content">
 			<mk-range v-model="sfxVolume" :min="0" :max="1" :step="0.1">
 				<fa slot="icon" :icon="volumeIcon"/>
-				<span slot="title">{{ $t('volume') }}</span>
+				<span slot="title" v-t="'volume'"></span>
 			</mk-range>
 		</div>
 		<div class="_content">
@@ -61,25 +61,25 @@
 			</mk-switch>
 		</div>
 		<div class="_content">
-			<div>{{ $t('_deck.columnAlign') }}</div>
+			<div v-t="'_deck.columnAlign'"></div>
-			<mk-radio v-model="deckColumnAlign" value="left">{{ $t('left') }}</mk-radio>
+			<mk-radio v-model="deckColumnAlign" value="left" v-t="'left'"></mk-radio>
-			<mk-radio v-model="deckColumnAlign" value="center">{{ $t('center') }}</mk-radio>
+			<mk-radio v-model="deckColumnAlign" value="center" v-t="'center'"></mk-radio>
 		</div>
 	</section>
 
 	<section class="_card">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('appearance') }}</div>
 		<div class="_content">
-			<mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch>
+			<mk-switch v-model="disableAnimatedMfm" v-t="'disableAnimatedMfm'"></mk-switch>
-			<mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
+			<mk-switch v-model="reduceAnimation" v-t="'reduceUiAnimation'"></mk-switch>
-			<mk-switch v-model="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</mk-switch>
+			<mk-switch v-model="useBlurEffectForModal" v-t="'useBlurEffectForModal'"></mk-switch>
 			<mk-switch v-model="useOsNativeEmojis">
 				{{ $t('useOsNativeEmojis') }}
 				<template #desc><mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
 			</mk-switch>
 		</div>
 		<div class="_content">
-			<div>{{ $t('fontSize') }}</div>
+			<div v-t="'fontSize'"></div>
 			<mk-radio v-model="fontSize" value="small"><span style="font-size: 14px;">Aa</span></mk-radio>
 			<mk-radio v-model="fontSize" :value="null"><span style="font-size: 16px;">Aa</span></mk-radio>
 			<mk-radio v-model="fontSize" value="large"><span style="font-size: 18px;">Aa</span></mk-radio>
@@ -95,11 +95,11 @@
 			</mk-switch>
 		</div>
 		<div class="_content">
-			<mk-switch v-model="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
+			<mk-switch v-model="imageNewTab" v-t="'openImageInNewTab'"></mk-switch>
-			<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>
+			<mk-switch v-model="showFixedPostForm" v-t="'showFixedPostForm'"></mk-switch>
-			<mk-switch v-model="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</mk-switch>
+			<mk-switch v-model="enableInfiniteScroll" v-t="'enableInfiniteScroll'"></mk-switch>
-			<mk-switch v-model="fixedWidgetsPosition">{{ $t('fixedWidgetsPosition') }}</mk-switch>
+			<mk-switch v-model="fixedWidgetsPosition" v-t="'fixedWidgetsPosition'"></mk-switch>
-			<mk-switch v-model="disablePagesScript">{{ $t('disablePagesScript') }}</mk-switch>
+			<mk-switch v-model="disablePagesScript" v-t="'disablePagesScript'"></mk-switch>
 		</div>
 		<div class="_content">
 			<mk-select v-model="lang">
@@ -110,7 +110,7 @@
 		</div>
 	</section>
 
-	<mk-button @click="cacheClear()" primary style="margin: var(--margin) auto;">{{ $t('cacheClear') }}</mk-button>
+	<mk-button @click="cacheClear()" primary style="margin: var(--margin) auto;" v-t="'cacheClear'"></mk-button>
 </div>
 </template>
 

src/client/pages/preferences/plugins.vue

@@ -6,7 +6,7 @@
 			<summary><fa :icon="faDownload"/> {{ $t('install') }}</summary>
 			<mk-info warn>{{ $t('pluginInstallWarn') }}</mk-info>
 			<mk-textarea v-model="script" tall>
-				<span>{{ $t('script') }}</span>
+				<span v-t="'script'"></span>
 			</mk-textarea>
 			<mk-button @click="install()" primary><fa :icon="faSave"/> {{ $t('install') }}</mk-button>
 		</details>

src/client/pages/preferences/sidebar.vue

@@ -3,8 +3,8 @@
 	<div class="_title"><fa :icon="faListUl"/> {{ $t('sidebar') }}</div>
 	<div class="_content">
 		<mk-textarea v-model="items" tall>
-			<span>{{ $t('sidebar') }}</span>
+			<span v-t="'sidebar'"></span>
-			<template #desc><button class="_textButton" @click="addItem">{{ $t('addItem') }}</button></template>
+			<template #desc><button class="_textButton" @click="addItem" v-t="'addItem'"></button></template>
 		</mk-textarea>
 	</div>
 	<div class="_footer">

src/client/pages/preferences/theme.vue

@@ -6,8 +6,8 @@
 			<div class="toggleWrapper">
 				<input type="checkbox" class="dn" id="dn" v-model="darkMode" :disabled="syncDeviceDarkMode"/>
 				<label for="dn" class="toggle">
-					<span class="before">{{ $t('light') }}</span>
+					<span class="before" v-t="'light'"></span>
-					<span class="after">{{ $t('dark') }}</span>
+					<span class="after" v-t="'dark'"></span>
 					<span class="toggle__handler">
 						<span class="crater crater--1"></span>
 						<span class="crater crater--2"></span>
@@ -22,7 +22,7 @@
 				</label>
 			</div>
 		</div>
-		<mk-switch v-model="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</mk-switch>
+		<mk-switch v-model="syncDeviceDarkMode" v-t="'syncDeviceDarkMode'"></mk-switch>
 	</div>
 	<div class="_content">
 		<mk-select v-model="lightTheme">
@@ -43,17 +43,17 @@
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</mk-select>
-		<a href="https://assets.msky.cafe/theme/list" rel="noopener" target="_blank" class="_link">{{ $t('_theme.explore') }}</a>・<router-link to="/theme-editor" class="_link">{{ $t('_theme.make') }}</router-link>
+		<a href="https://assets.msky.cafe/theme/list" rel="noopener" target="_blank" class="_link" v-t="'_theme.explore'"></a>・<router-link to="/theme-editor" class="_link" v-t="'_theme.make'"></router-link>
 	</div>
 	<div class="_content">
-		<mk-button primary v-if="wallpaper == null" @click="setWallpaper">{{ $t('setWallpaper') }}</mk-button>
+		<mk-button primary v-if="wallpaper == null" @click="setWallpaper" v-t="'setWallpaper'"></mk-button>
-		<mk-button primary v-else @click="wallpaper = null">{{ $t('removeWallpaper') }}</mk-button>
+		<mk-button primary v-else @click="wallpaper = null" v-t="'removeWallpaper'"></mk-button>
 	</div>
 	<div class="_content">
 		<details>
 			<summary><fa :icon="faDownload"/> {{ $t('_theme.install') }}</summary>
 			<mk-textarea v-model="installThemeCode">
-				<span>{{ $t('_theme.code') }}</span>
+				<span v-t="'_theme.code'"></span>
 			</mk-textarea>
 			<mk-button @click="() => install(this.installThemeCode)" :disabled="installThemeCode == null" primary inline><fa :icon="faCheck"/> {{ $t('install') }}</mk-button>
 			<mk-button @click="() => preview(this.installThemeCode)" :disabled="installThemeCode == null" inline><fa :icon="faEye"/> {{ $t('preview') }}</mk-button>
@@ -67,7 +67,7 @@
 			</mk-select>
 			<template v-if="selectedTheme">
 				<mk-textarea readonly tall :value="selectedThemeCode">
-					<span>{{ $t('_theme.code') }}</span>
+					<span v-t="'_theme.code'"></span>
 				</mk-textarea>
 				<mk-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</mk-button>
 			</template>

src/client/pages/room/room.vue

@@ -16,7 +16,7 @@
 				<div v-for="k in Object.keys(selectedFurnitureInfo.props)" :key="k">
 					<p>{{ k }}</p>
 					<template v-if="selectedFurnitureInfo.props[k] === 'image'">
-						<mk-button @click="chooseImage(k, $event)">{{ $t('_rooms.chooseImage') }}</mk-button>
+						<mk-button @click="chooseImage(k, $event)" v-t="'_rooms.chooseImage'"></mk-button>
 					</template>
 					<template v-else-if="selectedFurnitureInfo.props[k] === 'color'">
 						<input type="color" :value="selectedFurnitureProps ? selectedFurnitureProps[k] : null" @change="updateColor(k, $event)"/>
@@ -41,11 +41,11 @@
 		<div class="_content">
 			<mk-select :value="roomType" @input="updateRoomType($event)">
 				<template #label>{{ $t('_rooms.roomType') }}</template>
-				<option value="default">{{ $t('_rooms._roomType.default') }}</option>
+				<option value="default" v-t="'_rooms._roomType.default'"></option>
-				<option value="washitsu">{{ $t('_rooms._roomType.washitsu') }}</option>
+				<option value="washitsu" v-t="'_rooms._roomType.washitsu'"></option>
 			</mk-select>
 			<label v-if="roomType === 'default'">
-				<span>{{ $t('_rooms.carpetColor') }}</span>
+				<span v-t="'_rooms.carpetColor'"></span>
 				<input type="color" :value="carpetColor" @change="updateCarpetColor($event)"/>
 			</label>
 		</div>