feat(theme): add AutoLink router behavior

packages/theme/src/client/components/AutoLink.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { EXTERNAL_URL_RE, normalizeLink } from '../utils/index.js'
 import IconExternalLink from './icons/IconExternalLink.vue'
 
@@ -9,10 +10,21 @@ const props = defineProps<{
   noIcon?: boolean
 }>()
 
+const router = useRouter()
+
 const tag = computed(() => (props.tag ?? props.href ? 'a' : 'span'))
 const isExternal = computed(
   () => props.href && EXTERNAL_URL_RE.test(props.href)
 )
+
+const linkTo = (e: Event) => {
+  if (!isExternal.value) {
+    e.preventDefault()
+    if (props.href) {
+      router.push({ path: props.href })
+    }
+  }
+}
 </script>
 
 <template>
@@ -23,6 +35,7 @@ const isExternal = computed(
     :href="href ? normalizeLink(href) : undefined"
     :target="isExternal ? '_blank' : undefined"
     :rel="isExternal ? 'noreferrer' : undefined"
+    @click="linkTo($event)"
   >
     <slot />
     <IconExternalLink v-if="isExternal && !noIcon" class="icon" />

packages/theme/src/client/components/VButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { EXTERNAL_URL_RE } from '../utils/index.js'
 
 const props = defineProps<{
@@ -10,6 +11,7 @@ const props = defineProps<{
   href?: string
 }>()
 
+const router = useRouter()
 const classes = computed(() => [props.size ?? 'medium', props.theme ?? 'brand'])
 
 const isExternal = computed(
@@ -23,6 +25,13 @@ const component = computed(() => {
 
   return props.href ? 'a' : 'button'
 })
+
+const linkTo = (e: Event) => {
+  if (!isExternal.value) {
+    e.preventDefault()
+    props.href && router.push({ path: props.href })
+  }
+}
 </script>
 
 <template>
@@ -33,6 +42,7 @@ const component = computed(() => {
     :href="href"
     :target="isExternal ? '_blank' : undefined"
     :rel="isExternal ? 'noreferrer' : undefined"
+    @click="linkTo($event)"
   >
     {{ text }}
   </Component>