diff --git a/packages/vuepress-theme-reco/src/client/components/Link.vue b/packages/vuepress-theme-reco/src/client/components/Link.vue
index 2cbb5f31..b8ff0312 100644
--- a/packages/vuepress-theme-reco/src/client/components/Link.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Link.vue
@@ -3,7 +3,7 @@
     v-if="isRouterLink"
     class="link"
     :class="{ 'router-link-active': isActiveInSubpath }"
-    :to="item.link"
+    :to="item.link as string"
     :aria-label="linkAriaLabel"
     v-bind="$attrs"
     :key="`${item.link}-router`"
@@ -30,95 +30,84 @@
   </a>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useRoute } from 'vue-router'
-import { computed, defineComponent, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { isLinkHttp, isLinkWithProtocol } from 'vuepress/shared'
 import { useSiteLocaleData, useRouteLocale } from 'vuepress/client'
 
 import { useThemeLocaleData } from '@composables/index.js'
 
 import type { PropType } from 'vue'
-import type { NavLink } from '../../types'
+import type { NavLink, ResolvedSeriesItem } from '../../types'
 
-export default defineComponent({
-  name: 'Link',
 
-  inheritAttrs: false,
+const route = useRoute()
+const routeLocale = useRouteLocale()
+const siteLocal = useSiteLocaleData()
+const themeLocal = useThemeLocaleData()
 
-  props: {
-    item: {
-      type: Object as PropType<NavLink>,
-      required: true,
-    },
-  },
+interface LinkItem extends NavLink {
+  [key: string]: unknown
+}
 
-  setup(props) {
-    const route = useRoute()
-    const routeLocale = useRouteLocale()
-    const siteLocal = useSiteLocaleData()
-    const themeLocal = useThemeLocaleData()
+const props = defineProps({
+  item: {
+    type: Object as PropType<NavLink | ResolvedSeriesItem>,
+    required: true,
+  },
+})
+const { item } = toRefs(props)
 
-    const { item } = toRefs(props)
+// if the link has http protocol
+const hasHttpProtocol = computed(() => isLinkHttp(item.value.link as string))
+// if the link has non-http protocol
+const hasNonHttpProtocal = computed(
+  () => !hasHttpProtocol.value && isLinkWithProtocol(item.value.link as string)
+)
+// resolve the `target` attr
+const linkTarget = computed(() => {
+  if (hasNonHttpProtocal.value) return undefined
+  if (item.value.target) return item.value.target
+  if (hasHttpProtocol.value) return '_blank'
+  return undefined
+})
+// if the `target` attr is '_blank'
+const isBlankTarget = computed(() => linkTarget.value === '_blank')
+// is `<RouterLink>` or not
+const isRouterLink = computed(
+  () =>
+    !hasHttpProtocol.value &&
+    !hasNonHttpProtocal.value &&
+    !isBlankTarget.value
+)
 
-    // if the link has http protocol
-    const hasHttpProtocol = computed(() => isLinkHttp(item.value.link))
-    // if the link has non-http protocol
-    const hasNonHttpProtocal = computed(
-      () => !hasHttpProtocol.value && isLinkWithProtocol(item.value.link)
-    )
-    // resolve the `target` attr
-    const linkTarget = computed(() => {
-      if (hasNonHttpProtocal.value) return undefined
-      if (item.value.target) return item.value.target
-      if (hasHttpProtocol.value) return '_blank'
-      return undefined
-    })
-    // if the `target` attr is '_blank'
-    const isBlankTarget = computed(() => linkTarget.value === '_blank')
-    // is `<RouterLink>` or not
-    const isRouterLink = computed(
-      () =>
-        !hasHttpProtocol.value &&
-        !hasNonHttpProtocal.value &&
-        !isBlankTarget.value
-    )
-    // resolve the `rel` attr
-    const linkRel = computed(() => {
-      if (hasNonHttpProtocal.value) return undefined
-      if (item.value.rel) return item.value.rel
-      if (isBlankTarget.value) return 'noopener noreferrer'
-      return undefined
-    })
-    // resolve the `aria-label` attr
-    const linkAriaLabel = computed(
-      () => item.value.ariaLabel || item.value.text
-    )
+// resolve the `rel` attr
+const linkRel = computed(() => {
+  if (hasNonHttpProtocal.value) return undefined
+  if (item.value.rel) return item.value.rel
+  if (isBlankTarget.value) return 'noopener noreferrer'
+  return undefined
+})
+// resolve the `aria-label` attr
+const linkAriaLabel = computed(
+  () => item.value.ariaLabel || item.value.text
+)
 
-    // should be active when current route is a subpath of this link
-    const shouldBeActiveInSubpath = computed(() => {
-      const localeKeys = Object.keys(siteLocal.value.locales)
-      if (localeKeys.length) {
-        return !localeKeys.some((key) => key === item.value.link)
-      }
-      return item.value.link !== themeLocal.value.home || routeLocale.value
-    })
-    // if this link is active in subpath
-    const isActiveInSubpath = computed(() => {
-      if (!isRouterLink.value || !shouldBeActiveInSubpath.value) {
-        return false
-      }
-      return route.path.startsWith(item.value.link)
-    })
+// should be active when current route is a subpath of this link
+const shouldBeActiveInSubpath = computed(() => {
+  const localeKeys = Object.keys(siteLocal.value.locales)
+  if (localeKeys.length) {
+    return !localeKeys.some((key) => key === item.value.link)
+  }
+  return item.value.link !== themeLocal.value.home || routeLocale.value
+})
 
-    return {
-      isActiveInSubpath,
-      isBlankTarget,
-      isRouterLink,
-      linkRel,
-      linkTarget,
-      linkAriaLabel,
-    }
-  },
+// if this link is active in subpath
+const isActiveInSubpath = computed(() => {
+  if (!isRouterLink.value || !shouldBeActiveInSubpath.value) {
+    return false
+  }
+  return route.path.startsWith(item.value.link as string)
 })
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue b/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue
index 700ee576..f742eda3 100644
--- a/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue
+++ b/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue
@@ -12,10 +12,10 @@
   </nav>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { isString } from 'vuepress/shared'
-import { computed, defineComponent } from 'vue'
 import { convertToPinyin } from '@vuepress-reco/shared'
 import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
 import { getNavLink, useThemeLocaleData } from '@composables/index.js'
@@ -200,28 +200,14 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
   })
 }
 
