refactor: move script over template

src/components/Footer.vue

@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { isDark } from '/~/logics'
+
+const { t, availableLocales, locale } = useI18n()
+
+const toggleLocales = () => {
+  // change to some real logic
+  const locales = availableLocales
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+}
+</script>
+
 <template>
   <nav class="text-xl mt-6">
     <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
@@ -22,18 +35,3 @@
     </a>
   </nav>
 </template>
-
-<script setup lang='ts'>
-import { useI18n } from 'vue-i18n'
-import { isDark } from '/~/logics'
-
-const i18n = useI18n()
-
-const toggleLocales = () => {
-  // change to some real logic
-  const locales = i18n.availableLocales
-  i18n.locale.value = locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]
-}
-
-const t = i18n.t
-</script>

src/pages/[...all].vue

@@ -1,11 +1,11 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <div>
     {{ t('not-found') }}
   </div>
 </template>
-
-<script setup lang='ts'>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-</script>

src/pages/hi/[name].vue

@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    require: true,
+  },
+})
+
+const router = useRouter()
+const { t } = useI18n()
+</script>
 
 <template>
   <div>
@@ -5,7 +20,7 @@
       <carbon-pedestrian class="inline-block" />
     </p>
     <p>
-      {{ t('intro.hi', {name}) }}
+      {{ t('intro.hi', { name: props.name }) }}
     </p>
     <p class="text-sm opacity-50">
       <em>{{ t('intro.dynamic-route') }}</em>
@@ -21,19 +36,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang='ts'>
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { defineProps } from 'vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    require: true,
-  },
-})
-
-const router = useRouter()
-const { t } = useI18n()
-</script>

src/pages/index.vue

@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const name = ref('')
+
+const router = useRouter()
+const go = () => {
+  if (name.value)
+    router.push(`/hi/${name.value}`)
+}
+
+const { t } = useI18n()
+</script>
+
 <template>
   <div>
     <p class="text-4xl">
@@ -37,19 +53,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang='ts'>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-const name = ref('')
-
-const router = useRouter()
-const go = () => {
-  if (name.value)
-    router.push(`/hi/${name.value}`)
-}
-
-const { t } = useI18n()
-</script>