fix(Button): inherit nuxt link props without breaking `nuxt-component…

…-meta`

Resolves #578

src/runtime/components/elements/Button.vue

@@ -24,6 +24,7 @@ import UIcon from '../elements/Icon.vue'
 import ULink from '../elements/Link.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
+import { nuxtLinkProps } from '../../utils/nuxt-link'
 import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
 // @ts-expect-error
@@ -39,6 +40,7 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    ...nuxtLinkProps,
     type: {
       type: String,
       default: 'button'

src/runtime/components/elements/Link.vue

@@ -32,12 +32,12 @@
 <script lang="ts">
 import { isEqual } from 'ohash'
 import { defineComponent } from 'vue'
-import { NuxtLink } from '#components'
+import { nuxtLinkProps } from '../../utils/nuxt-link'
 
 export default defineComponent({
   inheritAttrs: false,
   props: {
-    ...NuxtLink.props,
+    ...nuxtLinkProps,
     as: {
       type: String,
       default: 'button'

src/runtime/utils/nuxt-link.ts

@@ -0,0 +1,62 @@
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from '#vue-router'
+
+export const nuxtLinkProps = {
+  to: {
+    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: undefined
+  },
+  href: {
+    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: undefined
+  },
+  // Attributes
+  target: {
+    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & {}) | null>,
+    default: undefined
+  },
+  rel: {
+    type: String,
+    default: undefined
+  },
+  noRel: {
+    type: Boolean,
+    default: undefined
+  },
+  // Prefetching
+  prefetch: {
+    type: Boolean,
+    default: undefined
+  },
+  noPrefetch: {
+    type: Boolean,
+    default: undefined
+  },
+  // Styling
+  activeClass: {
+    type: String,
+    default: undefined
+  },
+  exactActiveClass: {
+    type: String,
+    default: undefined
+  },
+  prefetchedClass: {
+    type: String,
+    default: undefined
+  },
+  // Vue Router's `<RouterLink>` additional props
+  replace: {
+    type: Boolean,
+    default: undefined
+  },
+  ariaCurrentValue: {
+    type: String,
+    default: undefined
+  },
+  // Edge cases handling
+  external: {
+    type: Boolean,
+    default: undefined
+  }
+} as const