-export default defineComponent({
-  name: 'NavbarLinks',
 
-  components: {
-    Link,
-    DropdownLink,
-  },
+const navbarConfig = useNavbarConfig()
+const navbarSelectLanguage = useNavbarSelectLanguage()
+const navbarRepo = useNavbarRepo()
 
-  setup() {
-    const navbarConfig = useNavbarConfig()
-    const navbarSelectLanguage = useNavbarSelectLanguage()
-    const navbarRepo = useNavbarRepo()
-
-    const navbarLinks: ComputedRef<Array<ResolvedNavbarItem>> = computed(() => [
-      ...navbarConfig.value,
-      ...navbarSelectLanguage.value,
-      ...navbarRepo.value,
-    ])
-
-    return {
-      navbarLinks,
-    }
-  },
-})
+const navbarLinks: ComputedRef<Array<ResolvedNavbarItem>> = computed(() => [
+  ...navbarConfig.value,
+  ...navbarSelectLanguage.value,
+  ...navbarRepo.value,
+])
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/PageInfo.vue b/packages/vuepress-theme-reco/src/client/components/PageInfo.vue
index a9a0a773..770c50fd 100644
--- a/packages/vuepress-theme-reco/src/client/components/PageInfo.vue
+++ b/packages/vuepress-theme-reco/src/client/components/PageInfo.vue
@@ -43,9 +43,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, toRefs } from 'vue'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import { useThemeLocaleData } from '@composables/index.js'
 import { convertToPinyin, removeEmptyString } from '@vuepress-reco/shared'
 import { useComment } from '@vuepress-reco/vuepress-plugin-comments/composables'
 
@@ -55,95 +55,77 @@ function formatCategory(category: string) {
   return convertToPinyin(removeEmptyString(category))
 }
 
