feat(Link): add as prop (#535)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This commit is contained in:
Haytham A. Salama
2023-09-16 22:50:55 +03:00
committed by GitHub
parent 00594ea59b
commit e40491208a
2 changed files with 11 additions and 5 deletions

View File

@@ -17,6 +17,6 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
It also renders an `<a>` tag when a `to` prop is provided, otherwise it renders a `<button>` tag.
It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
It is used underneath by the [Button](/elements/button), [Dropdown](/elements/dropdown) and [VerticalNavigation](/navigation/vertical-navigation) components.

View File

@@ -1,7 +1,13 @@
<template>
<button v-if="!to" :type="type" :disabled="disabled" v-bind="$attrs" :class="inactiveClass">
<component
:is="as"
v-if="!to"
:disabled="disabled"
v-bind="$attrs"
:class="inactiveClass"
>
<slot />
</button>
</component>
<NuxtLink
v-else
v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
@@ -32,9 +38,9 @@ export default defineComponent({
inheritAttrs: false,
props: {
...NuxtLink.props,
type: {
as: {
type: String,
default: null
default: 'button'
},
disabled: {
type: Boolean,