Merge pull request #1505 from PrefectHQ/fix-p-link-for-absolute-urls

Fix absolute urls when using `PLink`

demo/sections/components/Links.vue

@@ -4,6 +4,7 @@
     :demos="[
       { title: 'Local' },
       { title: 'External' },
+      { title: 'Absolute' },
     ]"
   >
     <template #local>
@@ -17,9 +18,18 @@
         Link to prefect.io
       </p-link>
     </template>
+
+    <template #absolute>
+      <p-link :to="absolute">
+        {{ absolute }}
+      </p-link>
+    </template>
   </ComponentPage>
 </template>
 
 <script lang="ts" setup>
+  import { computed } from 'vue'
   import ComponentPage from '@/demo/components/ComponentPage.vue'
+
+  const absolute = computed(() => `${window.location.protocol}//${window.location.host}/components/links`)
 </script>

src/components/Link/PLink.vue

@@ -11,22 +11,23 @@
   import { computed } from 'vue'
   import { RouteLocationRaw } from 'vue-router'
   import PIcon from '@/components/Icon/PIcon.vue'
-  import { isRouteExternal } from '@/utilities/router'
+  import { isRouteExternal, isRouteRelative } from '@/utilities/router'
 
   const props = defineProps<{
     to?: RouteLocationRaw,
   }>()
 
   const isExternal = computed(() => !!props.to && isRouteExternal(props.to))
-  const component = computed(() => !props.to || isExternal.value ? 'a' : 'router-link')
+  const isAbsolute = computed(() => !!props.to && !isRouteRelative(props.to))
+  const component = computed(() => !props.to || isExternal.value || isAbsolute.value ? 'a' : 'router-link')
   const componentProps = computed(() => {
     if (!props.to) {
       return {
         target: '_blank',
       }
     }
 
-    if (isExternal.value) {
+    if (isExternal.value || isAbsolute.value) {
       return {
         href: props.to,
         target: '_blank',

src/utilities/router.ts

@@ -30,7 +30,11 @@ export function isRouteExternal(route: RouteLocationRaw): boolean {
   }
 }
 
-export function isRouteRelative(route: string): boolean {
+export function isRouteRelative(route: RouteLocationRaw): boolean {
+  if (typeof route !== 'string') {
+    return false
+  }
+
   return route.startsWith('/')
 }