refacto: migrate to composition API everywhere

src/components/FooterTranslation.vue

@@ -1,3 +1,16 @@
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n"
+
+import { locales } from "@/locales/message"
+
+const { t } = useI18n()
+const i18n = useI18n()
+
+const toggleLanguage = () =>
+  (i18n.locale.value =
+    locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length])
+</script>
+
 <template>
   <footer class="footer-translation">
     <button class="button" @click="toggleLanguage">
@@ -5,26 +18,3 @@
     </button>
   </footer>
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-import { useI18n } from "vue-i18n"
-
-import { locales } from "@/locales/message"
-
-export default defineComponent({
-  name: "FooterTranslation",
-  setup() {
-    const { t } = useI18n()
-
-    const i18n = useI18n()
-
-    return {
-      t,
-      toggleLanguage: () =>
-        (i18n.locale.value =
-          locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]),
-    }
-  },
-})
-</script>

src/components/GoBack.vue

@@ -1,3 +1,14 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+const { push } = useRouter()
+
+const back = () =>
+  push({
+    name: 'Home'
+  })
+</script>
+
 <template>
   <button class="button is-white go-back" @click="back">
     <svg
@@ -20,25 +31,6 @@
   </button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useRouter } from 'vue-router'
-
-export default defineComponent({
-  name: 'GoBack',
-  setup() {
-    const { push } = useRouter()
-
-    return {
-      back: () =>
-        push({
-          name: 'Home'
-        })
-    }
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 .go-back {
   margin: 10px 0;

src/components/LoginGithub.vue

@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+const url = new URL('https://github.com/login/oauth/authorize')
+url.searchParams.append('client_id', 'Iv1.87be14adcc912fa0')
+url.searchParams.append('redirect_uri', location.href)
+url.searchParams.append('scope', 'repo')
+</script>
+
 <template>
   <div class="login-github">
     <br />
@@ -28,21 +35,3 @@
     </a>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'LoginGithub',
-  setup() {
-    const url = new URL('https://github.com/login/oauth/authorize')
-    url.searchParams.append('client_id', 'Iv1.87be14adcc912fa0')
-    url.searchParams.append('redirect_uri', location.href)
-    url.searchParams.append('scope', 'repo')
-
-    return {
-      url
-    }
-  }
-})
-</script>