refactor: refactor for <script setup>

src/client/app/components/Debug.vue

@@ -8,24 +8,15 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+<script setup lang="ts">
+import { ref, watch } from 'vue'
 
-export default defineComponent({
-  setup() {
-    const el = ref<HTMLElement | null>(null)
-    const open = ref(false)
+const el = ref<HTMLElement | null>(null)
+const open = ref(false)
 
-    watch(open, (value) => {
-      if (value === false) {
-        el.value!.scrollTop = 0
-      }
-    })
-
-    return {
-      el,
-      open
-    }
+watch(open, (value) => {
+  if (value === false) {
+    el.value!.scrollTop = 0
   }
 })
 </script>

src/client/theme-default/components/LastUpdated.vue

@@ -5,39 +5,29 @@
   </p>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, computed, onMounted } from 'vue'
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
 import { useSiteDataByRoute, usePageData } from 'vitepress'
 
-export default defineComponent({
-  setup() {
-    const site = useSiteDataByRoute()
-    const page = usePageData()
+const site = useSiteDataByRoute()
+const page = usePageData()
 
-    const datetime = ref('')
+const datetime = ref('')
 
-    const hasLastUpdated = computed(() => {
-      const lu = site.value.themeConfig.lastUpdated
+const hasLastUpdated = computed(() => {
+  const lu = site.value.themeConfig.lastUpdated
 
-      return lu !== undefined && lu !== false
-    })
-
-    const prefix = computed(() => {
-      const p = site.value.themeConfig.lastUpdated
+  return lu !== undefined && lu !== false
+})
 
-      return p === true ? 'Last Updated' : p
-    })
+const prefix = computed(() => {
+  const p = site.value.themeConfig.lastUpdated
 
-    onMounted(() => {
-      datetime.value = new Date(page.value.lastUpdated).toLocaleString('en-US')
-    })
+  return p === true ? 'Last Updated' : p
+})
 
-    return {
-      hasLastUpdated,
-      prefix,
-      datetime
-    }
-  }
+onMounted(() => {
+  datetime.value = new Date(page.value.lastUpdated).toLocaleString('en-US')
 })
 </script>
 

src/client/theme-default/components/PageFooter.vue

@@ -9,17 +9,9 @@
   </footer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import EditLink from './EditLink.vue'
 import LastUpdated from './LastUpdated.vue'
-
-export default defineComponent({
-  components: {
-    EditLink,
-    LastUpdated
-  }
-})
 </script>
 
 <style scoped>