-export default defineComponent({
-  name: 'PageInfo',
-
-  props: {
-    pageData: {
-      type: Object,
-      default: () => ({}),
-    },
-    currentCategory: {
-      type: String,
-      default: '',
-    },
-    currentTag: {
-      type: String,
-      default: '',
-    },
-    hideViews: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  pageData: {
+    type: Object,
+    default: () => ({}),
   },
+  currentCategory: {
+    type: String,
+    default: '',
+  },
+  currentTag: {
+    type: String,
+    default: '',
+  },
+  hideViews: {
+    type: Boolean,
+    default: false,
+  },
+})
+const { pageData, hideViews } = toRefs(props)
 
-  setup(props) {
-    const { pageData, hideViews } = toRefs(props)
-    const { solution, options } = useComment()
-    const themeData = useThemeLocaleData()
-
-    const author = computed(
-      () => pageData?.value?.frontmatter?.author || themeData.value.author || ''
-    )
-
-    const date = computed(() => {
-      const d = pageData?.value?.frontmatter?.date
-      return d ? formatISODate(d) : ''
-    })
-
-    const categories = computed(() => {
-      return (pageData?.value?.frontmatter?.categories || []).map(category => {
-        return {
-          label: category,
-          pathValue: formatCategory((category))
-        }
-      })
-    })
-
-    const tags = computed(() => {
-      return (pageData?.value?.frontmatter?.tags || []).map(category => {
-        return {
-          label: category,
-          pathValue: formatCategory((category))
-        }
-      })
-    })
-
-    const showPageInfo = computed(
-      () =>
-        !!author.value ||
-        !!date.value ||
-        !!(categories.value && categories.value.length > 0) ||
-        !!(tags.value && tags.value.length > 0)
-    )
-
-    const showValineViews = computed(() => {
-      return (
-        solution.value === 'valine' &&
-        options.value.visitor != false &&
-        !hideViews.value
-      )
-    })
-
-    const showWalineViews = computed(() => {
-      return (
-        solution.value === 'waline' &&
-        options.value.pageview != false &&
-        !hideViews.value
-      )
-    })
+const themeData = useThemeLocaleData()
+const { solution, options } = useComment()
 
+const author = computed(
+  () => pageData?.value?.frontmatter?.author || themeData.value.author || ''
+)
+
+const date = computed(() => {
+  const d = pageData?.value?.frontmatter?.date
+  return d ? formatISODate(d) : ''
+})
+
+const categories = computed(() => {
+  return (pageData?.value?.frontmatter?.categories || []).map(category => {
     return {
-      author,
-      date,
-      categories,
-      tags,
-      showPageInfo,
-      solution,
-      showValineViews,
-      showWalineViews,
-      convertToPinyin,
+      label: category,
+      pathValue: formatCategory((category))
     }
-  },
+  })
+})
+
+const tags = computed(() => {
+  return (pageData?.value?.frontmatter?.tags || []).map(category => {
+    return {
+      label: category,
+      pathValue: formatCategory((category))
+    }
+  })
+})
+
+const showPageInfo = computed(
+  () =>
+    !!author.value ||
+    !!date.value ||
+    !!(categories.value && categories.value.length > 0) ||
+    !!(tags.value && tags.value.length > 0)
+)
+
+const showValineViews = computed(() => {
+  return (
+    solution.value === 'valine' &&
+    options.value.visitor != false &&
+    !hideViews.value
+  )
+})
+
+const showWalineViews = computed(() => {
+  return (
+    solution.value === 'waline' &&
+    options.value.pageview != false &&
+    !hideViews.value
+  )
 })
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/PostItem.vue b/packages/vuepress-theme-reco/src/client/components/PostItem.vue
index 50f308a5..5dda763c 100644
--- a/packages/vuepress-theme-reco/src/client/components/PostItem.vue
+++ b/packages/vuepress-theme-reco/src/client/components/PostItem.vue
@@ -7,24 +7,18 @@
   </MagicCard>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { toRefs } from 'vue'
 import { useComment } from '@vuepress-reco/vuepress-plugin-comments/composables'
 import PageInfo from './PageInfo.vue'
 
-export default defineComponent({
-  components: { PageInfo },
-
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  setup() {
-    const { solution } = useComment()
-    return { solution }
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
 })
+const { data } = toRefs(props)
+
+const { solution } = useComment()
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/PostList.vue b/packages/vuepress-theme-reco/src/client/components/PostList.vue
index f9bc186d..c22d2059 100644
--- a/packages/vuepress-theme-reco/src/client/components/PostList.vue
+++ b/packages/vuepress-theme-reco/src/client/components/PostList.vue
@@ -1,25 +1,18 @@
 <template>
   <div class="post-list-container">
-    <PostItem v-for="(item, index) in data" :key="index" :data="item" />
+    <PostItem v-for="(item, index) in data" :key="index" :data="item as Record<string, unknown>" />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { toRefs } from 'vue'
 import PostItem from './PostItem.vue'
 
-export default defineComponent({
-  components: { PostItem },
-
-  props: {
-    data: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  setup() {
-    return {}
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
   },
 })
+const { data } = toRefs(props)
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/global/Tab.vue b/packages/vuepress-theme-reco/src/client/components/global/Tab.vue
index 44ce4c32..0afd8c4a 100644
--- a/packages/vuepress-theme-reco/src/client/components/global/Tab.vue
+++ b/packages/vuepress-theme-reco/src/client/components/global/Tab.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { defineComponent, h, ref, useSlots } from 'vue'
-// @ts-ignore
 import Xicons from './Xicons.vue'
 
 export default defineComponent({
@@ -23,7 +22,7 @@ export default defineComponent({
 
       // set the active item
       items.forEach((vnode, i) => {
-        vnode.props.active = i === activeIndex.value
+        vnode.props && (vnode.props.active = i === activeIndex.value)
       })
 
       return h('div', { class: 'tab' }, [
@@ -49,7 +48,7 @@ export default defineComponent({
                   },
                   h(Xicons, {
                     icon: 'Sitemap',
-                    text: vnode.props.title,
+                    text: vnode.props?.title,
                     'text-size': 12,
                   }),
                 ),
diff --git a/packages/vuepress-theme-reco/src/client/components/global/TabItem.vue b/packages/vuepress-theme-reco/src/client/components/global/TabItem.vue
index 057104b1..2427e29f 100644
--- a/packages/vuepress-theme-reco/src/client/components/global/TabItem.vue
+++ b/packages/vuepress-theme-reco/src/client/components/global/TabItem.vue
@@ -7,22 +7,21 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'TabItem',
+<script lang="ts" setup>
+import { toRefs } from 'vue'
 
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  }
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
 })
+
+const { title, active } = toRefs(props)
 </script>
 
 <style>
diff --git a/packages/vuepress-theme-reco/src/client/layouts/Categories.vue b/packages/vuepress-theme-reco/src/client/layouts/Categories.vue
index 539f8ce7..c49451e4 100644
--- a/packages/vuepress-theme-reco/src/client/layouts/Categories.vue
+++ b/packages/vuepress-theme-reco/src/client/layouts/Categories.vue
@@ -33,64 +33,55 @@
   </Common>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, onMounted, watch } from 'vue'
+<script lang="ts" setup>
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
+import { computed, onMounted, watch } from 'vue'
 import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/composables'
+
 import PostList from '@components/PostList.vue'
-import Common from '@components/Common/index.vue'
 import Pagation from '@components/Pagation.vue'
+import Common from '@components/Common/index.vue'
 import { useMagicCard } from '@composables/index.js'
 
-export default defineComponent({
-  components: { Common, PostList, Pagation },
 
-  setup() {
-    const {
-      categoryPosts,
-      categorySummary
-    } = useExtendPageData()
-    const router = useRouter()
+const {
+  categoryPosts,
+  categorySummary
+} = useExtendPageData()
+const route = useRoute()
+const router = useRouter()
 
-    const categoryList = computed(() => {
-      let list = []
-      const currentCategoryKey = categoryPosts.value.currentCategoryKey
+const categoryList = computed(() => {
+  let list = []
+  const currentCategoryKey = categoryPosts.value.currentCategoryKey
 
-      if (currentCategoryKey) {
-        const { items = [] } =
-          categorySummary[currentCategoryKey]
+  if (currentCategoryKey) {
+    const { items = [] } =
+      categorySummary[currentCategoryKey]
 
-        list = Object.values(items)
-      }
+    list = Object.values(items)
+  }
 
-      return list
-    })
+  return list
+})
 
-    const handlePagation = (page) => {
-      const {
-        currentCategoryKey,
-        currentCategoryValue
-      } = categoryPosts.value
+const handlePagation = (page) => {
+  const {
+    currentCategoryKey,
+    currentCategoryValue
+  } = categoryPosts.value
 
-      router.push(`/${currentCategoryKey}/${currentCategoryValue}/${page}.html`)
-    }
+  router.push(`/${currentCategoryKey}/${currentCategoryValue}/${page}.html`)
+}
 
-    const { initMagicCard } = useMagicCard()
-    onMounted(() => {
-      initMagicCard()
-    })
+const { initMagicCard } = useMagicCard()
 
-    const route = useRoute()
-    watch(route, () => {
-      initMagicCard()
-    })
+onMounted(() => {
+  initMagicCard()
+})
 
-    return {
-      categoryList,
-      categoryPosts,
-      handlePagation,
-    }
-  },
+watch(route, () => {
+  initMagicCard()
 })
 </script>