chore: update components

src/components/elements/Button.vue

@@ -14,13 +14,15 @@
 
 <script>
 import { ref, computed } from 'vue'
+import Link from '../elements/Link'
 import Icon from '../elements/Icon'
 import { classNames } from '../../utils'
 import $ui from '#build/ui'
 
 export default {
   components: {
-    Icon
+    Icon,
+    Link
   },
   props: {
     type: {
@@ -73,10 +75,6 @@ export default {
       type: Boolean,
       default: false
     },
-    href: {
-      type: String,
-      default: null
-    },
     to: {
       type: [String, Object],
       default: null
@@ -118,10 +116,8 @@ export default {
     const button = ref(null)
 
     const buttonIs = computed(() => {
-      if (props.href) {
-        return 'a'
-      } else if (props.to) {
-        return 'NuxtLink'
+      if (props.to) {
+        return 'Link'
       }
 
       return 'button'
@@ -129,8 +125,7 @@ export default {
 
     const buttonProps = computed(() => {
       switch (buttonIs.value) {
-        case 'a': return { href: props.href, target: props.target }
-        case 'NuxtLink': return { to: props.to }
+        case 'Link': return { to: props.to, target: props.target }
         default: return { disabled: props.disabled || props.loading, type: props.type }
       }
     })

src/components/elements/Dropdown.vue

@@ -19,7 +19,7 @@
         <MenuItems :class="itemsClass" static>
           <div v-for="(subItems, index) of items" :key="index" class="py-1">
             <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled }">
-              <Component v-bind="item" :is="(item.to && 'NuxtLink') || (item.href && 'a') || 'button'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)">
+              <Component v-bind="item" :is="(item.to && 'Link') || 'button'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)">
                 <slot :name="item.slot" :item="item">
                   <Icon v-if="item.icon" :name="item.icon" :class="itemIconClass" />
 
@@ -43,6 +43,7 @@ import {
 } from '@headlessui/vue'
 
 import Icon from '../elements/Icon'
+import Link from '../elements/Link'
 import { classNames, usePopper } from '../../utils'
 
 export default {
@@ -51,7 +52,8 @@ export default {
     MenuButton,
     MenuItems,
     MenuItem,
-    Icon
+    Icon,
+    Link
   },
   props: {
     items: {

src/components/elements/Link.vue

@@ -1,5 +1,13 @@
 <template>
-  <NuxtLink v-slot="{ href, navigate }" v-bind="$props" custom>
+  <a v-if="isExternalLink" v-bind="$attrs" :class="isActive ? activeClass : inactiveClass" :href="to" :target="target">
+    <slot v-bind="{ isActive }" />
+  </a>
+  <router-link
+    v-else
+    v-slot="{ href, navigate }"
+    v-bind="$props"
+    custom
+  >
     <a
       v-bind="$attrs"
       :href="href"
@@ -8,7 +16,7 @@
     >
       <slot v-bind="{ isActive }" />
     </a>
-  </NuxtLink>
+  </router-link>
 </template>
 
 <script>
@@ -28,6 +36,10 @@ export default {
     exact: {
       type: Boolean,
       default: false
+    },
+    target: {
+      type: String,
+      default: null
     }
   },
   setup (props) {
@@ -39,9 +51,13 @@ export default {
         return !!route.path.startsWith(props.to)
       }
     })
+    const isExternalLink = computed(() => {
+      return typeof props.to === 'string' && props.to.startsWith('http')
+    })
 
     return {
-      isActive
+      isActive,
+      isExternalLink
     }
   }
 }

src/components/navigation/VerticalNavigation.vue

@@ -1,11 +1,10 @@
 <template>
   <nav class="space-y-1">
     <Link
-      v-for="link of links"
+      v-for="(link, index) of links"
       v-slot="{ isActive }"
-      :key="link.to || link.label"
-      :to="link.to"
-      :exact="link.exact"
+      :key="index"
+      v-bind="link"
       :class="baseClass"
       :active-class="activeClass"
       :inactive-class="inactiveClass"