diff --git a/src/web/app/desktop/-tags/messaging/room-window.tag b/src/web/app/desktop/-tags/messaging/room-window.tag
deleted file mode 100644
index ca1187364..000000000
--- a/src/web/app/desktop/-tags/messaging/room-window.tag
+++ /dev/null
@@ -1,32 +0,0 @@
-<mk-messaging-room-window>
-	<mk-window ref="window" is-modal={ false } width={ '500px' } height={ '560px' } popout={ popout }>
-		<yield to="header">%fa:comments%メッセージ: { parent.user.name }</yield>
-		<yield to="content">
-			<mk-messaging-room user={ parent.user }/>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			> mk-window
-				[data-yield='header']
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-					> mk-messaging-room
-						height 100%
-						overflow auto
-
-	</style>
-	<script lang="typescript">
-		this.user = this.opts.user;
-
-		this.popout = `${_URL_}/i/messaging/${this.user.username}`;
-
-		this.on('mount', () => {
-			this.$refs.window.on('closed', () => {
-				this.$destroy();
-			});
-		});
-	</script>
-</mk-messaging-room-window>
diff --git a/src/web/app/desktop/views/components/messaging-room-window.vue b/src/web/app/desktop/views/components/messaging-room-window.vue
new file mode 100644
index 000000000..f93990d89
--- /dev/null
+++ b/src/web/app/desktop/views/components/messaging-room-window.vue
@@ -0,0 +1,31 @@
+<template>
+<mk-window ref="window" width="500px" height="560px" :popout="popout" @closed="$destroy">
+	<span slot="header" :class="$style.header">%fa:comments%メッセージ: {{ user.name }}</span>
+	<mk-messaging-room :user="user" :class="$style.content"/>
+</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { url } from '../../../config';
+
+export default Vue.extend({
+	props: ['user'],
+	computed: {
+		popout(): string {
+			return `${url}/i/messaging/${this.user.username}`;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+.content
+	height 100%
+	overflow auto
+
+</style>