refactor: do not use ref: syntax yet

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

@@ -17,10 +17,15 @@
 import { computed } from 'vue'
 import { useSiteDataByRoute, useFrontmatter } from 'vitepress'
 
-ref: data = useFrontmatter()
+const data = useFrontmatter()
 
-ref: hasFeatures = computed(() => data.features && data.features.length > 0)
-ref: features = computed(() => data.features ? data.features : [])
+const hasFeatures = computed(() => {
+  return data.value.features && data.value.features.length > 0
+})
+
+const features = computed(() => {
+  return data.value.features ? data.value.features : []
+})
 </script>
 
 <style scoped>

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

@@ -23,20 +23,23 @@
 import { computed } from 'vue'
 import { useSiteDataByRoute, useFrontmatter } from 'vitepress'
 
-ref: site = useSiteDataByRoute()
-ref: data = useFrontmatter()
-
-ref: showHero = computed(() => {
-  return data.heroImage || hasHeroText || hasTagline || hasAction
+const site = useSiteDataByRoute()
+const data = useFrontmatter()
+
+const showHero = computed(() => {
+  return data.value.heroImage
+    || hasHeroText.value
+    || hasTagline.value
+    || hasAction.value
 })
 
-ref: hasHeroText = computed(() => data.heroText !== null)
-ref: heroText = computed(() => data.heroText || site.title)
+const hasHeroText = computed(() => data.value.heroText !== null)
+const heroText = computed(() => data.value.heroText || site.value.title)
 
-ref: hasTagline = computed(() => data.tagline !== null)
-ref: tagline = computed(() => data.tagline || site.description)
+const hasTagline = computed(() => data.value.tagline !== null)
+const tagline = computed(() => data.value.tagline || site.value.description)
 
-ref: hasAction = computed(() => data.actionLink && data.actionText)
+const hasAction = computed(() => data.value.actionLink && data.value.actionText)
 </script>
 
 <style scoped>

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

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { watch, defineProps } from 'vue'
+import { defineProps, ref, watch } from 'vue'
 import { useRoute } from 'vitepress'
 import type { DefaultTheme } from '../config'
 import NavDropdownLinkItem from './NavDropdownLinkItem.vue'
@@ -25,12 +25,12 @@ defineProps<{
 
 const route = useRoute()
 
-ref: open = false
+const open = ref(false)
 
-watch(() => route.path, () => { open = false })
+watch(() => route.path, () => { open.value = false })
 
 function toggle() {
-  open = !open
+  open.value = !open.value
 }
 </script>
 

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

@@ -25,13 +25,13 @@ import { useRepo } from '../composables/repo'
 import NavLink from './NavLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
 
-ref: siteByRoute = useSiteDataByRoute()
-ref: localeLinks = useLocaleLinks()
-ref: repo = useRepo()
+const site = useSiteDataByRoute()
+const localeLinks = useLocaleLinks()
+const repo = useRepo()
 
-ref: show = computed(() => links || repo)
+const show = computed(() => links.value || repo.value)
 
-ref: links = computed(() => siteByRoute.themeConfig.nav)
+const links = computed(() => site.value.themeConfig.nav)
 </script>
 
 <style scoped>