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

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

docs/content/2.elements/9.link.md

@@ -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.

src/runtime/components/elements/Link.vue

@@ -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,