diff --git a/src/web/app/desktop/-tags/settings.tag b/src/web/app/desktop/-tags/settings.tag
index a9c94181f4..2b2491b46a 100644
--- a/src/web/app/desktop/-tags/settings.tag
+++ b/src/web/app/desktop/-tags/settings.tag
@@ -1,38 +1,4 @@
 
-<mk-api-info>
-	<p>Token: <code>{ I.token }</code></p>
-	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
-	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
-	<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
-	<button class="ui" @click="regenerateToken">%i18n:desktop.tags.mk-api-info.regenerate-token%</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #4a535a
-
-			code
-				display inline-block
-				padding 4px 6px
-				color #555
-				background #eee
-				border-radius 2px
-	</style>
-	<script lang="typescript">
-		import passwordDialog from '../scripts/password-dialog';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.regenerateToken = () => {
-			passwordDialog('%i18n:desktop.tags.mk-api-info.enter-password%', password => {
-				this.api('i/regenerate_token', {
-					password: password
-				});
-			});
-		};
-	</script>
-</mk-api-info>
-
 <mk-password-setting>
 	<button @click="reset" class="ui primary">%i18n:desktop.tags.mk-password-setting.reset%</button>
 	<style lang="stylus" scoped>
diff --git a/src/web/app/desktop/views/components/api-setting.vue b/src/web/app/desktop/views/components/api-setting.vue
new file mode 100644
index 0000000000..78429064b9
--- /dev/null
+++ b/src/web/app/desktop/views/components/api-setting.vue
@@ -0,0 +1,38 @@
+<template>
+<div class="mk-api-setting">
+	<p>Token: <code>{{ $root.$data.os.i.token }}</code></p>
+	<p>%i18n:desktop.tags.mk-api-info.intro%</p>
+	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:desktop.tags.mk-api-info.caution%</p></div>
+	<p>%i18n:desktop.tags.mk-api-info.regeneration-of-token%</p>
+	<button class="ui" @click="regenerateToken">%i18n:desktop.tags.mk-api-info.regenerate-token%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import passwordDialog from '../../scripts/password-dialog';
+
+export default Vue.extend({
+	methods: {
+		regenerateToken() {
+			passwordDialog('%i18n:desktop.tags.mk-api-info.enter-password%', password => {
+				this.$root.$data.os.api('i/regenerate_token', {
+					password: password
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-api-setting
+	color #4a535a
+
+	code
+		display inline-block
+		padding 4px 6px
+		color #555
+		background #eee
+		border-radius 2px
+</style>