src/views/migrator/Migrate.vue

@@ -20,24 +20,23 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import {defineComponent} from 'vue'
+import {computed} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useStore} from 'vuex'
 
 import {MIGRATORS} from './migrators'
+import {useTitle} from '@/composables/useTitle'
 
-export default defineComponent({
+const {t} = useI18n()
-	name: 'Migrate',
+const store = useStore()
-	mounted() {
+
-		this.setTitle(this.$t('migrate.title'))
+useTitle(() => t('migrate.title'))
-	},
+
-	computed: {
+const availableMigrators = computed(() => store.state.config.availableMigrators
-		availableMigrators() {
+	.map((id) => MIGRATORS[id])
-			return this.$store.state.config.availableMigrators
+	.filter((item) => Boolean(item)),
-				.map((id) => MIGRATORS[id])
+)
-				.filter((item) => Boolean(item))
-		},
-	},
-})
 </script>
 
 <style lang="scss" scoped>
@@ -50,7 +49,6 @@ export default defineComponent({
     width: 100px;
     text-transform: capitalize;
     margin-right: 1rem;
-
 }
 
 .migration-service-image {