Skip to content

Commit

Permalink
feat(Link): add as prop (#535)
Browse files Browse the repository at this point in the history
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
  • Loading branch information
Haythamasalama and renovate[bot] authored Sep 16, 2023
1 parent 00594ea commit e404912
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 5 deletions.
2 changes: 1 addition & 1 deletion docs/content/2.elements/9.link.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
14 changes: 10 additions & 4 deletions src/runtime/components/elements/Link.vue
Original file line number Diff line number Diff line change
@@ -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 }"
Expand Down Expand Up @@ -32,9 +38,9 @@ export default defineComponent({
inheritAttrs: false,
props: {
...NuxtLink.props,
type: {
as: {
type: String,
default: null
default: 'button'
},
disabled: {
type: Boolean,
Expand Down

1 comment on commit e404912

@vercel
Copy link

@vercel vercel bot commented on e404912 Sep 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui – ./

ui-nuxt-js.vercel.app
ui.nuxt.com
ui-git-dev-nuxt-js.vercel.app

Please sign in to comment.