diff --git a/dashboard/src/components/LogsViewer.vue b/dashboard/src/components/LogsViewer.vue
index 00916bb78..9b5a9b421 100644
--- a/dashboard/src/components/LogsViewer.vue
+++ b/dashboard/src/components/LogsViewer.vue
@@ -1,153 +1,144 @@
-<script>
+<script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, useTemplateRef, onUnmounted, onMounted } from 'vue';
 import { Button, InputDialog, TopBar, MainLayout, ButtonGroup } from '@cloudron/pankow';
 import LogsModel from '../models/LogsModel.js';
 import AppsModel from '../models/AppsModel.js';
 
-export default {
-  name: 'LogsViewer',
-  components: {
-    Button,
-    ButtonGroup,
-    InputDialog,
-    MainLayout,
-    TopBar
-  },
-  data() {
-    return {
-      accessToken: localStorage.token,
-      logsModel: null,
-      appsModel: null,
-      busyRestart: false,
-      showRestart: false,
-      showFilemanager: false,
-      showTerminal: false,
-      id: '',
-      name: '',
-      type: '',
-      downloadUrl: '',
-      logLines: []
-    };
-  },
-  methods: {
-    onClear() {
-      while (this.$refs.linesContainer.firstChild) this.$refs.linesContainer.removeChild(this.$refs.linesContainer.firstChild);
-    },
-    onDownload() {
-      this.logsModel.download();
-    },
-    async onRestartApp() {
-      if (this.type !== 'app') return;
+const linesContainer = useTemplateRef('linesContainer');
+const inputDialog = useTemplateRef('inputDialog');
 
-      const confirmed = await this.$refs.inputDialog.confirm({
-        message: this.$t('filemanager.toolbar.restartApp') + '?',
-        confirmLabel: this.$t('main.action.restart'),
-        confirmStyle: 'danger',
-        rejectLabel: this.$t('main.dialog.cancel'),
-        rejectStyle: 'secondary',
-      });
+let logsModel = null;
+const appsModel = AppsModel.create();
+let refreshInterval = 0;
 
-      if (!confirmed) return;
+const busyRestart = ref(false);
+const showRestart = ref(false);
+const showFilemanager = ref(false);
+const showTerminal = ref(false);
+const id = ref('');
+const name = ref('');
+const type = ref('');
+const downloadUrl = ref('');
 
-      this.busyRestart = true;
+function onClear() {
+  while (linesContainer.value.firstChild) linesContainer.value.removeChild(linesContainer.value.firstChild);
+}
 
-      const [error] = await this.appsModel.restart(this.id);
-      if (error) return console.error(error);
+async function onRestartApp() {
+  if (type.value !== 'app') return;
 
-      this.busyRestart = false;
-    }
-  },
-  async mounted() {
-    if (!localStorage.token) {
-      console.error('Set localStorage.token');
-      return;
-    }
+  const confirmed = await inputDialog.value.confirm({
+    message: t('filemanager.toolbar.restartApp') + '?',
+    confirmLabel: t('main.action.restart'),
+    confirmStyle: 'danger',
+    rejectLabel: t('main.dialog.cancel'),
+    rejectStyle: 'secondary',
+  });
 
-    const urlParams = new URLSearchParams(window.location.search);
-    const appId = urlParams.get('appId');
-    const taskId = urlParams.get('taskId');
-    const crashId = urlParams.get('crashId');
-    const id = urlParams.get('id');
+  if (!confirmed) return;
 
-    if (appId) {
-      this.type = 'app';
-      this.id = appId;
-      this.name = 'App ' + appId;
-    } else if (taskId) {
-      this.type = 'task';
-      this.id = taskId;
-      this.name = 'Task ' + taskId;
-    } else if (crashId) {
-      this.type = 'crash';
-      this.id = crashId;
-      this.name = 'Crash ' + crashId;
-    } else if (id) {
-      if (id === 'box') {
-        this.type = 'platform';
-        this.id = id;
-        this.name = 'Box';
-      } else {
-        this.type = 'service';
-        this.id = id;
-        this.name = 'Service ' + id;
-      }
-    } else {
-      console.error('no supported log type specified');
-      return;
-    }
+  busyRestart.value = true;
 
-    this.logsModel = LogsModel.create(this.type, this.id);
+  const [error] = await appsModel.restart(id.value);
+  if (error) return console.error(error);
 
-    if (this.type === 'app') {
-      this.appsModel = AppsModel.create();
+  busyRestart.value = false;
+}
 
-      const [error, app] = await this.appsModel.get(this.id);
-      if (error) return console.error(error);
-
-      this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
-      this.showFilemanager = !!app.manifest.addons.localstorage;
-      this.showTerminal = app.manifest.id !== 'io.cloudron.builtin.appproxy';
-      this.showRestart = app.manifest.id !== 'io.cloudron.builtin.appproxy';
-    }
-
-    window.document.title = `Logs Viewer - ${this.name}`;
-
-    this.downloadUrl = this.logsModel.getDownloadUrl();
-
-    const maxLines = 1000;
-    let lines = 0;
-    let newLogLines = [];
-
-    const tmp = document.getElementsByClassName('pankow-main-layout-body')[0];
-    this.refreshInterval = setInterval(() => {
-      newLogLines = newLogLines.slice(-maxLines);
-
-      for (const line of newLogLines) {
-        if (lines < maxLines) ++lines;
-        else if (this.$refs.linesContainer.firstChild) this.$refs.linesContainer.removeChild(this.$refs.linesContainer.firstChild);
-
-        const logLine = document.createElement('div');
-        logLine.className = 'log-line';
-        logLine.innerHTML = `<span class="time">${line.time || '[no timestamp]&nbsp;' }</span> <span>${line.html}</span>`;
-        this.$refs.linesContainer.appendChild(logLine);
-
-        const autoScroll = tmp.scrollTop > (tmp.scrollHeight - tmp.clientHeight - 34);
-        if (autoScroll) setTimeout(() => tmp.scrollTop = tmp.scrollHeight, 1);
-      }
-
-      newLogLines = [];
-    }, 500);
-
-    this.logsModel.stream((time, html) => {
-      newLogLines.push({ time, html });
-    }, function (error) {
-      newLogLines.push({ time: error.time, html: error.html });
-    });
-  },
-  unmounted() {
-    clearInterval(this.refreshInterval);
+onMounted(async () => {
+  if (!localStorage.token) {
+    console.error('Set localStorage.token');
+    return;
   }
-};
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const appId = urlParams.get('appId');
+  const taskId = urlParams.get('taskId');
+  const crashId = urlParams.get('crashId');
+  const idParam = urlParams.get('id');
+
+  if (appId) {
+    type.value = 'app';
+    id.value = appId;
+    name.value = 'App ' + appId;
+  } else if (taskId) {
+    type.value = 'task';
+    id.value = taskId;
+    name.value = 'Task ' + taskId;
+  } else if (crashId) {
+    type.value = 'crash';
+    id.value = crashId;
+    name.value = 'Crash ' + crashId;
+  } else if (idParam) {
+    if (idParam === 'box') {
+      type.value = 'platform';
+      id.value = idParam;
+      name.value = 'Box';
+    } else {
+      type.value = 'service';
+      id.value = idParam;
+      name.value = 'Service ' + idParam;
+    }
+  } else {
+    console.error('no supported log type specified');
+    return;
+  }
+
+  logsModel = LogsModel.create(type.value, id.value);
+
+  if (type.value === 'app') {
+    const [error, app] = await appsModel.get(id.value);
+    if (error) return console.error(error);
+
+    name.value = `${app.label || app.fqdn} (${app.manifest.title})`;
+    showFilemanager.value = !!app.manifest.addons.localstorage;
+    showTerminal.value = app.manifest.id !== 'io.cloudron.builtin.appproxy';
+    showRestart.value = app.manifest.id !== 'io.cloudron.builtin.appproxy';
+  }
+
+  window.document.title = `Logs Viewer - ${name.value}`;
+
+  downloadUrl.value = logsModel.getDownloadUrl();
+
+  const maxLines = 1000;
+  let lines = 0;
+  let newLogLines = [];
+
+  const tmp = document.getElementsByClassName('pankow-main-layout-body')[0];
+  refreshInterval = setInterval(() => {
+    newLogLines = newLogLines.slice(-maxLines);
+
+    for (const line of newLogLines) {
+      if (lines < maxLines) ++lines;
+      else if (linesContainer.value.firstChild) linesContainer.value.removeChild(linesContainer.value.firstChild);
+
+      const logLine = document.createElement('div');
+      logLine.className = 'log-line';
+      logLine.innerHTML = `<span class="time">${line.time || '[no timestamp]&nbsp;' }</span> <span>${line.html}</span>`;
+      linesContainer.value.appendChild(logLine);
+
+      const autoScroll = tmp.scrollTop > (tmp.scrollHeight - tmp.clientHeight - 34);
+      if (autoScroll) setTimeout(() => tmp.scrollTop = tmp.scrollHeight, 1);
+    }
+
+    newLogLines = [];
+  }, 500);
+
+  logsModel.stream((time, html) => {
+    newLogLines.push({ time, html });
+  }, function (error) {
+    newLogLines.push({ time: error.time, html: error.html });
+  });
+});
+
+onUnmounted(() => {
+  clearInterval(refreshInterval);
+});
 
 </script>