Wp link refactor to vue3

components/BlockWork.vue

@@ -53,15 +53,15 @@ const playVideo = () => {
 }
 
 const onIsPlaying = () => {
-  alert('Video is playing!')
+  // alert('Video is playing!')
 }
 </script>
 
 <template>
   <div
     class="wrapper"
   >
-    <NuxtLink
+    <wp-link
       :to="to"
       :styles="styles"
     >
@@ -82,7 +82,7 @@ const onIsPlaying = () => {
         :image="image"
         @is-playing="onIsPlaying"
       />
-    </NuxtLink>
+    </wp-link>
 
     <button @click="playVideo">
       Play Video

components/WpLink.vue

@@ -0,0 +1,128 @@
+<template>
+    <nuxt-link
+        v-if="isRelative || isInternal"
+        class="wp-link"
+        :to="parsedTo"
+    >
+        <slot />
+
+    </nuxt-link>
+
+    <a
+        v-else-if="to"
+        :href="parsedTo"
+        :target="parsedTarget"
+        class="wp-link"
+    >
+        <slot />
+    </a>
+
+    <component
+        :is="element"
+        v-else
+        class="wp-link"
+    >
+        <slot />
+    </component>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, toRefs,  } from "vue"
+const siteSettings = useSiteSettingStore()
+
+const props = defineProps<{
+    to: string
+    target?: string
+    element?: string
+
+}>()
+
+const { to, target, element } = toRefs(props)
+
+let isRelative = computed(() => {
+    let result = false
+    switch (true) {
+        case isEmail.value:
+            result = false
+            break
+        case isPhone.value:
+            result = false
+            break
+        case target.value == "_blank":
+            // If open in new window, then render an a-tag
+            result = false
+            break
+        case to && String(to).indexOf(".") === 0:
+        case to && String(to).indexOf("/") === 0:
+            // return true if we start with a slash
+            result = true
+    }
+    return result
+})
+
+let frontendUrl = computed(() => {
+    return siteSettings.settings.frontendUrl || false
+})
+
+
+
+let isInternal = computed(() => {
+    // wp-content in url means probably a download link, so open in new window
+    if (
+        !to ||
+        to.value?.includes("wp-content") ||
+        isEmail.value ||
+        isPhone.value
+    ) {
+        return false
+    }
+    return to.value.startsWith(frontendUrl.value)
+})
+
+let isHashLink = computed(() => {
+    return to.value.startsWith("#")
+})
+
+let isEmail = computed(() => {
+    return to.value.includes("mailto:")
+})
+
+let isPhone = computed(() => {
+    return to.value.includes("tel:")
+})
+
+
+let parsedTo = computed(() => {
+    // Should be the same as the deprecated unescape 
+    let url = encodeURI(to.value)
+
+    // Replace all these things
+    const replaceThese = [
+        siteSettings.siteMeta?.frontendUrl || "",
+        siteSettings.siteMeta?.backendUrl || ""
+    ]
+    replaceThese.forEach((element) => {
+        url = url.replace(element, "")
+    })
+
+    // Abort for non-local links
+    switch (true) {
+        case isEmail.value:
+        case isPhone.value:
+        case url.startsWith("/"):
+        case url.startsWith("."):
+        case url.startsWith("http"):
+            return url
+    }
+
+    return `/${url}`
+})
+
+let parsedTarget = computed(() => {
+    if (!isInternal.value && !isRelative.value && !isHashLink.value) {
+        return "_blank"
+    } else {
+        return target
+    }
+})
+</script>