diff --git a/src/web/app/desktop/-tags/settings.tag b/src/web/app/desktop/-tags/settings.tag
index 4bf210cef4..f4e2910d88 100644
--- a/src/web/app/desktop/-tags/settings.tag
+++ b/src/web/app/desktop/-tags/settings.tag
@@ -1,132 +1,3 @@
-<mk-settings>
-	<div class="nav">
-		<p :class="{ active: page == 'profile' }" onmousedown={ setPage.bind(null, 'profile') }>%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p>
-		<p :class="{ active: page == 'web' }" onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
-		<p :class="{ active: page == 'notification' }" onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
-		<p :class="{ active: page == 'drive' }" onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p>
-		<p :class="{ active: page == 'mute' }" onmousedown={ setPage.bind(null, 'mute') }>%fa:ban .fw%%i18n:desktop.tags.mk-settings.mute%</p>
-		<p :class="{ active: page == 'apps' }" onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
-		<p :class="{ active: page == 'twitter' }" onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
-		<p :class="{ active: page == 'security' }" onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
-		<p :class="{ active: page == 'api' }" onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
-		<p :class="{ active: page == 'other' }" onmousedown={ setPage.bind(null, 'other') }>%fa:cogs .fw%%i18n:desktop.tags.mk-settings.other%</p>
-	</div>
-	<div class="pages">
-		<section class="profile" show={ page == 'profile' }>
-			<h1>%i18n:desktop.tags.mk-settings.profile%</h1>
-			<mk-profile-setting/>
-		</section>
-
-		<section class="web" show={ page == 'web' }>
-			<h1>デザイン</h1>
-			<a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a>
-		</section>
-
-		<section class="drive" show={ page == 'drive' }>
-			<h1>%i18n:desktop.tags.mk-settings.drive%</h1>
-			<mk-drive-setting/>
-		</section>
-
-		<section class="mute" show={ page == 'mute' }>
-			<h1>%i18n:desktop.tags.mk-settings.mute%</h1>
-			<mk-mute-setting/>
-		</section>
-
-		<section class="apps" show={ page == 'apps' }>
-			<h1>アプリケーション</h1>
-			<mk-authorized-apps/>
-		</section>
-
-		<section class="twitter" show={ page == 'twitter' }>
-			<h1>Twitter</h1>
-			<mk-twitter-setting/>
-		</section>
-
-		<section class="password" show={ page == 'security' }>
-			<h1>%i18n:desktop.tags.mk-settings.password%</h1>
-			<mk-password-setting/>
-		</section>
-
-		<section class="2fa" show={ page == 'security' }>
-			<h1>%i18n:desktop.tags.mk-settings.2fa%</h1>
-			<mk-2fa-setting/>
-		</section>
-
-		<section class="signin" show={ page == 'security' }>
-			<h1>サインイン履歴</h1>
-			<mk-signin-history/>
-		</section>
-
-		<section class="api" show={ page == 'api' }>
-			<h1>API</h1>
-			<mk-api-info/>
-		</section>
-
-		<section class="other" show={ page == 'other' }>
-			<h1>%i18n:desktop.tags.mk-settings.license%</h1>
-			%license%
-		</section>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display flex
-			width 100%
-			height 100%
-
-			> .nav
-				flex 0 0 200px
-				width 100%
-				height 100%
-				padding 16px 0 0 0
-				overflow auto
-				border-right solid 1px #ddd
-
-				> p
-					display block
-					padding 10px 16px
-					margin 0
-					color #666
-					cursor pointer
-					user-select none
-					transition margin-left 0.2s ease
-
-					> [data-fa]
-						margin-right 4px
-
-					&:hover
-						color #555
-
-					&.active
-						margin-left 8px
-						color $theme-color !important
-
-			> .pages
-				width 100%
-				height 100%
-				flex auto
-				overflow auto
-
-				> section
-					margin 32px
-					color #4a535a
-
-					> h1
-						display block
-						margin 0 0 1em 0
-						padding 0 0 8px 0
-						font-size 1em
-						color #555
-						border-bottom solid 1px #eee
-
-	</style>
-	<script lang="typescript">
-		this.page = 'profile';
-
-		this.setPage = page => {
-			this.page = page;
-		};
-	</script>
-</mk-settings>
 
 <mk-profile-setting>
 	<label class="avatar ui from group">
diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue
new file mode 100644
index 0000000000..fe996689a0
--- /dev/null
+++ b/src/web/app/desktop/views/components/settings.vue
@@ -0,0 +1,136 @@
+<template>
+<div class="mk-settings">
+	<div class="nav">
+		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'">%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p>
+		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
+		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%通知</p>
+		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:desktop.tags.mk-settings.drive%</p>
+		<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:desktop.tags.mk-settings.mute%</p>
+		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%アプリ</p>
+		<p :class="{ active: page == 'twitter' }" @mousedown="page = 'twitter'">%fa:B twitter .fw%Twitter</p>
+		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'">%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
+		<p :class="{ active: page == 'api' }" @mousedown="page = 'api'">%fa:key .fw%API</p>
+		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'">%fa:cogs .fw%%i18n:desktop.tags.mk-settings.other%</p>
+	</div>
+	<div class="pages">
+		<section class="profile" v-show="page == 'profile'">
+			<h1>%i18n:desktop.tags.mk-settings.profile%</h1>
+			<mk-profile-setting/>
+		</section>
+
+		<section class="web" v-show="page == 'web'">
+			<h1>デザイン</h1>
+			<a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a>
+		</section>
+
+		<section class="drive" v-show="page == 'drive'">
+			<h1>%i18n:desktop.tags.mk-settings.drive%</h1>
+			<mk-drive-setting/>
+		</section>
+
+		<section class="mute" v-show="page == 'mute'">
+			<h1>%i18n:desktop.tags.mk-settings.mute%</h1>
+			<mk-mute-setting/>
+		</section>
+
+		<section class="apps" v-show="page == 'apps'">
+			<h1>アプリケーション</h1>
+			<mk-authorized-apps/>
+		</section>
+
+		<section class="twitter" v-show="page == 'twitter'">
+			<h1>Twitter</h1>
+			<mk-twitter-setting/>
+		</section>
+
+		<section class="password" v-show="page == 'security'">
+			<h1>%i18n:desktop.tags.mk-settings.password%</h1>
+			<mk-password-setting/>
+		</section>
+
+		<section class="2fa" v-show="page == 'security'">
+			<h1>%i18n:desktop.tags.mk-settings.2fa%</h1>
+			<mk-2fa-setting/>
+		</section>
+
+		<section class="signin" v-show="page == 'security'">
+			<h1>サインイン履歴</h1>
+			<mk-signin-history/>
+		</section>
+
+		<section class="api" v-show="page == 'api'">
+			<h1>API</h1>
+			<mk-api-info/>
+		</section>
+
+		<section class="other" v-show="page == 'other'">
+			<h1>%i18n:desktop.tags.mk-settings.license%</h1>
+			%license%
+		</section>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			page: 'profile'
+		};
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-settings
+	display flex
+	width 100%
+	height 100%
+
+	> .nav
+		flex 0 0 200px
+		width 100%
+		height 100%
+		padding 16px 0 0 0
+		overflow auto
+		border-right solid 1px #ddd
+
+		> p
+			display block
+			padding 10px 16px
+			margin 0
+			color #666
+			cursor pointer
+			user-select none
+			transition margin-left 0.2s ease
+
+			> [data-fa]
+				margin-right 4px
+
+			&:hover
+				color #555
+
+			&.active
+				margin-left 8px
+				color $theme-color !important
+
+	> .pages
+		width 100%
+		height 100%
+		flex auto
+		overflow auto
+
+		> section
+			margin 32px
+			color #4a535a
+
+			> h1
+				display block
+				margin 0 0 1em 0
+				padding 0 0 8px 0
+				font-size 1em
+				color #555
+				border-bottom solid 1px #eee
+
+</style>